개요

올해부터 사회인이 되어 Android 엔지니어로서 일하게 되었습니다. 안드로이드 개발 경험은 전혀 없고, 회사의 선배 쪽에 정중하게 가르쳐 주었던 것을 잊지 않는 사이에 정리해 가고 싶습니다. 이번에는 Todo 앱과 같은 것을 만들고 싶다고 생각하고, 그 때문에 RecyclerView를 사용하여 구현해 나갈 것입니다.

목표

TodoMVC 과 같은 Todo 앱을 목표로 만들어갑니다. 이번에는 아래 이미지와 같이 임의의 목록을 표시해 보겠습니다.

환경

Android Studio 3.6.2

Kotlin 1.3.71

작성 절차

이전 준비

RecyclerView와 CardView를 사용하려면 build.gradle에 다음 두 문장을 작성하십시오. 이전에는 v7 서포트 라이브러리를 추가하고 있었던 것 같다( RecyclerView로 목록 만들기 ). 기사가 오래된 것이 많았습니까? 그래서 그쪽을 추가하고 있는 것뿐이었다.

build.gradle

dependencies {
    // 省略
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

구현

레이아웃 만들기

새 프로젝트를 만들고 activity_main.xml에 RecyclerView를 추가합니다. 먼저 작성한 Hello World의 텍스트를 삭제하십시오.

activity_main.xml

<?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/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

그런 다음 RecyclerView를 사용하여 표시할 목록의 새 레이아웃을 만듭니다.

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    card_view:cardElevation="10dp"
    android:foreground="?android:attr/selectableItemBackground">

    <LinearLayout
        android:id="@+id/LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/sampleImg"
            android:contentDescription="@string/recycler_picture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/sampleTxt"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/text_view"
            android:textSize="30sp" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

MainActivity 정의

특별히 설명하지는 않습니다만. 코멘트 아웃에 기재한대로입니다.

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

        // create dummy data
        val dummyData = Array<String>(10) {i -> "dummy$i"}

        // use a linear layout manager
        my_recycler_view.layoutManager = LinearLayoutManager(this)

        // set adapter
        my_recycler_view.adapter = RecyclerAdapter(dummyData)

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        my_recycler_view.setHasFixedSize(true)
    }
}

어댑터 작성

모든 데이터를 목록에 표시하려면 RecyclerView.Adapter 클래스를 확장해야 합니다. Adapterh는 RecyclerView와 실제 데이터를 연결하여 최적의 타이밍으로 ViewHolder 객체를 생성하고 표시 내용을 바꿉니다. ViewHolder는 RecyclerView의 각 요소를 그리는 View를 보유합니다.

RecyclerAdapter.kt

class RecyclerAdapter(var todos: Array<String>) : RecyclerView.Adapter<RecyclerAdapter.RecyclerViewHolder>(){

    class RecyclerViewHolder(val view: View): RecyclerView.ViewHolder(view) {
        val sampleImg = view.sampleImg
        val sampleTxt = view.sampleTxt
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        val item = layoutInflater.inflate(R.layout.recyclerview_item, parent, false)
        return RecyclerViewHolder(item)
    }

    override fun getItemCount(): Int = todos.size

    override fun onBindViewHolder(holder: RecyclerViewHolder, position: Int) {
        holder.view.let{
            it.sampleImg.setImageResource(R.mipmap.ic_launcher_round)
            it.sampleTxt.text = todos[position]
        }
    }
}

결과

요약

Android 초학자가 처음 RecyclerView를 사용해 보았습니다. 압도적으로 지식이 부족하기 때문에 올바르게 구현할 수 있는지는 모릅니다 (땀).
RecyclerView는 앞으로 많은 장면에서 사용해 나갈 것이라고 생각하기 때문에 빨리 습득하고 싶습니다. 다음 기사에서 가로 스 와이프로 목록을 지우는 기능을 추가하고 싶습니다. 공식의 RecyclerView로 목록 만들기 가 매우 참고가 되었으므로 깊은 것까지 알고 싶은 사람은 꼭 참고해 보세요.