[Android] GridView 作り方使い方

ギャラリーのように画像を格子状に並べるには、GridViewを使います。作り方は ListView に似ています。
 

Android Studio 3.0.1
Android 8.1.0

 



GridView

 
GridViewはListViewに比べて画像を表示するケースが多いのではないでしょうか。その場合はViewHolderやconvertViewを駆使してviewの再利用を行わないとスクロールがもたついてしまいます。
ただ、Picasso を使うケースではこの限りではありません。ここではとりあえず、本来のGridViewの作成方法にしたがって行きたいと思います。
 

 

Adapter

 
GridViewはスクロール可能なアイテムのリストを表示するViewグループです。
Adapterは配列またはデータベースなどからそれぞれの要素をリストに入れられるように変換し自動的に挿入してくれます。
 

 
作り方はListViewと同じように作成していきます。drawableから画像ファイルを読出し、そのIDをArrayListに登録しGrid表示です。

  1. GridView のインスタンス生成
  2. BaseAdapter を継承した GridAdapter クラスのインスタンス生成
  3. GridAdapter で ViewHolder と convertView を使って View の再利用
  4. 画像とテキストを表示

MainActivity.java

GridAdapter.java

 

サンプルコード

 
画像とその名前をGridViewに表示してみます。
 

 
レイアウトは2列で縦長は150dpあたりとし、名前はシャドウを付けて背景の明暗に対応してみます。
 
MainActivity.java

 
BaseAdapterを継承したカスタムのadapterを作成します。
 
GridAdapter.java

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

 
画面をRelativeViewでレイアウトしています。GridViewはmatch_parentで幅いっぱいまで占有します。GridView内でのセルの配置は次のように設定します。
 

 
android:numColumns=”2″ : 縦2列の配置
 
android:horizontalSpacing=”1dp” : 横のスペーサーを1dp (縦ラインです!)
android:verticalSpacing=”1dp” : 縦のスペーサーを1dp(横ラインです!)
 
android:stretchMode=”columnWidth” :
– columnWidth: 各列が同じ幅にストレッチされる
– none: ストレッチ無し
– spacingWidth: spacingで指定した値と余る余白を均等に分けた幅を加算
– spacingWidthUniform: 画像の解像度やその他の設定に応じて配置、余白がでる
 
GridViewに差し込む部分のレイアウトがgrid_items.xmlになります
 
grid_items.xml

 
画像とテキストが重なって、白いっぽい画面とダークな画面上でわかるように文字に影を付けます。


android:shadowDx=”2″ : 影の水平オフセット
android:shadowDy=”2″ : 影の垂直オフセット
android:shadowRadius=”2″ : ぼかしレベル
 
strings.xml

 
GridViewが表示されました。
 

 

セルの選択

 
ListViewと同じようにセルをタップしたら別のActivityに遷移して、そのセルアイテムの詳細を表示させるような設定です。
 
onItemClick を設定します。タップされたセルの番号からその画像のIDをintentで送ります。
MainActivity.java

 
遷移先のSubActivity.javaを作成します。
画像のIDを取得して、それを画面いっぱいに表示させます。
SubActivity.java

 
レイアウトです
activity_sub.xml

 
SubActivityをManifestに登録するのを忘れずに
AndroidManifest.xml

 

 
 
参考記事:

 
References:
Grid View
TextView | Android Developers

 

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

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

フォローする