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

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

Android Studio
2021.2.1




RecyclerViewでGrid表示

 

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

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

1x1.trans - [Android & Kotlin] GridをRecyclerViewとItemTouchHelperで実装


 
 

Grid表示

 

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

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

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

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

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

CardViewのwidgetをタグにします

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

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

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

 

サンプルコード

 

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

MainActivity.kt

 
アダプターです
MyAdapter.kt

 

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

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

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

strings.xml

これで実行してみます

1x1.trans - [Android & Kotlin] GridをRecyclerViewとItemTouchHelperで実装


 
関連ページ

References:
ItemTouchHelper
リストとカードの作成
ItemTouchHelper.SimpleCallback
GridLayoutManager

シェアする

  • このエントリーをはてなブックマークに追加

フォローする