2020/10/28

[Kotlin de Android] RecyclerViewでリスト表示してみよう

RecycleView の最もシンプルな表示に仕方について解説していきます。
表示内容も文字列ひとつのみで、Androidが標準で用意しているレイアウトを使っていきます。
今回はリストが表示されるところまで見ていきたいと思います。

開発環境
 プロジェクトを作ろう
 画面を作ろう
 表示するデータを作ろう
 RecyclerViewを使うための設定しよう
 データを表示するためのアダプターを作ろう
 データを表示しよう
 区切り線を表示しよう
 項目をクリックできるようにしよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 4.1
JDK 1.8
Kotlin 1.4.10
macOS(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

まず最初から配置してある TextView は不要なので削除します。選択して Delete キーで OK です。

次に「Palette」の左側から「Containers」を選択して、右側から「RecyclerView」を選択して、画面の適当なところにドラッグ＆ドロップします。
以下のような状態になるかと思います。

まずは位置を調整してあげましょう。配置した RecycleView を選択して、ツールバーの「Align」ボタンから「Horizontally in Parent」と「Vertically in Parent」を選択します。

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

これで位置の調整ができたので、横画面にしたり、画面サイズを変えても RecycleView が画面いっぱいに表示されることを確認しておきましょう。

そうしたら、IDを付けてあげます。
「Attributes」の「ID」を「myRecycleView」にしておきます。

これで画面が完成です。以下のようになっていればOKです。

表示するデータを作ろう

早速 ListView を表示したいところですが、なにかしらのデータがないといけないでまずはデータを作っていきましょう。

といっても今回は一行表示するだけなので、文字列の配列を用意します。
スクロールするところが見たいので20個ほど用意してみます。

MainActivity.kt を開いてください。

onCreate() の最後に以下のように追加します。

val items = Array(20) { i -> "item-$i" }

1	val items = Array(20) { i -> "item-$i" }

これ一行だけです。

Array() とすると配列を作ってくれます。配列の中身のデータ型は生成するデータから推論してくれるので書かなくてもOKです。
引数は初期化したい数です。初期化する内容はクロージャーで書くのですが、i はカウンタなので 0 順に数値が入ってきて、 -> の後ろの処理を第一引数で指定した数分実行してくれます。
これだけで、item-0 から item-19 という文字列の配列を作ってくれます。便利！

なので、データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

myRecyclerView.apply {
    setHasFixedSize(true)
}

myRecyclerView.apply {

setHasFixedSize(true)

}

Kotlin Android Extensionsを使うようにしているので、myRecyclerViewというようにレイアウトエディタで設定したIDを変数名としてそのまま使うことができます。
apply{}としてそのなかに色々設定をしていきます。
（applyの説明は長くなるのでここでは省きます。解説してくれているサイトがたくさんあるので検索してみてください）

setHasFixedSize(true)とすると、RecyclerViewのサイズを固定してくれるのですが、それによりパフォーマンスが向上するらしいです。
とりあえずおまじない的に書いておけばよさそうです。

次にどういったレイアウトにするかを指定します。

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
}

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

}

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

val viewManager = LinearLayoutManager(this)
val viewAdapter = MyAdapter(items)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
    adapter = viewAdapter
}

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(items)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

}

RecyclerViewにデータを表示するためにはRecyclerView.Adapterを継承したアダプターを作る必要があります。
MyAdapterがそれにあたります。
MyAdapterはのちほど作っていくのでここではエラーになっていて正解です。

ListViewに比べると単純なデータを表示するだけでもアダプターが必要になってくるので少し面倒にも感じますが、カスタマイズ性はRecyclerViewのほうが高いですし、慣れるとアダプターの作成もそれほど大変ではないかなと思います。

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです（笑）

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

}

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示する文字列を格納したArrayを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。

以下のように書いてあげればOKです。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)
}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

}

ViewHolderはRecyclerView.ViewHolderを継承する必要があります。親クラスの引数にはViewを渡す必要がありますが、
今回はTextViewが一つだけあるレイアウトを使っていくのでこのように単純なものになっています。
レイアウトの中にViewが複数あるものだともう少し複雑になるのですが、今回はとにかくシンプルに！ということでこれだけにしておきます。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        TODO("Not yet implemented")
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        TODO("Not yet implemented")
    }

    override fun getItemCount(): Int {
        TODO("Not yet implemented")
    }

}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

TODO("Not yet implemented")

}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

TODO("Not yet implemented")

}

override fun getItemCount(): Int {

TODO("Not yet implemented")

}

では、各メソッドを実装していきます。

上から順にやっていきます（笑）

onCreateViewHolderはViewHolderを作成して、データを表示するために使うViewを設定します。
レイアウトファイルからViewを取得して、ViewHolderのインスタンスにして返してあげればOKです。

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
    return ViewHolder(textView)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView

return ViewHolder(textView)

}

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_1を使っています。
このファイルを見てもらうとわかるのですが、TextViewが一つあるだけのものです。なのでViewを取得してTextViewにキャストしてあげます。
そのtextViewを引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderはTextViewのみなので、このTextViewにitemsのデータをひとつずつ設定してあげる感じです。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

}

引数にViewHolderとリストの位置が渡されてくるので、items[position]としてあげれば対応するデータが取得できるのでそれをTextViewに設定するだけです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなります。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

override fun getItemCount(): Int {
    return items.size
}

override fun getItemCount(): Int {

return items.size

}

処理がreturnのみなので、以下のように短くこともできます。

override fun getItemCount(): Int  = items.size

1	override fun getItemCount(): Int = items.size

これでMyAdapterクラスが完成です。
MyAdapterクラスのソースはこんな感じになります。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
        return ViewHolder(textView)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items[position]
    }

    override fun getItemCount(): Int  = items.size
}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView

return ViewHolder(textView)

}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

}

override fun getItemCount(): Int = items.size

}

データを表示しよう

さぁデータを表示しましょう！
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行！

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

1	val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

DividerItemDecorationという区切り線用のクラスが用意されているのでそれを使います。
引数でLinearLayoutManager(this).orientationとすることでリスト表示の横線という感じになります。

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

addItemDecoration(dividerItemDecoration)

1	addItemDecoration(dividerItemDecoration)

最終的なonCreate()は以下のようになるかと思います。

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

    val items = Array(20) { i -> "item-$i" }

    val viewManager = LinearLayoutManager(this)
    val viewAdapter = MyAdapter(items)
    val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

    myRecyclerView.apply {
        setHasFixedSize(true)
        layoutManager = viewManager
        adapter = viewAdapter
        addItemDecoration(dividerItemDecoration)
    }
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val items = Array(20) { i -> "item-$i" }

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(items)

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

addItemDecoration(dividerItemDecoration)

}

ここまでできたら実行してみましょう。

区切り線も表示されました！

項目をクリックできるようにしよう

最後にリストの項目をクリックできるようにしてみます。
ListViewのときはsetOnItemClickListenerがありましたが、RecyclerViewにはないのでsetOnClickListenerを使って実装する必要があります。

MyAdapterのonBindViewHolder()で実装していきます。
今回は単純にクリックされた項目の文字列をToastで表示してみます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。
本当はListenerを作ったほうがいいのですが、今回は一番簡単なやり方にしています。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]

    holder.textView.setOnClickListener {
    }
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

holder.textView.setOnClickListener {

}

holder.textView.setOnClickListener のなかでToastを表示したいので、ActivtyのContextが必要となってくるので、MyAdapterの引数を増やしてContextを取得するようにします。

class MyAdapter(private val context: Context, private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

1	class MyAdapter(private val context: Context, private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

準備はできたのでToastを表示します。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]

    holder.textView.setOnClickListener {
        Toast.makeText(context, "Clicked ${items[position]}", Toast.LENGTH_SHORT).show()
    }
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

holder.textView.setOnClickListener {

Toast.makeText(context, "Clicked ${items[position]}", Toast.LENGTH_SHORT).show()

}

ここまでできたら早速実行！

適当な項目をクリックするとToastが表示されるようになりました！

クリック処理はListViewよりは面倒な気もしますが、View一つずつクリックできるようになるのでこれはこれで便利だと思いました。

さて、今回は一番シンプルなRecyclerViewの使い方を紹介しました。
ListViewに比べると少し複雑な気もしますが、色々とカスタマイズできるようなのでまた紹介できたらいいなと思います。（いつになるかな…💦）

どなたかの参考になってら嬉しいです♪

Name	アプリの名前を入力します
Package name	パッケージ名を入力します。パッケージ名とアプリ名で一意の名前になる必要があるので一般的には自分のドメインを逆から書いたものになります。公開する予定のない勉強用であればなんでもOKだと思います。例：com.example
Show loacation	プロジェクトの保存場所です。デフォルトの場所でもお好きなところでもOKです。
Language	開発言語を選択します。JavaかKotlinが選択できます。このブロクではすべてKotlinのプロジェクトを作成しているので、Kotlinを選択します。
Minimum API level	対象とするAPIを選択します。選択したAPI以上のものが対象となります。お好きなレベルを選択すればいいと思います。
use legacy android.support libraries	古いバージョンのサポートライブラリを使いたい場合にチェックを入れます。通常はチェックは入れなくていいかと思います。

[Kotlin de Android] RecyclerViewでリスト表示してみよう

目次

開発環境

プロジェクトを作ろう

画面を作ろう

表示するデータを作ろう

RecyclerViewを使うための設定しよう

データを表示するためのアダプターを作ろう

データを表示しよう

区切り線を表示しよう

項目をクリックできるようにしよう

[Kotlin de Android] Android Studio 4.1 でプロジェクトを作ろう

開発環境

プロジェクトを作ろう

Kotlin Android Extensionsを使えるようにしよう

最近の投稿