AndroidのGridViewを横(水平方向)スクロールさせたい

まーやです。

Androidアプリで横(水平方向)スクロールするグリッドを表示したい!
Android 4.2(APIレベル 17)以降なら「android.support.v17.leanback.widget.HorizontalGridView」なるViewがあります。名前からしてこれでバッチリに違いありません。

違いないのに!
Android 4.1(APIレベル 16)以前なら HorizontalGridView は使えないので他の方法で実現しなければなりません。

前回はこのAPIレベルですっかり脱線してしまいましたが、今回こそは GridView で横スクロールを実現しましょう。

GridView は縦(垂直方向)スクロールするためのViewなので横にはスクロールできません。でもなんとか GridView を横にしたいのよ。

  • HorizontalScrollView で GridView をラップして表示
    GridView は表示アイテム数から、列数・幅・高さを計算して設定します。

  • GridView を横倒しにして表示
    GridView は-90度回転して表示、アイテムは逆に+90度回転して表示します。回転位置は中心点なので長方形なら位置調整します。

  • GridView を継承したライブラリ TwoWayGridView を使う
    TwoWayGridView をインポートして使用します。

上記のいずれの方法でも GridView を使って横スクロールを実現可能です。

可能でありますが、HorizontalScrollView だとアイテムの生成に無駄があり、横倒しにするとAndroid 4.1以前の端末でクリック位置がずれます。調整すればなんとかなると思いますが、それらを調整してくれているのが TwoWayGridView です(多分…)。自力でゴリゴリするより TwoWayGridView を使うのがすっと楽チンです。

では、使ってみましょう。

TwoWayGridView をダウンロード

下記は元祖のコード。Eclipseプロジェクトです。

https://github.com/jess-anders/two-way-gridview

私は Android Studio なんですが、上記はインポート後コンパイルエラーが出て面倒だったので下記をダウンロードしました。

https://github.com/Innovattic/two-way-gridview

「Download ZIP」からダウンロードして解凍しておきます。

TwoWayGridView をインポート

Android Studio でのインポート方法を説明します。

外部モジュールをインポート

  1. メニューから[File]→[Project Structure…]を選択する

  2. 追加を選択する
    TwoWayGridView_1

  3. [Import Existing Project]を選択する
    TwoWayGridView_2

  4. ダウンロードして解凍しておいたフォルダを選択、モジュール名を入力する
    TwoWayGridView_3

  5. チェックを外したい項目があれば、外して進む
    TwoWayGridView_4

    • 可能なら、依存関係のあるJarを書き換える
    • 可能なら、依存関係のあるライブラリを置き換える
    • モジュール名をキャメルケースにする
  6. TwoWayGridView が追加される
    TwoWayGridView_5
    追加までちょっと時間がかかるので気長にまってください。TwoWayGridView がなかなか現れない場合は、一度ポップアップを閉じてもう一度開いてみます。

アプリから参照設定

  1. [app]を選択
  2. [Dependencies]を選択
  3. [Module dependency]を選択
  4. TwoWayGridView が追加される
    TwoWayGridView_6

TwoWayGridView を使う

使い方は下記3ステップ。

  1. レイアウトXML に TwoWayGridView を記述する
  2. Adapter を作成する
  3. TwoWayGridView に Adapter をセットする

GridView と同じですね。レイアウトXMLで定義するプロパティを一部 “android:” から “app:” に変更します。GridView と違うのはこれだけです。

1. レイアウトXML に TwoWayGridView を記述する

GridView が親から継承したプロパティは “android:” のまま。GridView と TwoWayGridView のプロパティは “android:” ではなく “app:” にします。

プロパティ 説明 所有
app:verticalSpacing 行間 GridView
app:horizontalSpacing 列間 GridView
app:columnWidth 列の幅 GridView
app:rowHeight 行の高さ TwoWayGridView
app:scrollDirectionPortrait 端末が縦方向の時、スクロールの方向 TwoWayGridView
app:scrollDirectionLandscape 端末が横方向の時、スクロールの方向 TwoWayGridView
app:numColumns 列数 GridView
app:numRows 行数 TwoWayGridView
app:stretchMode 列に余白部分がある時、拡張方法 GridView
android:scrollbars スクロールバーの表示 AbsListView

2. Adapter を作成する
3. TwoWayGridView に Adapter をセットする

ここは通常のGridViewとまったく同じなのではしょります。
既に GridView で作ってて TwoWayGridView に変えてみたなら、そのままで問題なく動いているはず。

まーや
About まーや (34 Articles)
画像変換サービスPictureFitterを担当しています。 ネコ大好きのアンドロイダーです。
Contact: Twitter

Leave a comment

Your email address will not be published.

*



Top