[Android & Kotlin] GridをRecyclerViewとItemTouchHelperで実装

GridViewのようにRecyclerViewを使って格子状に表示して、ドラッグ&ドロップとスワイプで削除を行うことができます

Android Studio
2021.2.1

RecyclerViewでGrid表示

RecyclerView からItemTouchHelperを設定すれば、ドラッグアンドドロップやスワイプ削除ができるので、それを使ってGrid表示をさせてみます

ItemTouchHelper.SimpleCallbackが簡単で使いやすい

目次
1. Grid表示
2. サンプルコード

Grid表示

前に画像とテキストを設定したRecyclerViewのコードを元にして作成してきます

データセットは要素を削除したり可変長となるのでArrayListで作ります

RecyclerViewでは実はListViewのように縦方向のスクロールをデフォルトで設定しているのですが、それを変更することでGridになります

具体的には、LinearLayoutManagerからGridLayoutManagerに変更
また上下方向と左右方向へのスクロールの変更もできます

GridLayoutManager(
    context: Context!, 
    spanCount: Int, // 列あるいは行の数
    orientation: Int, // HORIZONTAL or VERTICAL.
    reverseLayout: Boolean)

GridLayoutManager(

context: Context!,

spanCount: Int, // 列あるいは行の数

orientation: Int, // HORIZONTAL or VERTICAL.

reverseLayout: Boolean)

２個並びの縦方向に設定してみます

recyclerView.layoutManager = GridLayoutManager(
            this, 2, RecyclerView.VERTICAL, false)

1 2	recyclerView.layoutManager = GridLayoutManager( this, 2, RecyclerView.VERTICAL, false)

CardViewのwidgetをタグにします

<androidx.cardview.widget.CardView
    ...
    <LinearLayout
        ...
        <ImageView
            ...
         />

        <TextView
            ...
        />

    </LinearLayout>
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView

...

<LinearLayout

...

<ImageView

...

<TextView

...

</LinearLayout>

</androidx.cardview.widget.CardView>

ライブラリにcardviewを追加
build.gradle

dependencies {
    ...
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
    implementation "androidx.cardview:cardview:1.0.0"
}

dependencies {

...

implementation 'androidx.recyclerview:recyclerview:1.2.1'

implementation "androidx.cardview:cardview:1.0.0"

}

onMove()はGridなので上下だけでなく左右も動けるように
UP, DOWN, LEFt, RIGHTを可動域とします

ここでスワイプと重なるので左右で削除か移動か分かりにくくなる可能性はあります
実際は長押しで移動ですが、削除はスワイプではなくChipなどで分かりやすくした方がいいかもしれません

val mIth = ItemTouchHelper(
    object : ItemTouchHelper.SimpleCallback(
        // onMove()
        ItemTouchHelper.UP or ItemTouchHelper.DOWN or
        ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,
        // onSwiped()
        ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT
    ) {
        override fun onMove(
            ...
        ): Boolean {
            ...
        }

        override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
            ...
        }
    })

val mIth = ItemTouchHelper(

object : ItemTouchHelper.SimpleCallback(

// onMove()

ItemTouchHelper.UP or ItemTouchHelper.DOWN or

ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,

// onSwiped()

ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT

) {

override fun onMove(

...

): Boolean {

...

}

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {

...

}

})

サンプルコード

これをRcyclerViewに組み合わせてまとめていきます

MainActivity.kt

//package your.package.name

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.*
import androidx.recyclerview.widget.RecyclerView.ItemDecoration

class MainActivity : AppCompatActivity() {

    private val names: ArrayList<String> = arrayListOf(
        "Bellflower", "Bougainvillea", "Cosmos", "Cosmos field",
        "Delphinium", "Flowers", "Lotus", "Spring Flowers"
    )

    private val photos: ArrayList<Int> = arrayListOf(
        R.drawable.bellflower, R.drawable.bougainvillea,
        R.drawable.cosmos, R.drawable.cosmos_field,
        R.drawable.delphinium, R.drawable.flowers,
        R.drawable.lotus, R.drawable.spring_flowers
    )

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

        val recyclerView = findViewById<RecyclerView>(R.id.my_recycler_view)

        recyclerView.setHasFixedSize(true)

        recyclerView.layoutManager = GridLayoutManager(
            this, 2, RecyclerView.VERTICAL, false)

        recyclerView.adapter = MyAdapter(photos, names)

        val itemDecoration: ItemDecoration =
            DividerItemDecoration(this, DividerItemDecoration.VERTICAL)
        recyclerView.addItemDecoration(itemDecoration)

        val adapter = recyclerView.adapter as MyAdapter

        val mIth = ItemTouchHelper(
            object : ItemTouchHelper.SimpleCallback(
                ItemTouchHelper.UP or ItemTouchHelper.DOWN or
                        ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,
                ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT
            ) {
                override fun onMove(
                    recyclerView: RecyclerView,
                    viewHolder: RecyclerView.ViewHolder,
                    target: RecyclerView.ViewHolder
                ): Boolean {
                    val fromPos = viewHolder.bindingAdapterPosition
                    val toPos = target.bindingAdapterPosition
                    adapter.notifyItemMoved(fromPos, toPos)
                    return true // true if moved, false otherwise
                }

                override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                    photos.removeAt(viewHolder.bindingAdapterPosition)
                    names.removeAt(viewHolder.bindingAdapterPosition)

                    adapter.notifyItemRemoved(viewHolder.bindingAdapterPosition)
                }
            })

        mIth.attachToRecyclerView(recyclerView)
    }

}

//package your.package.name

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import androidx.recyclerview.widget.*

import androidx.recyclerview.widget.RecyclerView.ItemDecoration

class MainActivity : AppCompatActivity() {

private val names: ArrayList<String> = arrayListOf(

"Bellflower", "Bougainvillea", "Cosmos", "Cosmos field",

"Delphinium", "Flowers", "Lotus", "Spring Flowers"

)

private val photos: ArrayList<Int> = arrayListOf(

R.drawable.bellflower, R.drawable.bougainvillea,

R.drawable.cosmos, R.drawable.cosmos_field,

R.drawable.delphinium, R.drawable.flowers,

R.drawable.lotus, R.drawable.spring_flowers

)

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val recyclerView = findViewById<RecyclerView>(R.id.my_recycler_view)

recyclerView.setHasFixedSize(true)

recyclerView.layoutManager = GridLayoutManager(

this, 2, RecyclerView.VERTICAL, false)

recyclerView.adapter = MyAdapter(photos, names)

val itemDecoration: ItemDecoration =

DividerItemDecoration(this, DividerItemDecoration.VERTICAL)

recyclerView.addItemDecoration(itemDecoration)

val adapter = recyclerView.adapter as MyAdapter

val mIth = ItemTouchHelper(

object : ItemTouchHelper.SimpleCallback(

ItemTouchHelper.UP or ItemTouchHelper.DOWN or

ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,

ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT

) {

override fun onMove(

recyclerView: RecyclerView,

viewHolder: RecyclerView.ViewHolder,

target: RecyclerView.ViewHolder

): Boolean {

val fromPos = viewHolder.bindingAdapterPosition

val toPos = target.bindingAdapterPosition

adapter.notifyItemMoved(fromPos, toPos)

return true // true if moved, false otherwise

}

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {

photos.removeAt(viewHolder.bindingAdapterPosition)

names.removeAt(viewHolder.bindingAdapterPosition)

adapter.notifyItemRemoved(viewHolder.bindingAdapterPosition)

}

})

mIth.attachToRecyclerView(recyclerView)

}

　
アダプターです
MyAdapter.kt

//package your.package.name

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class MyAdapter(private val iImages: ArrayList<Int>,
                private val iNames: ArrayList<String>):
    RecyclerView.Adapter<MyAdapter.ViewHolder>() {


    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView
        val imageView: ImageView

        init {
            // Define click listener for the ViewHolder's View.
            textView = view.findViewById(R.id.text_view)
            imageView = view.findViewById(R.id.image_view)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.my_text_view, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.imageView.setImageResource(iImages.get(position))
        viewHolder.textView.text = iNames[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = iNames.size
}

//package your.package.name

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.ImageView

import android.widget.TextView

import androidx.recyclerview.widget.RecyclerView

class MyAdapter(private val iImages: ArrayList<Int>,

private val iNames: ArrayList<String>):

RecyclerView.Adapter<MyAdapter.ViewHolder>() {

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

val textView: TextView

val imageView: ImageView

init {

// Define click listener for the ViewHolder's View.

textView = view.findViewById(R.id.text_view)

imageView = view.findViewById(R.id.image_view)

}

// Create new views (invoked by the layout manager)

override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {

// Create a new view, which defines the UI of the list item

val view = LayoutInflater.from(viewGroup.context)

.inflate(R.layout.my_text_view, viewGroup, false)

return ViewHolder(view)

}

// Replace the contents of a view (invoked by the layout manager)

override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

// Get element from your dataset at this position and replace the

// contents of the view with that element

viewHolder.imageView.setImageResource(iImages.get(position))

viewHolder.textView.text = iNames[position]

}

// Return the size of your dataset (invoked by the layout manager)

override fun getItemCount() = iNames.size

}

その他ファイル

メインのレイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- A RecyclerView with some commonly used attributes -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

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="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/my_recycler_view"

android:scrollbars="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
リスト要素のレイアウト
my_text_view.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp"
    app:contentPadding="10dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="UseCompoundDrawables">
        <ImageView
            android:id="@+id/image_view"
            android:layout_width="wrap_content"
            android:layout_height="140dp"
            android:contentDescription="@string/description" />

        <TextView
            android:id="@+id/text_view"
            android:textSize="18sp"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</androidx.cardview.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView

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="match_parent"

android:layout_height="wrap_content"

app:cardCornerRadius="10dp"

app:cardElevation="5dp"

app:contentPadding="10dp"

app:cardUseCompatPadding="true">

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content"

tools:ignore="UseCompoundDrawables">

<ImageView

android:id="@+id/image_view"

android:layout_width="wrap_content"

android:layout_height="140dp"

android:contentDescription="@string/description" />

<TextView

android:id="@+id/text_view"

android:textSize="18sp"

android:textColor="@android:color/black"

android:textAlignment="center"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

</androidx.cardview.widget.CardView>

　
gradleの追加設定、バージョンは適宜合わせてください
build.gradle

dependencies {
    ...
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
    implementation "androidx.cardview:cardview:1.0.0"
}

dependencies {

...

implementation 'androidx.recyclerview:recyclerview:1.2.1'

implementation "androidx.cardview:cardview:1.0.0"

}

strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="description">picture</string>
</resources>

<string name="description">picture</string>

</resources>

これで実行してみます