Posted at

RecyclerViewの簡単なサンプル

ずっとListViewを使っていたのですが、いい加減RecyclerViewの使い方を覚えないといけないのかなと思いはじめてので、簡単なサンプルを書いてみました。


レイアウトの作成

まずはActivityのレイアウトを作ります。

とりあえずサンプルなのでRecyclerViewだけで。

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

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

</android.support.constraint.ConstraintLayout>

次にRecyclerViewに表示するリスト一行分のレイアウトです。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:layout_height="wrap_content">

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

</LinearLayout>


ViewHolderの作成

ViewHolderっていうのは各行のViewを保持しているクラスです。

ListViewでは毎回findViewByIdでTextViewなりを取得したりしていたわけですが、負荷を下げるために保持しておくのです。

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

val textView: TextView = itemView.findViewById(R.id.textView)
}


Adapter

Adapterを作ります。

役割はListViewのAdapterと似ています。


  • 各行のデータを持つ

  • 行のView(RecyclerViewではViewHolder)を作る

  • データをViewに設定する

ですね。

ListViewではBaseAdapterを継承していましたが、RecyclerViewではRecyclerView.Adapterを継承します。

class RecyclerAdapter(context: Context, val data: List<String>) : RecyclerView.Adapter<ViewHolder>() {

val inflater = LayoutInflater.from(context)

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
// ここでViewHolderを作る
return ViewHolder(inflater.inflate(R.layout.list_item, parent, false))
}

override fun getItemCount(): Int {
// データの要素数を返す
return data.size
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
// ViewHolderを通してデータをViewに設定する
holder.textView.text = data[position]
}
}


RecyclerViewの設定

LayoutManager

RecyclerViewではリストの表示方法を簡単に変えることができます。

そのときに使うのがLayoutManagerです。

まずは簡単なLinearLayoutManagerを使います。縦もしくは横方向のリスト表示です。

他にも例えばグリッド表示にしたいときはGridLayoutManagerを使えます。

上で作ったRecyclerAdapterに表示するdataを渡して、RecyclerViewのadapterに設定すれば表示できます。

​​

class MainActivity : AppCompatActivity() {

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

val data = listOf(
"Alice", "Bob", "Charlie", "Dave", "Eve", "Frank", "Grace", "Heidi", "Ivan", "Judy"
)

recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = RecyclerAdapter(this, data)
}
}


サンプルコード

https://github.com/tkt989/recycler-view-sample