android Kotlin RecyclerViewの使い方

初投稿という事で、まずは私が初期で勉強していた事を載せていこうと思います！


# はじめに

まず、RecyclerViewとは何かと言いますと、簡単に説明するとリストを表示するためのViewです。
RecyclerView以外にも色々なリストを表示するためのViewがありますが、その代表格がRecyclerView
になります！


## 早速RecyclerViewのソースを書いてみる
では早速書き方を見ていきましょう！


```kotlin:activity_main.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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/RecyclerList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
```
ここではRecyclerViewを設置します。では次にいきましょう！

## 1行分のレイアウトを作成

RecyclerViewは対応するリストの数に合わせて動的にViewを作ります。
リストの1要素に対して１行分のViewという感じです。
早速1行分のレイアウトを作っていきましょう
`app/res/layout`の中に`item_recycler_list.xml` というファイルを作ります
作成が完了したらソースコートを記載していきます！
以下のソースコードは一例ですので参考程度で見てください。

```kotlin:item_recycler_list.xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="0dp">

        <TextView
            android:id="@+id/Text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textSize="30sp" />

    </LinearLayout>
</LinearLayout>
```

`android:padding="10dp"`の`padding`とは背景を含めた大きさとその中の文字を表しています。
詳しく確認したい場合は調べてみて下さい。


## ViewHolderとRecyclerView.Adapter

`RecylcerView`を表示するためにはこの`ViewHolder`と`RecyclerView.Adapter`が必須です。
ではこの2点を実装しながら説明していきます！

### ViewHolder
まずはクラス作成です！
クラス名「`ViewHolderList`」を作成します（クラス名は任意です）

```kotlin:ViewHolderList.kt

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class ViewHolderList (item: View) : RecyclerView.ViewHolder(item) {
    val characterList: TextView = item.findViewById(R.id.Text1)
}
```

この`ViewHolderList`クラスは１行分のレイアウトを保持しておくためのクラスです。

今回はキャラ名を表示したかったので`characterList`を保持しています。

### RecyclerView.Adapter
こちらのクラスではリストの要素と1行分のレイアウト（`ViewHolder`）を紐づける役をするクラスです。
クラス名「`RecyclerAdapter`」を作成します（クラス名は任意です）

```kotlin:RecyclerAdapter.kt
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class RecyclerAdapter(val list: List<String>) : RecyclerView.Adapter<ViewHolderList>() {
    override fun onCreateViewHolder(parent: ViewGroup , viewType: Int): ViewHolderList {
        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_recycler_list, parent, false)
        return ViewHolderList(itemView)
    }

    override fun onBindViewHolder(holder: ViewHolderList, position: Int) {
        holder.characterList.text = list[position]
    }

    override fun getItemCount(): Int = list.size
}
```

1つ1つ説明していきます！

まずコンストラクタにlistをもらっています。これはリストの要素と１行分のレイアウトを紐づけるためです。

各メソッドの説明

まずは`onCreateView`です
ここで１行分のレイアウトを生成してくれています。

次に`onBindViewHolder`
このメソッドでは`ViewHolder`を結ぶ役目を担っています。
この関数は引数に`holder`(1行分のレイアウト)と`position`(何行目か)というのを持っているので、リストの`position`を紐づけていきます。

最後に`getItemCount`です
これはリストのアイテムが何個あるかカウントし、その分だけレイアウトを作ってくれます


## MainActivity
最後に`MainActivity`の説明をしていきます！

```kotlin:MainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import org.w3c.dom.Text

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView

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

        val TextList = listOf(
            "マリオ",
            "ルイージ",
            "ピーチ",
            "クッパ",
            "デイジー",
            "ワリオ",
            "ワルイージ",
            "ヘイホー"
        )

        recyclerView = findViewById(R.id.RecyclerList)
        recyclerView.adapter = RecyclerAdapter(TextList)
        recyclerView.layoutManager = LinearLayoutManager(this)
    }
}
```
はじめに表示したいリストを生成します。

そしてRecyclerViewの`id`を使って`Activity`側に認識させます。
次に`recylcerView`に`adapter`をセットします。
最後に`layoutManager`をセットします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704865/e0759eb7-35a1-4056-3ea6-9ccefd5e8a10.png" width=25%>

以上のソースコードを記載すると、`RecyclerView`を使ったリストの表示が出来ると思います。

リストに区切り線を入れたい場合は

```kotlin
 val dividerItemDecoration =
     DividerItemDecoration(this , LinearLayoutManager(this).getOrientation())
     recyclerView.addItemDecoration(dividerItemDecoration)
```

上記のソースを`MainActivity`クラスの`OnCreate`メソッドに追記しましょう！

そうするとリストに区切り線が入ってリストっぽくなります！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704865/0f86b48d-3730-6676-ab01-9bea47fba6e7.png" width=25% >


## 最後に

これからどんどん投稿していこうと思うので、RecyclerViewをもっと詳しく使用したり、
実際にどのようにアプリを作っているかも載せていくので気軽に見ていって下さい〜！