RecyclerView でカスタマイズしたリストを表示したい

Question

前提・実現したいこと

RecycerView にタイトル + サブタイトルのように複数要素を表示させたいのですが、やり方がわからなかった。
たとえば、以下のような二行あるリストをイメージしてます。

---
タイトル
説明を書きます。
---
タイトル
説明を書きます。
---

※実際は、４つほどの要素をリストに入れたいと考えています。

発生している問題・エラーメッセージ

現在、一つの要素を表示する、はできています。以下が自分で忘備録として書いたものです。動作確認済みです。
https://qiita.com/aki_design_1988/items/42efa57aa4d83d3aa850

以下の記事は画像+テキスト二つで構成されていました。参考に読んだのですが、具体的なイメージがあまりできませんでした。
https://qiita.com/saiki-ii/items/78ed73134784f3e5db7e

該当のソースコード

RecyclerViewActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_recycle_view.*

class RecycleViewActivity : AppCompatActivity() {

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

        var itemList = arrayListOf<String>("item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item")
        item_list.layoutManager = LinearLayoutManager(this)
        item_list.adapter = itemListAdapter(itemList)
    }
}

itemListAdapter.kt

import android.view.ViewGroup
import android.view.LayoutInflater
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class itemListAdapter(private val myDataset: ArrayList<String>) :
    RecyclerView.Adapter<itemListAdapter.ViewHolder>() {

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

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

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

    override fun getItemCount() = myDataset.size
}

リスト表示する xml は作成できています。

あとは、

• 複数要素をもった配列を用意する
• Adapter で、データとUIをひもづける

が必要な認識なのですが、具体的なやり方がわからず、という状況です。

補足情報

初心者のため、解決するに当たって必要な情報も理解しておりません。
回答に必要な情報がある場合、教えていただけますと幸いです。
どうぞよろしくお願いします..!

Answer 1

1.まず、一行ごとに表示したい情報(例えばtitleとdetail)を保持できるクラス(ここではPairを使ってますが自作してもらっても構いません。)のリストを用意します。

        var itemList = arrayListOf<Pair<String,String>>(Pair("item","detail"),Pair("item","detail"),Pair("item","detail"),Pair("item","detail"))

2.二つの情報を表示するのにTextViewが二つあったほうが嬉しいので、listlayout.xmlをTextView単体ではなく、LinearLayoutなどのViewGroupにし、二つのTextViewを内部に保持します。
その際、二つのTextViewを識別できるようにidを設定しておきます。

<!--listlayout.xml-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <TextView
            <!--idを設定して識別-->
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:padding="20dp"
            android:text="item"/>
    <TextView
            <!--idを設定して識別-->
            android:id="@+id/detail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:padding="20dp"
            android:text="detail"/>

</LinearLayout>

3.myDatasetの型を変更し、viewHolderもLinearLayoutと、その中のTextViewを保持できるように変更します。

class itemListAdapter(private val myDataset: ArrayList<Pair<String,String>/*String*/>) :
    RecyclerView.Adapter<itemListAdapter.ViewHolder>() {

    class ViewHolder(val linearLayout:LinearLayout/*val textView: TextView*/) : RecyclerView.ViewHolder(linearLayout/*textView*/){
        //findViewで二つのTextViewをプロパティとして保持
        val titleTextView = linearLayout.findViewById<TextView>(R.id.title)
        val detailTextView = linearLayout.findViewById<TextView>(R.id.detail)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): itemListAdapter.ViewHolder {
        val linearLayout/*textView*/ = LayoutInflater.from(parent.context)
            .inflate(R.layout.listlayout, parent, false) as LinearLayout/*TextView*/
        return ViewHolder(linearLayout)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        //holder.textView.text = myDataset[position]
        //二つのTextViewのテキストを変更
        holder.titleTextView.text = myDataset[position].first
        holder.detailTextView.text = myDataset[position].second
    }

    override fun getItemCount() = myDataset.size
}

これで今度こそ、、、

Comments

[Aki_1988]

なるほど！理解できました！

丁寧にご説明いただきありがとうございました！

[shal0ne]

解決できてよかったです、

Answer 2

• 複数要素をもった配列を用意する

というのは

        var itemList = arrayListOf<String>("item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item")

のところで用意できていますので、おそらく

• Adapter で、データとUIをひもづける

が終わっていない状況だと思います。

で、このコードですがAndroidStudioに貼り付けるとitem_listの部分が赤くなり、コードが動かないと思うのですが、、、

おそらくこのコードの元データにはその上部に

val item_list = findViewById<RecyclerView>(R.id.recyclerViewId)

というのがあって、逆にこれがないとコードが動きません。

非常に紛らわしいので、上記コードを補完した上でitem_listの部分をrecyclerViewに置き換えて軽く説明すると、

        var itemList = arrayListOf<String>("item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item","item")
        //ここに上記のRecyclerViewのインスタンスを用意
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerViewId)
        //RecyclerViewの中に、RecyclerViewを制御する人を配置
        recyclerView.layoutManager = LinearLayoutManager(this)
        //RecyclerViewの中に、itemListをRecyclerViewに供給する人(itemListAdapter)を配置
        recyclerView.adapter = itemListAdapter(itemList)

これでおそらく動くと思われます。(ダメだったら言ってください)

おそらく私と同じAndroid初心者だと思うのですが、初学の場合はこういったサイトは避けたほうがいいです。
ある程度相手が習熟していることを想定して書かれていますので、今回のように(recyclerViewのインスタンスが必要だけど、そんなことは書かなくてもわかるよね)みたいなのがザラにあります。
私も書籍代数千円をケチって完全独学でネットで学習しましたが、膨大な時間を無駄にしました。
あとでどうしても解決できない問題が出てきて結局買いましたし、これなら数時間働く時間を増やして最初から買っておけばよかったと思っています。

ステマじゃないですが、下の参考書はある程度の知識を網羅していますので、おすすめです。
「基礎＆応用力をしっかり育成！ Androidアプリ開発の教科書 なんちゃって開発者にならないための実践ハンズオン」

あと、どうしてもお金をかけたくない場合は主張に反しますが、下記のサイトがおすすめです。
「nyan のアプリ開発」

Comments

[Aki_1988]

おぉ、すみません。。ひとつめの Qiita は自分でメモとして書いたものなんです。。
たぶん、id 指定が誤っているのかなと。Qiita に転機するときに、id を汎用的なものに変えたのですが、ミスしたみたいです。

そして、複数要素は複数のリストがある、ではなく、ひとつのリストに複数要素がある、でした。
わかりづらい文章でしたので、本文を書き直しました！

書籍は確かにですね。おすすめの書籍チェックしてみますね。

[Aki_1988]

ご指摘いただいた `val recyclerView = findViewById<RecyclerView>(R.id.recyclerViewId)` ですが、この部分は、ひとつめの Qiita のように、`xmlで指定したid.layoutManager = LinearLayoutManager(this)` でも指定することが、可能かと思われます。ぼくの環境では、動作しておりますので。念の為、補足になります。
（丁寧に回答くださって、ありがとうございます！）

[shal0ne]

すみません、見落としてましたしめっちゃ勘違いしてました。
一応別に回答アップしたので、それを元に解決できたらと思います。。。