この記事ではKotlinを使ったRecyclerViewの実装方法を解説します。
初心者の方にもわかりやすくするためにサンプルコード付きで説明しています。
実装
全体のサンプルコード
こちらが全体のサンプルコードです。先に解説を確認したい方はこちらから読んでください。
package com.example.recyclerviewsample
import android.content.Intent
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class RecyclerviewAdapter : RecyclerView.Adapter<ViewHolderItem>(){
private val itemList = listOf<Long>(1,2,3,4,5)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderItem {
val oneXml = LayoutInflater.from(parent.context).inflate(R.layout.one_layout,parent,false)
return ViewHolderItem(oneXml)
}
override fun onBindViewHolder(holder: ViewHolderItem, position: Int) {
holder.oneTextView.text = itemList[position].toString()
}
override fun getItemCount(): Int {
return itemList.size
}
}package com.example.recyclerviewsample
import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class ViewHolderItem(v:View): RecyclerView.ViewHolder(v){
var oneTextView:TextView = v.findViewById(R.id.oneText)
}<?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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="6dp"
app:cardCornerRadius="2dp"
android:foreground="?android:attr/selectableItemBackground">
<TextView
android:id="@+id/oneText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="center"
android:text="1"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.cardview.widget.CardView>package com.example.recyclerviewsample
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
private lateinit var rv:RecyclerView
private lateinit var recyclerAdapter: RecyclerviewAdapter
private lateinit var layoutManager: RecyclerView.LayoutManager
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
rv = findViewById(R.id.rv)
}
override fun onStart() {
super.onStart()
recyclerAdapter = RecyclerviewAdapter()
rv.adapter = recyclerAdapter
layoutManager = LinearLayoutManager(this)
rv.layoutManager = layoutManager
}
}<?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/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>解説
ここからRecyclerViewの実装方法を詳しく解説していきます。
activity_main.xml
今回はactivity_mainには特にこだわらないのでRecyclerViewだけ設置しています。
one_layout.xml
layoutにone_layout.xmlを追加しましょう。
one_layout.xmlではRecyclerViewに表示する1行分のセルのレイアウトを定義します。
今回は見栄えのためにCardViewを使っていますが、デフォルトのConstraintLayoutのままでも構いません。
<androidx.cardview.widget.CardView
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="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="6dp"
app:cardCornerRadius="2dp"
android:foreground="?android:attr/selectableItemBackground">
…
</androidx.cardview.widget.CardView>番号を表示するために中央にTextViewを配置しています。
<TextView
android:id="@+id/oneText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="center"
android:text="1"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />ViewHolderItem
プロジェクトにViewHolderItemという名前のクラスファイルを追加してください。
ViewHolderItemではRecyclerViewに表示するセルの設定をします。
class ViewHolderItem(v:View): RecyclerView.ViewHolder(v){
var oneTextView:TextView = v.findViewById(R.id.oneText)
}RecyclerviewAdapter
プロジェクトにRecyclerviewAdapterという名前のクラスファイルを追加しましょう。
RecyclerviewAdapterではファイル名の通りRecyclerViewのAdapterを定義します。
今回RecyclerViewに配置する要素はlistに格納してある1~5までの数字にしています。
private val itemList = listOf<Long>(1,2,3,4,5)onCreateViewHolderではセルのレイアウトの読み込みとViewHolderItemとの紐づけをしています。
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderItem {
val oneXml = LayoutInflater.from(parent.context).inflate(R.layout.one_layout,parent,false)
return ViewHolderItem(oneXml)
}今回はonBindViewHolderではitemListの要素をセルに表示するようにします。
クリックされたときの挙動を指定する場合などもonBindViewHolderに記述します。
override fun onBindViewHolder(holder: ViewHolderItem, position: Int) {
holder.oneTextView.text = itemList[position].toString()
}getItemCountではRecyclerViewに表示するセルの数をカウントしています。
override fun getItemCount(): Int {
return itemList.size
}MainActivity
MainActivityでRecyclerViewのレイアウトの指定をしたりセルを表示できるようにしたりしています。
今回はonStart内に記述していますがonCreate内に記述しても大丈夫です。
MainActivity
override fun onStart() {
super.onStart()
recyclerAdapter = RecyclerviewAdapter()
rv.adapter = recyclerAdapter
layoutManager = LinearLayoutManager(this)
rv.layoutManager = layoutManager
}まとめ
今回はRecyclerViewの実装方法を解説しました。いかがだったでしょうか。
RecyclerViewは実装することが多くて大変ですがとても便利です。この記事を参考にして是非実装してみてください。
以下の記事ではRecyclerViewをクリックして画面遷移する方法を紹介しています。こちらも併せてお読みください。
コメント