【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の中身は別のレイアウトファイルで定義します。

item_profile.xml

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

ViewHolder

AvaterViewHolder.kt

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

Adapter

AvaterAdapter.kt

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

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

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

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

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

サンプル

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

Activity

RecyclerActivity.kt

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

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

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

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

リンク

次の記事

前回の記事

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

/以上

【Android App with Kotlin #5】RecyclerViewを使う」への1件のフィードバック

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください