RecyclerViewの基本的な使い方と動的にリストを作る方法【Androidアプリ開発】

RecyclerViewの基本的な使い方と動的にリストを作る方法を説明しています。

RecyclerViewとは?何ができるか

一覧形式のリストを動的に生成することが可能です。

読み込んだデータを初期値として表示したり、アプリ上で入力したデータを一覧に追加するといったことが出来ます。

この後に例として示すのは、入力したテキストを画面に反映していくものとなっています。

実装イメージ

実装に必要なファイル

RecyclerViewの実装にあたり、以下のファイルが必要となります。

  • Adapterクラス
    リストに表示するデータを画面上にバインドするためのクラス
  • Dataクラス
    リストに表示する項目を定義しておくクラス
  • リスト項目のレイアウトファイル
    リストに表示する一行ごとのレイアウト

実装例

レイアウト

activity_main.xml

メインアクティビティのレイアウトです。

上から順に以下のコンポーネントを配置します。

  • EditText
    リストへ追加するテキストを入力する
  • Button
    入力したテキストをリストに追加するトリガー
  • RecyclerView
    動的に生成するリスト
    ※heightに”match_parent”を指定すると、画面一杯覆ってしまうことがあります。コンポーネント同士が重ならないように調整しましょう。
メインレイアウト

row_item.xml

リスト項目のレイアウトで、すべての行において共通で使用されます。

今回はテキストを入力するだけなので、TextViewを配置します。他にも表示したい項目がある場合は、このレイアウトに追加していきます。

リストアイテムレイアウト

実装方法

PersonData.kt

リストに表示する項目を定義します。

data class PersonData(
    var name: String
)

CustomAdapter.kt

RecyclerView.Adapterを継承したカスタムクラスを作成、以下のメソッドを実装します。

インスタンス生成時に渡される”dataSet”を各メソッドで処理していく流れとなっています。

メソッドの役割について示します。

  • ViewHolder
    カスタムクラス内で参照する情報を定義しておく
  • onCreateViewHolder
    リスト項目(row_item.xml)のviewを生成
  • onBindViewHolder
    “dataSet”から取得される値をバインドする
  • getItemCount
    リストのサイズを取得する
class CustomAdapter(private val dataSet: MutableList<PersonData>) :
    RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    //カスタムクラス内で参照する情報を定義
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textViewName: TextView = view.findViewById(R.id.textViewName)
    }

    //リスト行に使用するレイアウトのviewを生成
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.row_item, viewGroup, false)

        return ViewHolder(view)
    }

    //画面内のコンポーネントにデータをバインド
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
        viewHolder.textViewName.text = dataSet[position].name
    }

    //リストサイズを取得
    override fun getItemCount() = dataSet.size

}

MainActivity.kt

アプリ起動時にリストを表示、ボタンによるデータの追加処理を実装しています。

private var personList: MutableList<PersonData> = ArrayList<PersonData>()

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

    //RecyclerViewコンポーネントの取得
    val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
    //LinearLayoutの取得
    val linearLayoutManager = LinearLayoutManager(this)
    //バインド用のadapterにリストを関連付け
    val adapter = CustomAdapter(personList)
    //RecyclerViewコンポーネントに設定
    recyclerView.layoutManager = linearLayoutManager
    recyclerView.adapter = adapter

    //画面更新用ボタン
    val buttonUpdate: Button = findViewById(R.id.buttonUpdate)
    buttonUpdate.setOnClickListener {
        //画面に入力したテキストを取得
        val editTextName: EditText = findViewById(R.id.editTextName)
        val data = PersonData(editTextName.text.toString())
        //adapterに設定したリストに追加
        personList.add(data)
        //リストへの追加を通知(画面更新)
        adapter.notifyItemInserted(personList.lastIndex)
    }
}

順番に説明していきます。

//LinearLayoutの取得
val linearLayoutManager = LinearLayoutManager(this)

LinearLayoutManagerはレイアウトを管理するためのクラスです。これをRecyclerViewコンポーネントに設定すると、自動で生成してくれます。

//バインド用のadapterにリストを関連付け
val adapter = CustomAdapter(personList)

作成しておいたCustomAdapterのインスタンスを生成します。引数には、画面上に表示するデータを指定します。

//RecyclerViewコンポーネントに設定
recyclerView.layoutManager = linearLayoutManager
recyclerView.adapter = adapter

これより前で生成した”LayoutManager”と”Adapter”をRecyclerViewコンポーネントに設定します。

ここまでで、画面上に表示する準備は出来ました。CustomAdapterのインスタンス生成時に指定した引数にデータを入れておけば、初期表示も行えます。

ここからは、動的にリストへ追加する方法です。

//画面更新用ボタン
val buttonUpdate: Button = findViewById(R.id.buttonUpdate)
buttonUpdate.setOnClickListener {
    //画面に入力したテキストを取得
    val editTextName: EditText = findViewById(R.id.editTextName)
    val data = PersonData(editTextName.text.toString())
    //adapterに設定したリストに追加
    personList.add(data)
    //リストへの追加を通知(画面更新)
    adapter.notifyItemInserted(personList.lastIndex)
}

テキストに入力した値をpersonList(バインドしたデータ)へ追加→notifyItemInsertedによる通知(画面更新)という流れです。

ここで大事なのは、この部分です。

//リストへの追加を通知(画面更新)
adapter.notifyItemInserted(personList.lastIndex)

テキストに入力した値をpersonList(バインドしたデータ)へ追加しただけでは画面の更新は行われません。通知を行うことで、画面の更新を自動で行ってくれるようになります。

今回の例では、末尾にデータを追加しているため、personList.lastIndexを引数として渡しています。これは、リストの最後にデータを追加したことを意味しています。リストの最初に追加する場合は”0”、途中に追加した場合は追加した位置を指定します。

リスト全体を更新する場合はnotifyDataSetChanged、リストから削除した場合はnotifyItemRemovedを使用します。

まとめ

RecyclerViewの基本的な使い方と動的にリストを作る方法を説明しました。

RecyclerViewを利用すると一覧形式での表示を行うことが可能で、行単位のレイアウトも自由にカスタマイズできます。

カスタムクラスを作成して実装する必要がありますが、単純なリストであれば示した実装例をテンプレートとして使用することが可能です。

リストを更新したら”notify~”メソッドを使用して、画面更新を行うことを忘れないようにしましょう。

参考

RecyclerView で動的リストを作成する|Android Developers

Androidアプリ開発
この記事を書いた人

エンジニアとして仕事をしています。
仕事や趣味を通して、開発やプログラミングについて学んだことを綴っていきます。
 ・実務経験は、WEBシステムのサーバーサイドコーディングがメイン
 ・アプリ開発は趣味程度

akihiro-takedaをフォローする
akihiro-takedaをフォローする
プログラミング・開発の備忘録
タイトルとURLをコピーしました