8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

RecyclerViewでスワイプの削除

Last updated at Posted at 2020-06-14

はじめに

ここでは、RecyclerViewのアイテムをスワイプ削除する方法について書いていきます。 これまでの実装については前回を参照してください。

目標

今回は下のGIFのようにRecyclerViewのアイテムをスワイプで削除できようにします。

実装

Gradleには、特に追加するものはありません。

Activity

削除機能を実装するためのコードを、今回はActivityに書きました。

MainActivity.kt
class MainActivity : AppCompatActivity() {

    ...
    private val swipeToDismissTouchHelper by lazy {
        getSwipeToDismissTouchHelper(adapter)
    }

    override fun onCreate(savedInstanceState: Bundle?) {

        ...

        swipeToDismissTouchHelper.attachToRecyclerView(main_recycler_view)

        ...

        }

    private fun getSwipeToDismissTouchHelper(adapter: RecyclerAdapter) =
        ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(
            ItemTouchHelper.ACTION_STATE_IDLE,
            ItemTouchHelper.RIGHT
        ) {
            override fun onMove(
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                target: RecyclerView.ViewHolder
            ): Boolean {
                return false
            }

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                val timeTasks = adapter.getItems()
                mainViewModel.delete(timeTasks[viewHolder.adapterPosition])
            }

            override fun onChildDraw(
                c: Canvas,
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                dX: Float,
                dY: Float,
                actionState: Int,
                isCurrentlyActive: Boolean
            ) {
                super.onChildDraw(
                    c,
                    recyclerView,
                    viewHolder,
                    dX,
                    dY,
                    actionState,
                    isCurrentlyActive
                )
                val itemView = viewHolder.itemView
                val background = ColorDrawable(Color.RED)
                val deleteIcon = AppCompatResources.getDrawable(
                    this@MainActivity,
                    R.drawable.ic_baseline_delete_36
                )
                val iconMarginVertical =
                    (viewHolder.itemView.height - deleteIcon!!.intrinsicHeight) / 2

                deleteIcon.setBounds(
                    itemView.left + iconMarginVertical,
                    itemView.top + iconMarginVertical,
                    itemView.left + iconMarginVertical + deleteIcon.intrinsicWidth,
                    itemView.bottom - iconMarginVertical
                )
                background.setBounds(
                    itemView.left,
                    itemView.top,
                    itemView.right + dX.toInt(),
                    itemView.bottom
                )
                background.draw(c)
                deleteIcon.draw(c)
            }
        })
}

なんかともて長いコードになってしまった。
細分化して、何をしているか見ていきます。


ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(
            ItemTouchHelper.ACTION_STATE_IDLE,
            ItemTouchHelper.RIGHT
        )

ItemTouchHelper()はRecyclerViewでドラッグ&ドロップやスワイプ機能を実現するためのクラスです。
ユーザの操作に対してCallbackを受け取る必要があるので、それを簡単に実装できるItemTouchHelper.SimpleCallback()を使用しました。
ItemTouchHelper.SimpleCallback()は第一引数にドラッグを有効にする向きを指定し、第二引数でスワイプを有効にする向きを指定します。今回は、ドラッグは行わないのでItemTouchHelper.ACTION_STATE_IDLEを指定し、スワイプは右スワイプ(ItemTouchHelper.RIGHT)のみを有効にします。

override fun onMove(
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                target: RecyclerView.ViewHolder
            ): Boolean {
                return false
            }

onMove()では、ドラッグの処理を書くのですが今回はドラッグの処理はないので何も変更なしです。

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                val timeTasks = adapter.getItems()
                mainViewModel.delete(timeTasks[viewHolder.adapterPosition])
            }

onSwiped()では、スワイプ時の処理を書きます。
スワイプ時にadapterからアイテムを要求し、スワイプされたアイテムをviewModelに渡しています。

override fun onChildDraw(
                c: Canvas,
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                dX: Float,
                dY: Float,
                actionState: Int,
                isCurrentlyActive: Boolean
            )

onChildDraw()では、スワイプ時の背景やアイコンの設定ができます。(他にも方法はあるらしい)

変数を定義

val itemView = viewHolder.itemView // RecyclerViewのitemView
val background = ColorDrawable(Color.RED) // スワイプ時の背景の定義
val deleteIcon = AppCompatResources.getDrawable( // スワイプ時に出てくるアイコンを定義
    this@MainActivity,
    R.drawable.ic_baseline_delete_36
)
// アイコンを表示させる位置を決めるためのマージンを計算(今回は縦方向の中心)
val iconMarginVertical =
    (viewHolder.itemView.height - deleteIcon!!.intrinsicHeight) / 2

最後に、背景とアイコンを適切な位置で表示させます。

deleteIcon.setBounds(
    itemView.left + iconMarginVertical,
    itemView.top + iconMarginVertical,
    itemView.left + iconMarginVertical + deleteIcon.intrinsicWidth,
    itemView.bottom - iconMarginVertical
)
background.setBounds(
    itemView.left,
    itemView.top,
    itemView.right + dX.toInt(),
    itemView.bottom
)
background.draw(c)
deleteIcon.draw(c)
8
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?