14
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.

Y'sAdvent Calendar 2017

Day 25

ItemTouchHelperでRecyclerViewの入れ替え

Last updated at Posted at 2017-12-24

この記事は、株式会社Y's アドベントカレンダー 25日目の記事になります。
KotlinによるAndroid開発の初歩的な内容になります。

  
RecyclerView内のViewをロングタップで入れ替えたいときの1つのやり方として、ItemTouchHelperを使うと簡単に実装することができるよ!って話をしようと思います。↓みたいなイメージ。

こう並べて
device-2017-12-24-121236.png

ドラッグして
device-2017-12-24-121405.png

指を離すと入れ替わる
device-2017-12-24-121423.png

##Viewの配置
RecyclerViewとGridLayoutManagerを使って並べていきます。

        // 30個のViewを作成
        val data = ArrayList<String>()
        for (number in 1..30) data.add(number.toString())
        
        // GridLayoutManagerで横幅を5に
        val recycler: RecyclerView = findViewById(R.id.recycler)
        val adapter = Adapter(data)
        recycler.adapter = adapter
        recycler.layoutManager = GridLayoutManager(this, 5)

ここまでで、
30個のViewが配置できました。
device-2017-12-24-121236.png

##ItemTouchHelperでの入れ替え
ロングタップでの並び変え程度であれば、ItemTouchHelper.SimpleCallbackで簡単に実装できます。

        val touchHelper = ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(
                ItemTouchHelper.UP or ItemTouchHelper.DOWN
             or ItemTouchHelper.RIGHT or ItemTouchHelper.LEFT, 0) {
           // ここで指定した方向にのみドラッグ可能

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

                val from = viewHolder.adapterPosition
                val to = target.adapterPosition

                val data = adapter.data.removeAt(from)
                adapter.data.add(to, data)

                adapter.notifyItemMoved(from, to)

                return true
            }

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder?, direction: Int) {
                // スワイプで削除する場合はここ
            }
        })

        touchHelper.attachToRecyclerView(recycler)
        recycler.addItemDecoration(touchHelper)
        // ここを忘れると動かないので注意

  
これを付け加えるだけでドラッグでの移動が簡単にできるようになりました!
device-2017-12-24-121405.png
  
device-2017-12-24-121423.png

  

14
9
0

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
14
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?