【Android App with Kotlin #5】RecyclerViewを使う

RecyclerViewを一番シンプルかつ実践的な機能で使いました。

作るもの

ImageViewとTextViewがリスト表示され、 タップするとTOASTが通知されるシンプルなものです。

環境

このコードは以下の環境で書いています。

• macOS 10.14.2(Mojave)
• Android Studio 3.3 前回の記事からバージョンップしました
• Android SDK 28
• gradle 4.6

事前準備

特にありません。

レイアウトファイル

activity_recycler.xml

ここにはRecyclerViewのみ置かれます。 RecyclerViewの中身は別のレイアウトファイルで定義します。

html: title=activity_reciycler.xml
1<?xml version="1.0" encoding="utf-8"?>
2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3                                             xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
4                                             android:layout_height="match_parent">
5
6    <android.support.v7.widget.RecyclerView
7            android:id="@+id/rvAvaterList"
8            android:layout_width="match_parent"
9            android:layout_height="match_parent"
10            android:layout_marginTop="8dp"
11            android:layout_marginStart="8dp"
12            android:layout_marginEnd="8dp"
13            android:layout_marginBottom="8dp"
14            app:layout_constraintTop_toTopOf="parent"
15            app:layout_constraintStart_toStartOf="parent"
16            app:layout_constraintEnd_toEndOf="parent"
17            app:layout_constraintBottom_toBottomOf="parent"/>
18</android.support.constraint.ConstraintLayout>
19

item_profile.xml

ファイル名はそれっぽい適当な名前です。 RecyclerViewの１要素を表すレイアウトファイルです。 最上位のレイアウト（この場合はConstraintLayout)のheightは wrap_contentもしくは固定値にしないと、１要素が１ページ分のサイズになります。

html: title=item_profile.xml
1<?xml version="1.0" encoding="utf-8"?>
2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3                                             xmlns:app="http://schemas.android.com/apk/res-auto"
4                                             xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
5                                             android:layout_height="wrap_content">
6
7    <LinearLayout
8            android:orientation="horizontal"
9            android:layout_width="match_parent"
10            android:layout_height="wrap_content"
11            app:layout_constraintTop_toTopOf="parent"
12            app:layout_constraintStart_toStartOf="parent"
13            app:layout_constraintEnd_toEndOf="parent">
14        <ImageView
15                android:id="@+id/ivAvater"
16                android:layout_width="wrap_content"
17                android:layout_height="wrap_content"
18                android:layout_marginStart="8dp"
19                android:layout_marginTop="8dp"
20                tools:srcCompat="@mipmap/ic_launcher"
21                app:layout_constraintStart_toStartOf="parent"
22                app:layout_constraintTop_toTopOf="parent"/>
23        <TextView
24                android:id="@+id/tvAvtName"
25                android:layout_width="wrap_content"
26                android:layout_height="26dp"
27                android:layout_marginTop="8dp"
28                android:layout_marginStart="8dp"
29                android:layout_marginEnd="8dp"
30                app:layout_constraintTop_toTopOf="parent"
31                app:layout_constraintStart_toEndOf="@+id/ivAvater"
32                app:layout_constraintEnd_toEndOf="parent"
33                tools:text="@tools:sample/full_names"/>
34    </LinearLayout>
35</android.support.constraint.ConstraintLayout>
36

ViewHolder

AvaterViewHolder.kt

item_profileで定義したレイアウト内のウィジェットを 後述のAdapterから利用出来る様に宣言しておくファイルになります。 また、インターフェースを用意してありますが、 これはタップした際の動作を定義出来るようにしておく受け口になります。 RecyclerViewの１要素をクラス化しているイメージで捉えています。

Java: title=AvaterViewHolder.kt
1class AvaterViewHolder(view: View): RecyclerView.ViewHolder(view) {
2
3    val ivAvater: ImageView = view.findViewById(R.id.ivAvater)
4    val tvAvtName: TextView = view.findViewById(R.id.tvAvtName)
5
6    /*
7    処理を持たないメソッド（インターフェース）を用意する事で
8    AdapterやActivityで処理が実装出来るようになる
9    */
10    interface ItemInterface{
11        fun onClickItem(position: Int)
12    }
13}
14

Adapter

AvaterAdapter.kt

Activityによって生成(インスタンス化)されます。 RecyclerViewの要素数分、行データを読み取り、 ViewHolderとレイアウトファイルを紐づけます。

Java: title=AvaterAdapter.kt
1class AvaterAdapter(
2        private val avtList:List<String>, 
3        private val ItemListener:AvaterViewHolder.ItemInterface
4        ): RecyclerView.Adapter<RecyclerView.ViewHolder>(){
5
6    override fun getItemCount(): Int{
7        return avtList.size
8    }
9
10    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
11
12        val layoutInflater = LayoutInflater.from(parent.context)
13        val view: View =  layoutInflater.inflate(R.layout.item_profile, parent, false)
14
15        return AvaterViewHolder(view)
16    }
17
18    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
19        val myHolder:AvaterViewHolder = holder as AvaterViewHolder
20
21        myHolder.tvAvtName.text = avtList[position]
22        myHolder.ivAvater.setImageResource(R.mipmap.ic_launcher)
23
24        //テキストをクリックされた時の動作を新規にバインドさせる
25        myHolder.tvAvtName.setOnClickListener{
26            ItemListener.onClickItem(position)
27        }
28
29    }
30}
31

コードの説明に入ります。

Java
1class AvaterAdapter(
2        private val avtList:List<String>, 
3        private val ItemListener:AvaterViewHolder.ItemInterface
4        ): RecyclerView.Adapter<RecyclerView.ViewHolder>(){
5

第一引数ではActivityから受け取るリスト要素を、 第二引数では、AvaterViewHolder内に宣言したインターフェースをItemListenerという名前で待ちます。

Java
1   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
2
3        val layoutInflater = LayoutInflater.from(parent.context)
4        val view: View =  layoutInflater.inflate(R.layout.item_profile, parent, false)
5
6        return AvaterViewHolder(view)
7    }
8

Adapterに与えられたリスト要素（今回はavtList:List<String>)から１要素ずつ受け取り、 viewtypeに応じたRecyclerViewのレイアウトファイルを読み込みます。 最も、今回の場合は全部同じレイアウトのリストなので、viewtypeにかかわらず同じviewを読み込みます。

もし、複数種類のレイアウトファイルを使い分ける場合は、getItemViewTypeを使います。 position(要素の位置)に応じたviewtypeを返却するメソッドです。

サンプル

Java
1override fun getItemViewType(position:Int):Int{
2        val VIEW_T_HEADER:Int = 0
3        val VIEW_T_FOOTER:Int = 1
4        val VIEW_T_BODY:Int = 3
5        when(position){
6                //一番最初の要素の場合
7                0 -> {
8                        return VIEW_T_HEADER
9                }
10                //リスト要素と同じサイズ + 1 = 最終行の場合
11                avtList.size + 1 -> {
12                        return VIEW_T_FOOTER
13                }
14                else -> {
15                        return VIEW_T_BODY
16                }
17        }
18}
19

Java
1  override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
2        val myHolder:AvaterViewHolder = holder as AvaterViewHolder
3
4        myHolder.tvAvtName.text = avtList[position]
5        myHolder.ivAvater.setImageResource(R.mipmap.ic_launcher)
6
7        //テキストをクリックされた時の動作を新規にバインドさせる
8        myHolder.tvAvtName.setOnClickListener{
9            ItemListener.onClickItem(position)
10        }
11
12    }
13
14

要素毎にテキストや画像をバインド（割り当て）しています。 ここで、setOnCLickListener等のメソッドも普通のウィジェット同様に使えるので、 インターフェースItemListenerが持つメソッドonClickItemを実行させます。（AvaterViewHolderで用意しましたね）

Activity

RecyclerActivity.kt

Adapterに比べればここは宣言するだけなので非常にシンプルです。

Java: title=RecyclerActivity.kt
1class RecyclerActivity: AppCompatActivity(), AvaterViewHolder.ItemInterface {
2
3    val avtList: List<String> = listOf("John","Pawl","Amanda")
4
5    override fun onCreate(savedInstanceState: Bundle?){
6        super.onCreate(savedInstanceState)
7        setContentView(R.layout.activity_recycler)
8
9        rvAvaterList.layoutManager = LinearLayoutManager(this)
10        rvAvaterList.adapter = AvaterAdapter(avtList, this)
11    }
12
13    override fun onClickItem(position: Int) {
14        Toast.makeText(this, "Item Positon:" + position + ", Item:" + avtList[position], Toast.LENGTH_SHORT).show()
15    }
16}
17

Java
1rvAvaterList.layoutManager = LinearLayoutManager(this)
2

activirty_recycler.xmlで用意したRecyclerViewのウィジェットをIDから使用しています。 layoutManagerというものを定義しています。 LinearLayoutManagerと、GridLayoutManagerの２種類があります。 前者はListViewのような１行形式のレイアウトで、 後者は縦横の格子状に要素を持つ事が出来るレイアウトです。 今回は前者を使います。

Java
1rvAvaterList.adapter = AvaterAdapter(avtList, this)
2

先程までで作成したAdapterをこのRecyclerViewに割り当てています。 １つ目の引数では、このアクティビティクラスのメンバ変数として宣言しているavtListを、 ２つ目の引数ではアクティビティクラスの戻り値として持つAvaterViewHolderを割り当てています。 （この辺のつながりが自分でもまだよくわかっていません。わかる方いたらコメントやDMで教えてください。)

長くなりましたが、ここまでで一旦、シンプルなRecyclerViewを 扱う事が出来たかと思います。

リンク

次の記事

前回の記事

【Android App with Kotlin #4】ListViewを使う(2)

/以上