概要
画像などの情報をタイル上に並べてくれる便利なウィジェットのGridView。
しかし標準で用意されているものだと何かと機能が足りない事があって困った人は多いんじゃないだろうか。
例えば
- ListViewにあったaddHeaderViewやaddFooterViewがサポートされていない
- カラムの高さが列ごとに整理されてしまう。そのため列のカラム同士の高さがバラバラな場合に低いカラムの下に余白が空いてしまう
- カラムの幅が固定されてしまう。なのである列は二列、ある列は四列みたいな柔軟な表示ができない
そこで今回は用途別に使えるGridViewのライブラリを個人的な感想も含めて(使っていれば)まとめてみることにした。
ListViewのようなaddHeaderViewやaddFooterViewが欲しい！
HeaderGridView
com.google.androidパッケージで一応HeaderViewが追加できるものが存在していたりする
しかしFooterViewが追加できないのでFooterにViewを追加したい人は別のライブラリ使うのが良いかも
HeaderFooterGridView
Recruit Marketing Partnersが出しているGridViewのライブラリ
記事執筆時点ではつい最近公開されたライブラリっぽい
名前の通りHeaderViewとFooterViewの両方が追加できるのが便利。
この会社で作られているアプリの「料理サプリ」でも使われているらしいのである程度安定感もありそう
軽く使ってみた感じだと動作に問題はなさそうだった
https://github.com/recruit-mp/android-HeaderFooterGridView [Github]
http://tech.recruit-mp.co.jp/mobile/android-headerfootergridview/ [Blog]
AbsListViewHelper
個人的に特に問題なければこの解決方法が汎用性もあってベストではという気がしなくもない
上の二つのライブラリと違って、AbsListViewHelperというクラスにAbsListViewを継承しているクラスのインスタンスを渡してHelper経由でHeaderViewとFooterViewをセットできる
GridViewはAbsListViewを継承しているので使える
この仕組みによって、気に入ったGridViewライブラリが仮にaddHeaderViewとaddFooterViewをサポートしてなかった場合でも、そのライブラリがAbsListViewを継承したクラスであればこのライブラリ経由でViewを追加できるので選択の幅が広がる
Gradleサポートされているのもいい感じ
高さがバラバラのカラムを綺麗に表示させたい！
AndroidStaggeredGrid
多分この用途のライブラリの中では一番有名かもしれない
標準のGridViewを扱うような感じでListAdapterに高さの違うViewを返しても、このライブラリがうまくカラム高さを計算していい感じに均等に配置してくれるというスグレモノのGridView
Gradleサポートされているので導入が簡単で、Etsyのアプリで使われているものが公開されている
気になったところ
最近良く使うライブラリなので、細かい部分の問題も書いておく
SwipeRefreshLayoutと相性が悪い？
- 高速スクロールしてると、リストの途中なのにStaggeredGridViewに引っかかって(?)スワイプ更新が走ったりすることがある
- ViewPagerの中にあるFragment内で描画してたので、それも関係あるのかもしれない
スクロールが表示されない
- サポートされてないっぽい
- 高速スクロールも同じくできない
setSelectionがサポートされていない
- 指定したpositionの項目に移動させる事ができない
- 一応この方法でできるけど、微妙に上 or 下にズレたり正確な位置に移動できない時がある
StaggeredGridView
com.google.androidパッケージでも一応それっぽいことができるコードが存在する
SwipeRefreshLayoutと相性が悪い？AndroidStaggeredGridと同じ症状が高頻度で発生するので使いづらかった
SwipeRefreshLayoutと組み合わせなければ割りと動くんだろうか
これをベースにして修正を加えたのがこのライブラリ
StaggeredGridView(その2)
これも同じようなことができるみたいなんだけど検証不足なので詳しい説明はなし
カラムの高さが固定されてるならfix、高さが不定ならdynamicでうまくモードを切り替えて使えるっぽい
上２つがうまく動かなかったら試してみるといいかも
カラムの幅を自由に設定して表示させたい！
AsymmetricGridView
こういったViewを使ったアプリを作る機会がなく、動作を試していないので詳しい説明はなし
初めにカラム数を指定したあと、項目毎に表示領域のカラム数と列数を指定するとライブラリ側でうまいこと調整して表示してくれる
使い方は他のAbsListViewタイプと同じような感じでAsymmetricGridViewAdapterにあるgetActualViewメソッドをオーバーライドして表示するViewをカスタマイズできそう
FreeFlow
これも使ったことがないので詳しい説明はなし
こちらは動的カラムを変更した時でもアニメーションして変更を反映してくれるみたい
Parchment
使ったことなくてどこまでできるのかもあんまり把握してないけど、こういうライブラリもあったよって感じで紹介
セクションで隔てたい！
StickyGridHeaders
StickyListHeadersのGridView版
下のgifのような感じに追従するセクションヘッダーを実装することができる便利ライブラリ
導入が簡単で非常に使いやすい
- mavenrepositoryに上がってるので、maven, gradleから入れられる
- StickyGridHeadersBaseAdapterを既存のAdapterにimplementして、必要な情報を返すようにすると後はライブラリがいい感じに表示してくれる
(これはStickyListHeadersの画像だが、これのGridView版と考えてよい)
横スクロールさせたい！
TwoWayGridView
スクロール方向を指定できるGridViewライブラリ
端末の向きによってスクロール方向が指定できるの地味に便利だと思う
例えば縦向きの時は縦スクロール、横向きの時は横スクロールみたいにしてスクリーンの幅を活かした操作性を提供できそう
ドラッグで移動させたい！
DynamicGrid
これは使ったことがないので細かい説明はなし
デモ動画だとホーム画面みたいに長押しでドラッグアンドドロップしているけど、DynamicGridViewのstartEditModeとstopEditModeで状態を管理しているみたいなので、特定の動作の時に編集モードにするといった事ができそう
setOnDropListenerでドロップ時のイベントが拾えるみたいだけど、ドラッグしたアイテムが最終的にどの位置に置かれたかは自分で何らかの方法で取ってこないとだめっぽい
あとがき
GridViewのライブラリは他にも一杯あるので、興味のある人は色々調べてみるといいかも