お勉強ダイアログ

プログラミングの勉強した内容を自分のために書き残してるだけです

AndroidのRecyclerViewについて(最初の最初)

RecyclerViewの使い方をまとめます。 公式ドキュメント

RecyclerView  |  Android Developers

Create a List with RecyclerView  |  Android Developers

ですが、英語なので日本語のもので下記を参考にしました。

【kotlin】RecyclerViewの簡単な使い方【初心者向け】

必要な部品

RecyclerViewを実装するのに必要な部品は

  • xml(RecyclerView)
  • xml(itemView)
  • Activity or Fragment
  • Adapter
  • dataModel
  • viewHolder

それぞれの役割と例

xml(RecyclerView)

そのまま、実際RecyclerViewを表示するxml

activity_main.xml

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


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>

xml(itemView)

RecyclerViewで表示する1つづつのアイテムのレイアウトのxml

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/row_title"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.3"
                tools:text="titleです" />

            <TextView
                android:id="@+id/row_detail"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.7"
                tools:text="詳細ですよ詳細ですよ詳細ですよ詳細ですよ詳細ですよ" />

        </LinearLayout>

    </LinearLayout>


</android.support.constraint.ConstraintLayout>

Activity or Fragment

RecyclerViewを表示するxmlに紐づく処理

MainActivity

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.LinearLayoutManager
import android.util.Log
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        Log.d("Life Cycle","onCreate")
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView = recycler_list
        val adapter = ViewAdapter(createDataList(), object : ViewAdapter.ListListener {
            override fun onClickRow(tappedView: View, rowModel: RowModel) {
                Toast.makeText(applicationContext, rowModel.title,Toast.LENGTH_LONG).show()
            }
        })

        recyclerView.setHasFixedSize(true)
        recyclerView.layoutManager = LinearLayoutManager(applicationContext)
        recyclerView.adapter = adapter
    }

    private fun createDataList(): List<RowModel> {
        Log.d("Life Cycle","createDataList")
        val dataList = mutableListOf<RowModel>()
        for (i in 0..49) {
            val data: RowModel = RowModel().also {
                it.title = "タイトル" + i + "だよ"
                it.detail = "詳細" + i + "個目だよ"
            }
            dataList.add(data)
        }
        return dataList
    }
}

Adapter

xmlxmlを紐づけて、itemにデータを代入する

ViewAdapter

import android.support.v7.widget.RecyclerView
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class ViewAdapter(private val list: List<RowModel>, private val listener: ListListener) : RecyclerView.Adapter<HomeViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HomeViewHolder {
        Log.d("Life Cycle", "onCreateViewHolder")
        val rowView: View = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)
        return HomeViewHolder(rowView)
    }

    override fun onBindViewHolder(holder: HomeViewHolder, position: Int) {
        Log.d("Life Cycle", "onBindViewHolder")
        holder.titleView.text = list[position].title
        holder.detailView.text = list[position].detail
        holder.itemView.setOnClickListener {
            listener.onClickRow(it, list[position])
        }
    }

    override fun getItemCount(): Int {
        Log.d("Life Cycle", "getItemCount")
        return list.size
    }

    interface ListListener {
        fun onClickRow(tappedView: View, rowModel: RowModel)
    }
}

dataModel

itemに入れるデータ

RawModel.kt

class RowModel {
    var title: String = ""
    var detail: String = ""
}

viewHolder

itemViewのそれぞれのViewのホルダー

ViewHolder.kt

import android.support.v7.widget.RecyclerView
import android.view.View
import android.widget.TextView

class HomeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){
    val titleView: TextView = itemView.findViewById(R.id.row_title)
    val detailView: TextView = itemView.findViewById(R.id.row_detail)
}

ついでに

リストを2列にしたい場合は、

recyclerView.layoutManager = LinearLayoutManager(applicationContext)

recyclerView.layoutManager = GridLayoutManager(applicationContext, 2)

にすればOK

おわりに

これで、ひとまずRecyclerViewは使える。 応用やもっと深いことなどを学習したら、またまとめる。

読みたいサイト