[Android] GridView 作り方使い方

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


Android Studio
2021.2.1

 




GridView

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

 

Adapter

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


 
作り方はListViewと同じように作成していきます。drawableから画像ファイルを読出し、そのIDをArrayListに登録しGrid表示です。
  1. GridView のインスタンス生成
  2. BaseAdapter を継承した GridAdapter クラスのインスタンス生成
  3. GridAdapter で ViewHolder と convertView を使って View の再利用
  4. 画像とテキストを表示

MainActivity.java


GridAdapter.java

 

サンプルコード

 
画像とその名前をGridViewに表示してみます。
 
1x1.trans - [Android] GridView 作り方使い方


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


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


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


 
画面をRelativeViewでレイアウトしています。GridViewはmatch_parentで幅いっぱいまで占有します。GridView内でのセルの配置は次のように設定します。
 
1x1.trans - [Android] 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


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

1x1.trans - [Android] GridView 作り方使い方


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


 
GridViewが表示されました。
 
1x1.trans - [Android] GridView 作り方使い方

 

セルの選択

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

MainActivity.java


 

GridAdapter.javaは前と同じです。

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

SubActivity.java


 
レイアウトです
activity_sub.xml


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


 

GridAdapter.java

 
activity_main.xml

strings.xml

 

 
 
参考記事:

 
References:
Grid View
TextView | Android Developers

 

シェアする

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

フォローする