【Ktolin初心者】Groupieを使ってRecyclerView実装してみた

# はじめに
Androidエンジニア勤務1日目の内容がGroupieを使ってのRecyclerViewの実装でした。
自分が知りたかった内容をメモとして書いてるため超初心者Android向けの記事になります。

## RecyclerViewでGroupieなにができるのか？
イメージとしてはLINEなどのトーク画面一覧に近いものを作成することが可能です。

完成イメージ

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320838/db0a9103-b0ed-461f-d7ca-27addc4137da.png">




https://github.com/naoyukitsuruo/recyclerview_sample

## 開発環境
- macOS:10.14.6
- Android Studio:4.0.1
- kotlin:1.3.72

### 作業順番
- Groupie 導入
- RecyclerView
- RecyclerViewに表示するItemを作成
- 作成したItemをRecyclerViewに追加する
- レイアウト作成

#### Groupie 導入
- 参照先path
/androidSampleApp/recyclerview_sample/app/build.gradle

##### build.gradleについて
Java（JVM）環境におけるビルドシステムのことで、オープンソースプロジェクトとして無償で公開されています。 特長としては、ビルドの記述を XML のような構造ではなく、Groovy ライクな 独自の DSL を用い、スクリプトとして記述できる点です。

```build.gradle

android {
    dataBinding.enabled = true
}

dependencies {
    implementation 'com.xwray:groupie:2.7.0'
    implementation 'com.xwray:groupie-databinding:2.7.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

```

#### RecyclerView
- /app/src/main/res/layout/activity_main.xml

```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
```

#### RecyclerViewのItemを作成する
- /app/src/main/res/layout/item_list.xml
- RecyclerViewのItem表示するためxmlファイルを新規作成します。
- File > New > XML > Layout XML Fileで作成します。


```item_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                android:layout_marginStart="16dp"
                android:id="@+id/image_view"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:background="@color/colorPrimaryDark"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginLeft="16dp" />

            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginLeft="16dp"
                android:text="日付"
                android:textColor="#000000"
                android:textSize="12sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/image_view"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="21dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:height="20dp"
                android:gravity="center_horizontal|center_vertical"
                android:text="項目名"
                android:textColor="#000000"
                app:layout_constraintStart_toEndOf="@+id/image_view"
                app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

```
Splitをクリックすると作成したlayoutが表示されます。
![スクリーンショット 2020-10-05 21.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320838/43d7c77c-0794-ac4c-3a0d-7fb548475a8c.png)

#### RecyclerViewのItemのListItem.kt(class)を作成します。
- /app/src/main/java/com/example/recyclerview_sample/ListItem.kt
- File > New > Kotlin File/ClassをクリックしClassを選択します。

```ListItem.kt

package com.example.recyclerview_sample

import com.example.recyclerview_sample.databinding.ItemListBinding
import com.xwray.groupie.databinding.BindableItem

class ListItem(private val string: String) : BindableItem<ItemListBinding>() {

    override fun getLayout(): Int = R.layout.item_list

    override fun bind(viewHolder: ItemListBinding, position: Int) {
        viewHolder.textView.text = string
    }
}
```

#### 作成したItemをRecyclerViewに追加する
こちらで最後になります。
MainActivity.ktにRecyclerViewを追加します。

```MainActivity.kt

package com.example.recyclerview_sample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.RecyclerView
import com.xwray.groupie.GroupAdapter
import com.xwray.groupie.ViewHolder

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

        val groupAdapter = GroupAdapter<ViewHolder>()
        findViewById<RecyclerView>(R.id.recycler_view).adapter = groupAdapter

        val items = listOf("test00","test01","test02","test03","test04")

        items.forEach { item ->
            groupAdapter.add(ListItem(item))
        }
    }
}
```

ここまできたらファイルを実行しエミュレータ画面を確認してみてください。

### 最後に
初Androidの初Groupieを使ってRecyclerView実装しての記事を書いてみました。
ここまでご覧いただきありがとうございます！
初Qiitaで不甲斐ないところもあるかと思いますが温かい目でみていただきたいです。

### 参考
下記の記事を書いてくださった方々に感謝です🙇‍♂️
- [RecyclerViewによるレイアウトを楽にするGroupieを1年使ってみて - Qiita](https://qiita.com/takahirom/items/4125d7c871fad534d3c2 "Qiita")
- [【Kotlin】Groupieを使って簡単なサンプルを作ってみた - Qiita](https://qiita.com/orimomo/items/053524039cc63c3017a9 "Qiita")