はじめに
Androidエンジニア勤務1日目の内容がGroupieを使ってのRecyclerViewの実装でした。
自分が知りたかった内容をメモとして書いてるため超初心者Android向けの記事になります。
RecyclerViewでGroupieなにができるのか？
イメージとしてはLINEなどのトーク画面一覧に近いものを作成することが可能です。
完成イメージ
開発環境
- 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が表示されます。
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で不甲斐ないところもあるかと思いますが温かい目でみていただきたいです。
参考
下記の記事を書いてくださった方々に感謝です🙇♂️