여러가지 방식으로 List 만들어보기 - OldStyle

이전 글에서 MVVM &  Databinding & ROOM ... 등을 사용해서 다양한 방식으로 리스트를 만드는 방법에 대해 설명했는데 개발을 하다보면 이런 복잡한 구조가 아닌 문득 예전에 사용하던 Simple한 방식이 필요할때가 있습니다.

 

이 글은 MVVM 이런거 없이 기본으로 돌아가 리스트를 만드는 방법에 대해 설명합니다.

이글은 내용이 간단해 별도의 설명 없이 코드 위주로 작성되었습니다.

 

이전글:

   - als2019.tistory.com/31

   - als2019.tistory.com/32

여러가지 방식으로 List 만들어보기 - part 2

 

Layout xml 만들기

우선 리스트를 보여줄 Layout xml 파일을 아래와 같이 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_title"
        android:background="@color/colorGrape"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <ImageView
            android:id="@+id/imvBack"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:padding="15dp"
            android:src="@drawable/ic_back_white_24dp"/>
        <TextView
            android:id="@+id/txvTitle"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/toolbar_title"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:textSize="@dimen/dp20"
            android:textStyle="bold"
            android:textColor="@color/colorWhite"
            android:text="@string/listtype_oldstyle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.appcompat.widget.Toolbar>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcvOldStyle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

Activity 만들기

그 다음으로 Activity를 아래와 같이 만들어줍니다.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_oldstyle)

        imvBack.setOnClickListener {
            this@OldStyleActivity.finish()
        }

        val items = mutableListOf<DataDefault>()
        for(idx in 0 .. 9){
            items.run{
                add(
                    DataDefault(
                        idx+1,
                        "Title ${idx+1}",
                        "Description blabla umum..."
                    )
                )
            }
        }

        rcvOldStyle.adapter = ListAdapterOldStyle(items){
            Toast.makeText(this@OldStyleActivity, "Item Click: ${it.index}", Toast.LENGTH_SHORT).show()
        }
        (rcvOldStyle.adapter as ListAdapterOldStyle).notifyDataSetChanged()
    }

위 코드를 보면 RecyclerView를 ListAdapter에 연결하는 부분이 있는데 사용자가 아이템을 클릭했을 때 이벤트를 받을 콜백함수를 정의해 줍니다.

* 콜백 함수에 대해서는 별도의 글에서 자세히 설명하도록 하겠습니다.

 

ListAdapter 만들기

이제 마지막으로 ListAdapter를 만들어 줍니다.

class ListAdapterOldStyle(var items : List<DataDefault>, val onItemClick: ((DataDefault)->Unit)) : RecyclerView.Adapter<ListAdapterOldStyle.AdapterViewHolder>() {

    inner class AdapterViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val clLayout : ConstraintLayout = itemView.findViewById(R.id.clLayout)
        val txvIndex : TextView = itemView.findViewById(R.id.txvIndex)
        val txvTitle : TextView = itemView.findViewById(R.id.txvTitle)

        init {
            clLayout.setOnClickListener {
                if(adapterPosition != RecyclerView.NO_POSITION) {
                    onItemClick.invoke(items[adapterPosition])
                }
            }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AdapterViewHolder {
        val inflater = parent.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val view = inflater.inflate(R.layout.item_oldstyle, parent, false)
        return AdapterViewHolder(view)
    }

    override fun getItemCount() = items.size

    override fun onBindViewHolder(holder: AdapterViewHolder, position: Int) {
        holder.txvIndex.text = items[position].index.toString()
        holder.txvTitle.text = items[position].title
    }
}

위 코드에서 눈여겨 보아야 할 부분은 Item을 클릭을 처리해주는 AdapterViewHolder class의 init{} 함수 입니다.

사용자가 Item을 클릭했을 때, 사용자가 선택한 아이템의 포지션을 adapterPosition 변수를 통해 알아 낼 수 있습니다.

 

* 참고:

위 설명된 내용에 대한 샘플 소스는 아래 github에 있습니다.

github.com/lee-kil-jae/MyListCollection