[kotlin] 리스트 및 그리드 뷰 구현을 위한 Material Components 활용 방법

20 Dec 2023

kotlin

Material Design은 Google에서 만든 디자인 시스템이며 안드로이드 앱의 사용자 인터페이스(UI)를 개발하기 위한 표준 가이드라인을 제공합니다. Material Components는 이러한 가이드라인들을 구현하는 데 도움을 주는 라이브러리입니다. Kotlin으로 안드로이드 앱을 개발하다면 Material Components를 활용하여 리스트와 그리드 뷰를 구현할 수 있습니다.

1. 리스트 뷰 구현

리스트 뷰를 Material Components 라이브러리로 구현하는 방법은 다음과 같습니다.

1.1. 의존성 추가

build.gradle 파일에 Material Components 라이브러리 의존성을 추가합니다.

implementation 'com.google.android.material:material:1.4.0'

1.2. 레이아웃 XML 추가

리스트 뷰를 표시할 레이아웃 XML 파일에 RecyclerView를 추가합니다.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

1.3. 어댑터 및 뷰홀더 구현

리스트 뷰의 어댑터와 뷰홀더를 구현합니다.

class MyAdapter(private val dataSet: List<String>) :
    RecyclerView.Adapter<MyAdapter.ViewHolder>() {

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView = view.findViewById(R.id.textView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyAdapter.ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = dataSet[position]
    }

    override fun getItemCount() = dataSet.size
}

1.4. 액티비티에서 사용

액티비티에서 어댑터를 설정하여 리스트 뷰를 표시합니다.

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = MyAdapter(dataSet)

2. 그리드 뷰 구현

그리드 뷰를 Material Components 라이브러리로 구현하는 방법은 리스트 뷰와 유사합니다. 다만, GridLayoutManager를 사용하여 그리드 형식의 레이아웃을 설정해야 합니다.

2.1. 레이아웃 XML 추가

그리드 뷰를 표시할 레이아웃 XML 파일에 RecyclerView를 추가하고, SpanCount를 설정합니다.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/gridRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2.2. 액티비티에서 사용

액티비티에서 GridLayoutManager를 설정하여 그리드 뷰를 표시합니다.

val gridRecyclerView: RecyclerView = findViewById(R.id.gridRecyclerView)
gridRecyclerView.layoutManager = GridLayoutManager(this, 2)  // 2는 그리드의 열 개수
gridRecyclerView.adapter = MyAdapter(dataSet)

Material Components라이브러리를 활용하여 Kotlin에서 리스트와 그리드 뷰를 구현하는 방법을 확인해보았습니다. 이제 여러분은 앱의 UI를 Material Design에 맞게 구현하여 사용자들에게 더 나은 경험을 제공할 수 있게 될 것입니다.

참고 문헌:

Material Components for Android