[android] CardView와 그리드 레이아웃의 함께 사용하는 방법

15 Dec 2023

android

안녕하세요! 안드로이드 앱을 개발하다보면 CardView와 그리드 레이아웃을 함께 사용하는 경우가 많습니다. 이러한 경우에는 CardView를 사용하여 각 아이템을 표시하고 그리드 레이아웃을 사용하여 여러 개의 CardView를 레이아웃으로 구성할 수 있습니다.

CardView와 그리드 레이아웃을 추가하기

먼저, 앱의 build.gradle 파일에 다음과 같이 implementation 'androidx.cardview:cardview:1.0.0'를 추가하여 CardView를 추가합니다.

implementation 'androidx.cardview:cardview:1.0.0'

다음으로, 그리드 레이아웃을 추가합니다. activity_main.xml 파일에서 GridView를 추가하고 각 아이템을 표시할 item_cardview.xml 레이아웃 파일을 생성합니다.

activity_main.xml:

<GridView
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:verticalSpacing="8dp"
    android:horizontalSpacing="8dp"/>

item_cardview.xml:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <!-- 여기에 카드에 들어갈 뷰들을 추가합니다 -->
    
</androidx.cardview.widget.CardView>

CardView를 그리드 레이아웃에 추가하기

이제 앱의 액티비티 또는 프래그먼트에서 그리드 뷰 어댑터를 설정하고 각 항목에 CardView를 추가할 수 있습니다.

val gridView: GridView = findViewById(R.id.gridView)
gridView.adapter = CustomAdapter(context, dataList) // dataList는 표시할 데이터 목록

CustomAdapter 클래스를 통해 각 항목에 item_cardview.xml을 inflate하고 데이터를 설정합니다.

class CustomAdapter(private val context: Context, private val dataList: List<Data>) : BaseAdapter() {
    
    override fun getCount(): Int {
        return dataList.size
    }

    override fun getItem(position: Int): Any {
        return dataList[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var cardView = convertView
        if (cardView == null) {
            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            cardView = inflater.inflate(R.layout.item_cardview, null)
        }

        // 각 항목의 데이터를 설정합니다
        val data = getItem(position) as Data
        // ...

        return cardView
    }
}

이제 CardView와 그리드 레이아웃이 함께 사용되었으며, 데이터 목록을 효율적으로 표시할 수 있습니다.

이상입니다. CardView와 그리드 레이아웃을 함께 사용하는 방법을 알아보았습니다. 부족한 부분이 있을 수 있지만 참고가 되었으면 좋겠습니다.