ブログ

RecyclerView (RecyclerView.Adapter)

  • 投稿者:
  • 投稿カテゴリー:その他

概要

MainActivityのみ
データのレイアウトはカードビューに画像とテキストを表示
　(MaterialCardView,LinearLayout,ImageView,TextViewを使用)
データリソースはローカルに保存したテキストと画像の固定
パッケージとしてmodel, data, adapterに分割
　model:dataクラスとしてAffirmationを定義
　data:DatasourceクラスにListを返すメソッドを用意
　adpter:RecyclerView.Adapterクラスの子クラスItemAdapterを用意

サンプル

レイアウトxml

メイン画面(activity_main.xml)にRecyclerViewのみ

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layoutManager="LinearLayoutManager" />
</FrameLayout>

データレイアウト(list_item.xml)

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <ImageView
            android:id="@+id/item_image"
            android:layout_width="match_parent"
            android:layout_height="194dp"
            android:importantForAccessibility="no"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textAppearance="?attr/textAppearanceHeadline6" />

    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

modelパッケージ

Affirmation.kt：
1レコード分のデータの型を定義

// dataクラス
data class Affirmation (
    @StringRes val stringResourceId: Int,
    @DrawableRes val imageResourceId: Int
)

dataパッケージ

Datasource.kt：
RecyclerViewで表示するListデータを戻す

class Datasource {
    // Listデータを戻す
    // Listのデータ型はAffirmation(Dataクラス)
    // 通常はDBなどのリソースからデータを取得するが固定値を出力するサンプルデータ
    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

adapterパッケージ

ItemAdapter.kt：
RecyclerViewのアダプタを抽象クラスから生成する
抽象メソッド３つの実装する
引数はRecyclerViewを表示する画面と表示するデータ
ネストしたクラス(ItemViewHolder)でTextViewとImageViewを取得しデータセット時に使用

// RecyclerViewのアダプタを抽象クラスから生成する
// 引数はRecyclerViewを表示する画面と表示するデータ
class ItemAdapter(
    private val context: Context,
    private val dataset: List<Affirmation>
    ) : RecyclerView.Adapter<ItemAdapter.ItemViewHolder>() {

    // ビューホルダーのTextViewとImageViewを取得する
    // 個々のデータを表示するTextViewとimageView
    class ItemViewHolder(private val view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView = view.findViewById(R.id.item_title)
        val imageView: ImageView = view.findViewById(R.id.item_image)
    }

    // 抽象メソッド1
    override fun onCreateViewHolder(
        parent: ViewGroup , // RecyclerView
        viewType: Int       // RecyclerViewのビュータイプ(異なるViewTypeがある時に使用)
    ) : ItemViewHolder {
        // list_item.xmlからView(adapterLayout)を生成
        val adapterLayout = LayoutInflater.from(parent.context)
            .inflate(R.layout.list_item, parent, false)
        // ViewからItemViewHolderを返す
        return ItemViewHolder(adapterLayout)
    }

    // 抽象メソッド2
    override fun onBindViewHolder(
        holder: ItemViewHolder,
        position: Int) {
        // datasetのpositionからitemを設定する
        val item = dataset[position]
        // ViewHolderのテキストをitemデータから取得しセット
        holder.textView.text =  context.resources.getString(item.stringResourceId)
        // ViewHolderの画像をitemデータから取得しセット
        holder.imageView.setImageResource(item.imageResourceId)
    }

    // 抽象メソッド3
    override fun getItemCount() = dataset.size

}

リサイクラービューのアダプタをListAdapterとしたものはRecyclerView(ListAdapter) インターネットからJSONデータを取得し画像表示を参照

トレーニング > KOTLIN を用いた ANDROID の基本 > レイアウト > スクロール可能なリスト > カードを使用して画像の一覧を表示する > 4.回答コード

タグ: , , , , , ,