RecyclerView 와 CardView 사용 (Kotlin)

이 글의 소스코드는 모두 Kotlin으로 작성되어 있습니다.

 

 

RecyclerView는 ListView의 좀더 발전된 형태라고 보시면 될 것 같습니다. ListView 가 스크롤되어 화면에서 벗어났을 때 새로운 뷰를 생성하는 대신 RecyclerView는 그것을 재사용하므로 성능 향상에 이점을 얻을 수 있습니다.

따라서 어떤 일련의 목록들을 나타내고 싶을 때 사용을 하는 것이고 여기에 CardView를 이용하여 이러한 각 목록들을 카드 형태로 이쁘게 만들 수 있습니다.

 

우선 이둘을 사용하기 위해서는 Module: app 에 해당하는 build.gradle로가서 각각을 implementation 해주어야 합니다.

 

implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'

 

RecyclerView는  레이아웃 매니저를 하나 선택하여 보이는 방법을 제어할 수 있습니다. 여기서는 LinearLayoutManager를 사용하겠습니다. RecyclerView의 각 항몽은 ViewHolder 클래스의 객체로 생성됩니다. 이러한 객체는 RecyclerView.ViewHolder를 확장하여 정의한 클래스의 인스턴스입니다.

 

ViewHolder 객체는 RecyclerView.Adapter를 확장하여 만든 어댑터에서 관리합니다. 어댑터는 필요에 따라 뷰 홀더를 만듭니다. 또한 어댑터는 뷰 홀더를 데이터에 바인딩합니다. 이 작업은 뷰 홀더를 특정 위치에 할당하고 어댑터의 onBindViewHolder() 메서드를 호출하여 실행됩니다. 이 메서드는 뷰 홀더의 위치를 사용하여 목록 위치를 기반으로 콘텐츠를 결정합니다.

 

ListView 처럼 RecyclerView도 adapter를 통해 각 ViewHolder 객체를 관리합니다. adapter는 RecylcerVIew.ViewHolder 클래스의 3가지 함수 onCreateViewHolder, onBindViewHolder, getItemCount 총 3가지 함수를 override하여야 합니다.

 

각 함수는

 

getItemCount - 현재 리스트에 보여줄 항목의 개수를 리턴합니다.

 

onCreateViewHolder - viewHolder 객체를 생성하고 반환합니다. 뷰는 XML 파일을 inflate하여 생성합니다.

 

onBindViewHolder - ViewHolder 객체와 리스트 항목의 위치를 나타내는 정수 값을 받아서  RecyclerView에 반환합니다.

 

 

총 2개의 .kt 파일과 2개의 xml 파일로 구성 되어있습니다.

 

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

        var recyclerView = recyclerview_main // recyclerview id

        var layoutManager = LinearLayoutManager(this)
        recyclerView.layoutManager = layoutManager
        var adapter = MyAdapter()
        recyclerView.adapter = adapter
    }
}

 

Myadapter.kt

 

class MyAdapter(): RecyclerView.Adapter<MyAdapter.MyViewHolder>(){

    var titles = arrayOf("one", "two", "three", "four", "five")
    var details = arrayOf("Item one", "Item two", "Item three", "Item four", "Itme five")

    var images = intArrayOf(R.drawable.ic_launcher_foreground,
                            R.drawable.ic_launcher_foreground,
                            R.drawable.ic_launcher_foreground,
                            R.drawable.ic_launcher_foreground,
                            R.drawable.ic_launcher_foreground)


    class MyViewHolder(itemview: View) : RecyclerView.ViewHolder(itemview) {
        public var itemimage: ImageView = itemview.item_image
        public var itemtitle: TextView = itemview.item_title
        public var itemdetail: TextView = itemview.item_detail
    }

    override fun onCreateViewHolder(viewgroup: ViewGroup, position: Int): MyViewHolder {
        var v: View = LayoutInflater.from(viewgroup.context).inflate(R.layout.card_layout, viewgroup, false)

        return MyViewHolder(v)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.itemtitle.setText(titles.get(position))
        holder.itemimage.setImageResource(images.get(position))
        holder.itemdetail.setText(details.get(position))
    }

    override fun getItemCount(): Int {
        return titles.size
    }
}

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview_main"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </androidx.recyclerview.widget.RecyclerView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

card_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toEndOf="@+id/item_image"
            android:layout_toRightOf="@id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toEndOf="@+id/item_image"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title">
        </TextView>

    </RelativeLayout>

</androidx.cardview.widget.CardView>

카드뷰의 각 속성을 통해 배경색, 끝모서리의 둥근정도, 그림자 효과 등을 설정 할 수 있습니다.

 

※ 만약 스크롤 방향을 좌우(가로형) 으로 만들고 싶다면 MainActivity 에서 아래와 같은 코드를 추가해주면 됩니다.

layoutManager.orientation = LinearLayoutManager.HORIZONTAL