[Android] RecyclerViewとItemTouchHelperでGridの実装

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

Android Studio
2021.2.1




RecyclerViewでGrid表示

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

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

1x1.trans - [Android] RecyclerViewとItemTouchHelperでGridの実装


 
 

Grid表示

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

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

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

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

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

CardViewのwidgetをタグにします

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

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

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

 

サンプルコード

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

MainActivity.java

 
アダプターです
MyAdapter.java

 

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

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

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

strings.xml

これで実行してみます

1x1.trans - [Android] RecyclerViewとItemTouchHelperでGridの実装


 

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







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

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

フォローする