[안드로이드] Activity에서 RecylerView + CardView 연결하기 (Kotlin)

🌊구글링의 바다🌊로부터 건져온,
2021년 기준으로 작동되는 간단한 샘플 코드다!!!

Git 코드 샘플 :
https://github.com/gineepark/andorid-cardview

참고 문서 :
https://developer.android.com/guide/topics/ui/layout/recyclerview?hl=ko#steps-for-implementing

파일 구조!

액티비티, 액티비티xml, 카드뷰xml, 어댑터까지 총4개의 파일이 필요하다.

🐣 첫번째, dependencies 추가

리사이클러뷰, 카드뷰를 사용하려면
build.gradle 파일에 이에대한 dependencies 추가해야 한다!

dependencies {
 
	 ...
 
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc03"
    implementation "androidx.recyclerview:recyclerview:1.1.0"
    implementation "androidx.cardview:cardview:1.0.0"
}

🐣두번째, 메인xml에 recyclerview 요소 추가

리사이클러뷰를 넣으려는 자리에 이 코드를 넣는다!

<androidx.recyclerview.widget.RecyclerView
      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
      android:id="@+id/recyclerview_main"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
  </androidx.recyclerview.widget.RecyclerView>

LayoutManager은 자신이 구현하고 싶은 뷰의 레이아웃에 따라 달라진다!

LinearLayout, GridLayout 등이 있는데
이 예제에서는 LinearLayout을 사용한다.

🐣세번째, 카드뷰 레이아웃 xml 추가

원하는 디자인으로 xml을 작성한다.
나는 아래와 같은 레이아웃으로 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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#f7f2f3"
    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:id="@+id/item_image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:src="@drawable/ic_notice" />


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

        <TextView
            android:id="@+id/item_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/item_title"
            android:layout_toEndOf="@+id/item_image"
            android:layout_toRightOf="@+id/item_image"
            android:text="Detail 입니다." />

    </RelativeLayout>

</androidx.cardview.widget.CardView>

🐣네번째, 액티비티 kotlin 파일 작성

package com.example.cardview

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.LinearLayoutManager.HORIZONTAL
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
  private lateinit var recyclerView: RecyclerView
  private lateinit var viewAdapter: RecyclerView.Adapter<*>
  private lateinit var viewManager: RecyclerView.LayoutManager

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
	// 1
      viewManager = LinearLayoutManager(this, HORIZONTAL, true)
	// 2
      viewAdapter = MyAdapter()

	// 3
      recyclerView = findViewById<RecyclerView>(R.id.recyclerview_main).apply {
          // use this setting to improve performance if you know that changes
          // in content do not change the layout size of the RecyclerView
          setHasFixedSize(true)
          // use a linear layout manager
          layoutManager = viewManager
          // specify an viewAdapter (see also next example)
          adapter = viewAdapter

      }
  }
}

onCreate 전에 recyclerView, viewAdapter, viewManager 변수를 선언한다.

onCreate 안에
1. viewManager를 본인이 원하는 LayoutManager로 설정한다.
2. Adapter를 설정한다. 이 시점에 아직 어댑터는 추가하지 않았지만 우선 이름만 써놓는다!
3. 만들어놓은 리사이클러뷰에 이 어댑터를 붙이는 과정이다.

🐣다섯번째, Adapter 추가

package com.example.cardview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView

class MyAdapter() :
        RecyclerView.Adapter<MyAdapter.MyViewHolder>() {
    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        public var itemimage: ImageView = itemView.findViewById(R.id.item_image)
        public var itemtitle: TextView = itemView.findViewById(R.id.item_title)
        public var itemdetail: TextView = itemView.findViewById(R.id.item_detail)
    }
    
    // 1. Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(parent: ViewGroup,
                                    viewType: Int): MyAdapter.MyViewHolder {
        // create a new view
        val cardView = LayoutInflater.from(parent.context)
                .inflate(R.layout.card_layout, parent, false)

        return MyViewHolder(cardView)
    }

    // 2. Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.itemimage.setImageResource(R.drawable.ic_notice)
        holder.itemtitle.setText("타이틀입니다")
        holder.itemdetail.setText("세부사항 입니다")
    }

    // 3. Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount(): Int {
        return 5
    }
}

카드뷰에 있는 TextView, ImageView 등을
리사이클러뷰와 연결하는 곳이 바로 어댑터다.

어댑터는 무조건 3가지 함수를 오버라이드해야한다!

1. onCreateViewHolder 함수는
   만들어 놓은 카드 레이아웃 xml을 가져온다.
   
   
2. onBindViewHolder 함수는
   연결한 컴포넌트에 데이터를 연결한다.
   
   
3. getItemCount 함수는
   리사이클러 뷰에 몇개의 카드뷰를 연결할지를 결정한다.

🐣완성!

위 과정을 모두 완료했으면 뷰 구현에 성공했을 것이다!
아래는 샘플 코드로 만든 뷰이다!