[android] CardView와 데이터 모델 연동

15 Dec 2023

android

안드로이드 앱을 개발할 때 CardView는 많은 사용자 인터페이스(UI)에서 일반적으로 사용됩니다. CardView를 사용하면 각 항목을 나타내는 카드 형태의 UI 요소를 만들 수 있습니다. 이때 CardView와 데이터 모델을 연동하여 동적으로 정보를 표시할 수 있습니다.

1. CardView 추가하기

먼저, build.gradle 파일에 다음 종속성을 추가하여 CardView를 프로젝트에 포함시킵니다.

implementation 'androidx.cardview:cardview:1.0.0'

그런 다음, 레이아웃 파일에 CardView를 추가합니다.

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- 카드 내용 추가 -->

</androidx.cardview.widget.CardView>

2. 데이터 모델 생성

다음으로, 데이터를 표시할 데이터 모델을 만들어야 합니다. 데이터 모델은 해당 카드에 표시할 정보를 나타냅니다. 예를 들어, 사용자 이름, 프로필 이미지, 설명 등의 정보가 포함될 수 있습니다.

data class CardData(
    val title: String,
    val description: String,
    val imageUrl: String
)

3. 데이터 바인딩

CardView에 데이터를 표시하기 위해 데이터 바인딩 라이브러리나 RecyclerView 어댑터를 사용할 수 있습니다. 예를 들어, 데이터 바인딩을 사용하는 방법은 다음과 같습니다.

val cardView: CardView = findViewById(R.id.cardView)
val data: CardData = // 데이터 모델 초기화

// 데이터 바인딩
val titleTextView = cardView.findViewById<TextView>(R.id.title)
val descriptionTextView = cardView.findViewById<TextView>(R.id.description)
val imageView = cardView.findViewById<ImageView>(R.id.image)

titleTextView.text = data.title
descriptionTextView.text = data.description
Glide.with(this).load(data.imageUrl).into(imageView)

이제 CardView와 데이터 모델을 연동하여 동적으로 정보를 표시할 수 있습니다. 안드로이드 카드뷰와 데이터 모델을 연동하는 방법에 대한 간단한 안내였지만, 이를 통해 다양한 카드뷰를 만들고 다양한 데이터를 표시할 수 있습니다.

참고 문헌: