【Kotlin基礎】RecyclerViewで項目を一覧表示させる方法を解説

dependencies {
   (省略)
   implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

data class Animal(
   val name: String,
   val age: Int,
   val imageId: Int
)

class CustomAdapter(private val animalList: ArrayList<Animal>): RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

   // Viewの初期化
   class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
       val image: ImageView
       val name: TextView
       val age: TextView

       init {
           image = view.findViewById(R.id.image)
           name = view.findViewById(R.id.name)
           age = view.findViewById(R.id.age)
       }
   }

   // レイアウトの設定
   override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
       val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.list_item, viewGroup, false)
       return ViewHolder(view)
   }

   // Viewの設定
   override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
       val animal = animalList[position]

       viewHolder.image.setImageResource(animal.imageId)
       viewHolder.name.text = animal.name
       viewHolder.age.text = animal.age.toString()
   }

   // 表示数を返す
   override fun getItemCount() = animalList.size
}

<?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="wrap_content"
   android:padding="12dp">

   <ImageView
       android:id="@+id/image"
       android:layout_width="60dp"
       android:layout_height="match_parent" />

   <LinearLayout
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:orientation="vertical"
       android:layout_marginStart="16dp">

       <TextView
           android:id="@+id/name"
           android:textColor="#000000"
           android:textSize="18sp"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginBottom="4dp" />

       <TextView
           android:id="@+id/age"
           android:textColor="#000000"
           android:textSize="18sp"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   </LinearLayout>
</LinearLayout>

class MainActivity : AppCompatActivity() {

   lateinit var mAdapter: CustomAdapter
   lateinit var mAnimalList: ArrayList<Animal>

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

       // データの作成
       val dog = Animal("イヌ", 3, R.drawable.dog)
       val cat = Animal("ネコ", 2, R.drawable.cat)
       val elephant = Animal("ゾウ", 10, R.drawable.elephant)
       val horse = Animal("ウマ", 4, R.drawable.horse)
       val lion = Animal("ライオン", 6, R.drawable.lion)
       mAnimalList = arrayListOf(dog, cat, elephant, horse, lion)

       // RecyclerViewの取得
       val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)

       // LayoutManagerの設定
       recyclerView.layoutManager = LinearLayoutManager(this)

       // CustomAdapterの生成と設定
       mAdapter = CustomAdapter(mAnimalList)
       recyclerView.adapter = mAdapter
   }
}

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

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
</LinearLayout>

val layoutManager = LinearLayoutManager(this)
layoutManager.orientation = LinearLayoutManager.HORIZONTAL
recyclerView.layoutManager = layoutManager

// インターフェースの実装
interface AddAnimalListener {
   fun buttonTapped(animal: Animal)
}

class CustomAdapter(private val animalList: ArrayList<Animal>, private val listener: AddAnimalListener): RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

   class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
       (省略)
       val button: Button

       init {
           (省略)
           button = view.findViewById(R.id.button)
       }
   }

   (省略)

   override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
       (省略)

       // ボタンタップ時に、インターフェースのbuttonTappedメソッドを呼ぶ
       viewHolder.button.setOnClickListener {
           listener.buttonTapped(animal)
       }
   }

   (省略)
}

<?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="wrap_content"
   android:padding="12dp">

   (省略)

   <Button
       android:id="@+id/button"
       android:text="追加"
       android:layout_width="60dp"
       android:layout_height="wrap_content" />
</LinearLayout>

class MainActivity : AppCompatActivity(), AddAnimalListener {
   (省略)

   override fun onCreate(savedInstanceState: Bundle?) {
       (省略)

       mAdapter = CustomAdapter(mAnimalList, this)
       recyclerView.adapter = mAdapter
   }

   // 追加ボタンタップ時に呼ばれる
   override fun buttonTapped(animal: Animal) {
       // リストにタップされた動物を追加
       mAnimalList.add(animal)
       // リストの再読み込み
       mAdapter.notifyDataSetChanged()
   }
}