Android開発RecyclerViewの使い方について

Question

げんざいKotlin勉強中のものです。RecycViewを使いこなそうと勉強しているのですが、まだ構造が理解し切れていません。

僕の理想は下の写真のように画面に要素がいっぱい出て欲しいのです

ですが現状はエミュレータを開くとこうなります。

どうなっているのかと言いますとこれは写真で見やすくするため少しずらしていますが、なぜか１つの要素が画面いっぱいになっています

この要素一つの高さを文字列の高さと同じ程度にしたいのですがかないません。

どなたか詳しい方コードを訂正して教えていただけると助かります＞＜

下に今回使ったコードを載せておきます。

よろしくお願いします！

package com.example.recyclerview

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
//        リサイクラーViewに設定していく。まずはrecyclervireをonCreateに引っ張ってくる。
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
//        アダプターがクラスのままなので、インスタンス化する
        val adapter = MyAdapter()
//        リサイクラーViewを作るにあたって必要なレイアウトマネージャー(どういう並べ方にするかを指定する)
//        コンストラクターの第一引数にcontextを入れる。contextはアクティビティの親クラスなのでthis
        recyclerView.layoutManager = LinearLayoutManager(this)
//        アダプターをリサイクラーに設定する。
        recyclerView.adapter = adapter

//        要素がまだセットされていないので要素をセットする
//        mutableListOfで変更可能なリストが作れる
        val textList = mutableListOf<String>()
        for (i in 0..100) {
            textList.add("要素$i")
        }
        adapter.textlist = textList
//        アダプターの中身を変えた時はお約束でこれを呼ぶ。呼ばないとリサイクラーViewに表示されているリスト内容が更新されない
        adapter.notifyDataSetChanged()
    }
}

private class MyAdapter : RecyclerView.Adapter<MyViewHolder>() {
//    リストの中に入れるものをこのクラスの中に保持する必要があるので作成初期値は空にしたいのでemptyList()にする。
    var textlist: List<String> = emptyList()

//    一行一行のレイアウト
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
//    xmlでデザインされたものをViewに変換する。inflaterを作成する
//    contextはViewGroupが持っている
    val inflater = LayoutInflater.from(parent.context)

//    inflaterを使ってxmlをViewに変換する
//    2つ目の引数はレイアウトの親Viewにあたるインスタンスを指定する。(お作法でparent)
//    3つめは今回falseを入れる(詳しい説明はなし)
    val view = inflater.inflate(R.layout.activity_main, parent, false)

//    viewは作ったがこのメソッドはviewではなくviewholderを返して欲しい
//    なのでしたのMyViewHolderを使ってviewholderを作成する
        return MyViewHolder(view)
    }

//    viewにデータを設定するためのメソッド
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.textView.text = textlist[position]
//        itemViewをするとtextViewの親viewを参照することができる
        holder.itemView.setBackgroundColor(
            if (position % 2 == 0) {
                Color.WHITE
            } else {
                Color.LTGRAY
            }
        )
    }

//    リストの総数はいくつ必要か
    override fun getItemCount(): Int {
//    これでListの中身の総数を設定できる
        return textlist.size
    }

}

private class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val textView = itemView.findViewById<TextView>(R.id.textView)
}

ここからレイアウトのコード

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

画面全体を表す activity_main.xml の中に、RecyclerView の表示内容である TextView が入ってますが、activity_main.xml は一つだけ生成すればいいのに対して、RecyclerView の表示内容は複数 (一度に表示する分) 生成する必要があるため、レイアウトファイルを分ける必要があります。

まず、activity_main.xml から TextView を削除しましょう。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

次に、新しいレイアウトファイル (とりあえず recycler_item.xml とする) を作って、TextView を貼り付けます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

最後に、MyAdapter クラスの onCreateViewHolder メソッドのレイアウトリソース ID を変更します。

        // inflaterを使ってrecycler_item.xmlからViewを生成する
        // 2つ目の引数はレイアウトの親Viewにあたるインスタンスを指定する。(parentを指定することで、
        //     parentのクラス(この場合はRecyclerView)に応じた適切なレイアウト情報がセットされる)
        // 3つめは今回falseを入れる(trueなら生成と同時にparentに追加されるが、
        //     RecyclerViewではRecyclerViewが追加のタイミングを管理するので、falseにすること)
        val view = inflater.inflate(R.layout.recycler_item, parent, false)

あと、余計なお世話ですが、コメントの // のインデントは、このようにコメント対象のコードに合わせるのが一般的かと。

Comments

[mokimokio]

本当に助かりました！！無事に思っている内容にすることができました！
この疑問で2日間何も進まない戦いがあったので、、、。

コメントについても教えていただいてありがとうございます！何も知らなかったので。訂正していきます！