안드로이드 코틀린 : RecyclerView로 목록 만들기(with ViewBinding)

Android Kotlin RecyclerView

Android Kotlin : RecyclerView로 목록 만들기 with ViewBinding

Android Studio 의 Kotlin 언어에서

ViewBinding를 사용하여 RecylerView로 목록을 만드는 예제

입니다. RecyclerView가 처음이면 간단하게 목록을 만들 수 있는 Spinner 를 먼저 참고하시면 도움이 될 수 있습니다.

Android Kotlin : Spinner

안드로이드 코틀린 : Spinner 로 목록 만들기 및 기타 설정 방법

 

프로젝트 생성 및 환경 설정

프로젝트 생성

아래 그림과 같이 프로젝트를 생성합니다.

• 프로젝트명 : RecyclerView
• 사용언어 : Kotlin

※ 이 포스트는 Android Studio 4.1.2, Kotlin 1.4.31 버전으로 작성하였습니다.

 

ViewBinding 설정

App > Gradle Scripts > build.gradle 에 ViewBinding 설정을 위해 아래의 코드를 추가합니다. 코드 추가가 완료되면 Sync Now 를 클랫해서 Gradle 변경 사항을 적용합니다.

android { 
	... 
    viewBinding { 
    	enabled = true 
    } 
}

Gragle 수정 사항 적용

※ ViewBinding은 Layout에 있는 View의 Id를 코틀린 코드에서 직접 사용 할 수 있도록 해주는 도구입니다. View Binding과 관련된 설명은 아래의 링크를 참조해주세요.

안드로이드 View Binding 사용하기

안드로이드 View Binding 사용하기 - kotlin-android-extensions 지원 중단

 

레이아웃 UI 작성

activity_main.xml 코드 작성

아래와 같이 activity_main.xml 레이아웃 파일에 RecyclerView와 FAB(FloatingActionButton)을 추가합니다. 아래와 같이 코드를 작성한 UI 화면은 코드 아래 그림과 같습니다. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:contentDescription="NewProject"
        android:src="@android:drawable/ic_input_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml

RecyclerView Item 레이아웃 작성

RecyclerView의 Item레이아웃을 작성하기 위해 아래 그림과 같이 item_recycler.xml 리소스 파일을 추가 후 아래와 같이 코드를 작성합니다. 간단하게 TextView 하나 있는 형태입니다.

item_recycler.xml 레이아웃 리소스 추가

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="30dp">

    <TextView
        android:id="@+id/textView"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

코틀린 코드 작성

RecyclerView Item에 맞는 Data Class 생성

RecyclerView Item 레이아웃에 맞는 Data Class를 생성합니다. 클래스 이름은 Member으로 합니다.

Member Class 파일 생성

Member 데이터 클래스를 아래와 같이 생성합니다. 코틀린에서 data class는 class앞에 data 선언문을 이용해 생성합니다. 클래스의 사용에 따라 클래스 멤버(프로퍼티)가 변경될 수 있는 경우 val이 아닌 var로 선언하면 됩니다.

package com.blacklog.recyclerview

data class Member(val name: String)

 

RecyclerView 아답터 클래스 생성

아래와 같이 MyAdapter클래스 파일을 생성합니다.

RecyclerView Adapter로 사용할 MyAdapter 클래스 생성

MyAdapter.kt 파일에 아래와 같이 코드를 작성합니다. MyAdapter 클래스 내의 onCreatViewHolder, onBindViewHolder, getItemCount 메서드는 RecyclerView.Adapter 인터페이스의 구성원으로 Ctrl+I 를 눌러오버라이드 합니다. 

• onCreateViewHolder : 어떤 목록 레이아웃(껍데기)을 만들 것인지 반환(어떤 뷰를 생성 할 것인가)
• onBindViewHolder : 생성된 뷰(껍데기)에 무슨 데이터를 넣을 것인가
• getItemCount() : 몇 개의 목록을 만들지를 반환
• Holder클래스(ViewHolder) : 목록의 개별 항목 레이아웃을 포함하는 View 래퍼로, 각 목록 레이아웃에 필요한 기능들을 구현 하는 공간. ex) 아이템 레이아웃에 버튼이 있는 경우 버튼 리스너는 Holder 클래스에서 구현

package com.blacklog.recyclerview

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.blacklog.recyclerview.databinding.ItemRecyclerBinding

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

    var listData = mutableListOf<Member>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemRecyclerBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }

    override fun onBindViewHolder(holder: Holder, position: Int) {
        val member = listData[position]
        holder.setData(member)
    }

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

class Holder(val binding: ItemRecyclerBinding) : RecyclerView.ViewHolder(binding.root){
    fun setData(member: Member){
        binding.textView.text = member.name
    }
}

 

MainActivity에서 RecyclerView와 MyAdapter연결

앞서 생성한 아답터 클래스와 RecyclerView를 연결하는 코드는 MainActivity.kt 에서 아래와 같이 작성하였습니다. 아래 코드에서는 간단히 코드 내의 data:mutableList<Member> 배열에서 RecyclerView에 연결하였습니다. 

package com.blacklog.recyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import com.blacklog.recyclerview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    // ViewBinding
    private lateinit var binding : ActivityMainBinding

    // RecyclerView 가 불러올 목록
    private val data:MutableList<Member> = mutableListOf()
    var i = 4

    override fun onCreate(savedInstanceState: Bundle?) {
        // ViewBinding
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        initialize() // data 값 초기화
        refreshRecyclerView() // recyclerView 데이터 바인딩

        // FAB 을 누르면 Member + 숫자의 문자열이 data 배열에 추가됨
        binding.fab.setOnClickListener {
            val string = "Member$i"
            i++
            data.add(Member(string))
            refreshRecyclerView()
        }
    }

    private fun initialize(){
        with(data){
            add(Member("Member1"))
            add(Member("Member2"))
            add(Member("Member3"))
        }
    }

    private fun refreshRecyclerView(){
        val adapter = MyAdapter()
        adapter.listData = data
        binding.recyclerView.adapter = adapter
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
    }
}

📌 21.04.10 추가

리사이클러뷰를 새로고침하기 위해 위의 코드에서 refreshRecyclerView() 메서드를 만들고 recyclerView만드는 코드를 입력 했었지만, 리사이클러뷰를 새로고침하기 위해 간단히 adapter.notifyDataSetChange() 만 호출하면 된다. 이렇게 사용하기 위해서 adapter를 클래스의 전역변수로 두고, RecyclerView를 만드는 코드는 onCreate에 만든 후 새로고침이 필요한 부분에서 adapter.notifyDataSetChange() 코드를 입력하면 된다. 실제 사용은 아래의 링크를 참고

🤞 안드로이드 코틀린 : RecyclerView Item 버튼 이벤트 추가하기

 

실행 결과

위 코드를 작성 후 실행하면 아래와 같이, 어플 실행시 RecyclerView에 Member1 ~ Member3 목록이 생기고, FAB 버튼을 누르면 Member4 부터 하나씩 데이터가 늘어납니다.

실행 화면

요약

저는 RecyclerView를 만들기 위해 아래와 같은 순서로 진행하였습니다.

• 어떤 디자인형태(Item Layout)의 목록을 만들 건지 정하기
• 디자인형태에 맞는 RecyclerView_Item 레이아웃 코드 작성
• 디자인 형태에 맞는 Data Class 만들기
• Custom Recycler Adapter 클래스 만들기
  • View Holder 만들기
• MainActivity와 연결 하기

끝까지 읽어 주셔서 감사합니다.^^

관련포스트

🤞 안드로이드(코틀린) 앱 제작하기 관련글 목록 보기

🤞 안드로이드(코틀린) 리사이클러뷰 관련글 목록 보기

🤞 안드로이드(코틀린) 목록만들기 관련글 목록 보기