본문 바로가기
JLPT

[Android] GridView 作り方使い方

by 엘리후 2021. 7. 3.

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

　

​

Android Studio 3.5.3
API 29

　

​

​

GridView

　

GridViewはListViewに比べて画像を表示するケースが多いのではないでしょうか。その場合はViewHolderやconvertViewを駆使してviewの再利用を行わないとスクロールがもたついてしまいます。

ただ、Picasso を使うケースではこの限りではありません。ここではとりあえず、本来のGridViewの作成方法にしたがって行きたいと思います。

　

目次

1. Adapter

2. サンプルコード

3. セルの選択

　

Adapter

　

GridViewはスクロール可能なアイテムのリストを表示するViewグループです。

Adapterは配列またはデータベースなどからそれぞれの要素をリストに入れられるように変換し自動的に挿入してくれます。

　

​

　

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

GridView のインスタンス生成

BaseAdapter を継承した GridAdapter クラスのインスタンス生成

GridAdapter で ViewHolder と convertView を使って View の再利用

画像とテキストを表示

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14		 ...
// GridViewのインスタンス生成
GridView gridview = findViewById(R.id.gridview);


// GridAdapterのインスタンス生成
GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
R.layout.grid_items,
imgList, //Data Source
members // Data Source
);


// GridviewにアダプターGridAdapterをセット
gridview.setAdapter(adapter);
...

GridAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30		 // BaseAdapterを継承したGridAdapterクラス
public class GridAdapter extends BaseAdapter {


// ViewHolderクラス
class ViewHolder {
}


...
// コンストラクタ　GridViewからデータを受け取る
GridAdapter(Context context, // this.getApplicationContext()　コンテキスト
int layoutId, // R.layout.grid_items => grid_items.xmlファイル
List<Integer> iList, // imgList のarray
String[] members // members配列
){
...


// ViewHolder と convertView を使って View の再利用
public View getView(int position, View convertView, ViewGroup parent) {


ViewHolder holder;
if (convertView == null) {
...
}
else {
holder = (ViewHolder) convertView.getTag();
}
...
return convertView;
}
...

　

サンプルコード

　

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

　

​

　

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

　

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47		 package your.package.name;


import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import android.widget.GridView;


public class MainActivity extends AppCompatActivity {


// 表示する画像の名前（拡張子無し）
private String[] members = {
"yumiko", "yuka", "mai", "nagi", "toko",
"kurumi", "miki", "saya", "yuyu","katakuriko"
};


// Resource IDを格納するarray
private List<Integer> imgList = new ArrayList<>();


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


// for-each member名をR.drawable.名前としてintに変換してarrayに登録
for (String member: members){
int imageId = getResources().getIdentifier(
member,"drawable", getPackageName());
imgList.add(imageId);
}


// GridViewのインスタンスを生成
GridView gridview = findViewById(R.id.gridview);
// BaseAdapter を継承したGridAdapterのインスタンスを生成
// 子要素のレイアウトファイル grid_items.xml を
// activity_main.xml に inflate するためにGridAdapterに引数として渡す
GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
R.layout.grid_items,
imgList,
members
);


// gridViewにadapterをセット
gridview.setAdapter(adapter);


}
}

　

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

　

GridAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78		 import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;


import java.util.ArrayList;
import java.util.List;


public class GridAdapter extends BaseAdapter {


class ViewHolder {
ImageView imageView;
TextView textView;
}


private List<Integer> imageList = new ArrayList<>();
private String[] names;
private LayoutInflater inflater;
private int layoutId;


// 引数がMainActivityからの設定と合わせる
GridAdapter(Context context,
int layoutId,
List<Integer> iList,
String[] members) {


super();
this.inflater = (LayoutInflater)
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.layoutId = layoutId;
imageList = iList;
names = members;
}


@Override
public View getView(int position, View convertView, ViewGroup parent) {


ViewHolder holder;
if (convertView == null) {
// main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする
convertView = inflater.inflate(layoutId, parent, false);
// ViewHolder を生成
holder = new ViewHolder();


holder.imageView = convertView.findViewById(R.id.image_view);
holder.textView = convertView.findViewById(R.id.text_view);


convertView.setTag(holder);
}
else {
holder = (ViewHolder) convertView.getTag();
}


holder.imageView.setImageResource(imageList.get(position));
holder.textView.setText(names[position]);


return convertView;
}


@Override
public int getCount() {
// List<String> imgList の全要素数を返す
return imageList.size();
}


@Override
public Object getItem(int position) {
return null;
}


@Override
public long getItemId(int position) {
return 0;
}
}

　

メインのレイアウト

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:background="#aaa"
tools:context=".MainActivity">


<GridView
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#888"
android:gravity="center"
android:horizontalSpacing="1dp"
android:verticalSpacing="1dp"
android:numColumns="2"
android:stretchMode="columnWidth" />


</RelativeLayout>

　

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

　

​

　

android:numColumns=”2″ : 縦２列の配置

　

android:horizontalSpacing=”1dp” : 横のスペーサーを1dp (縦ラインです!)

android:verticalSpacing=”1dp” : 縦のスペーサーを1dp(横ラインです!)

　

android:stretchMode=”columnWidth” :

– columnWidth: 各列が同じ幅にストレッチされる

– none: ストレッチ無し

– spacingWidth: spacingで指定した値と余る余白を均等に分けた幅を加算

– spacingWidthUniform: 画像の解像度やその他の設定に応じて配置、余白がでる

　

GridViewに差し込む部分のレイアウトがgrid_items.xmlになります

　

grid_items.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29		 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f88"
android:padding="3dp" >


<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="140dp"
android:scaleType="centerCrop"
android:contentDescription="@string/description"/>


<TextView
android:id="@+id/text_view"
android:gravity="center"
android:textSize="18sp"
android:textColor="#fff"
android:shadowDx="2"
android:shadowDy="2"
android:shadowRadius="2"
android:shadowColor="#444"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>


</RelativeLayout>

　

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

​

android:shadowDx=”2″ : 影の水平オフセット

android:shadowDy=”2″ : 影の垂直オフセット

android:shadowRadius=”2″ : ぼかしレベル

　

strings.xml

1
2
3
4		 <resources>
<string name="app_name">YourAppName</string>
<string name="description">picture</string>
</resources>

　

GridViewが表示されました。

　

　

セルの選択

　

ListViewと同じようにセルをタップしたら別のActivityに遷移して、そのセルアイテムの詳細を表示させるような設定です。

　

onItemClick を設定します。タップされたセルの番号からその画像のIDをintentで送ります。

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60		 package your.package.name;


import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;


public class MainActivity extends AppCompatActivity
implements AdapterView.OnItemClickListener {


// 表示する画像の名前（拡張子無し）
private String[] members = {
"yumiko", "yuka", "mai", "nagi", "toko",
"kurumi", "miki", "saya", "yuyu","katakuriko"
};


// Resource IDを格納するarray
private List<Integer> imgList = new ArrayList<>();


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


// for-each member名をR.drawable.名前としてintに変換してarrayに登録
for (String member: members){
int imageId = getResources().getIdentifier(
member,"drawable", getPackageName());
imgList.add(imageId);
}


// GridViewのインスタンスを生成
GridView gridview = findViewById(R.id.gridview);
// BaseAdapter を継承したGridAdapterのインスタンスを生成
// 子要素のレイアウトファイル grid_items.xml を
// activity_main.xml に inflate するためにGridAdapterに引数として渡す
GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
R.layout.grid_items,
imgList,
members
);


// gridViewにadapterをセット
gridview.setAdapter(adapter);


// item clickのListnerをセット
gridview.setOnItemClickListener(this);
}


@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent intent = new Intent(getApplication(), SubActivity.class);
intent.putExtra("IMAGEID", imgList.get(position));
startActivity( intent );
}
}

　

GridAdapter.javaは前と同じです。

遷移先のSubActivity.javaを作成します。

画像のIDを取得して、それを画面いっぱいに表示させます。

SubActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		 package your.package.name;


import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;




public class SubActivity extends AppCompatActivity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sub);


Intent intent = getIntent();
int imageId = intent.getIntExtra("IMAGEID", 0);


ImageView imageView = findViewById(R.id.image_view);
imageView.setImageResource(imageId);


}
}

　

レイアウトです

activity_sub.xml

1
2
3
4
5
6
7
8
9
10
11
12
13		 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:contentDescription="@string/description" />


</LinearLayout>

　

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

AndroidManifest.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14		 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
...


<application
...
<activity
android:name=".SubActivity"
android:label="@string/app_name" />
...


</application>


</manifest>

　

 

　

　

参考記事：

GridView 作り方使い方

標準アイコンをGridViewで表示

Picasso を使ってネット上の画像をGridViewで表示してみた

저작자표시

'JLPT' 카테고리의 다른 글

NodejsでSlackにメッセージ投稿(2019年1月版)  (0) 2021.07.05
UML シーケンス図のフラグメントを使用した制御フローの記述  (0) 2021.07.05
「アンダーテイカーより戦  (0) 2021.07.01
구인구직 Java/Struts/Springシステムエンジニア  (0) 2021.07.01
cygames 구인구직  (0) 2021.07.01

관련글

댓글

티스토리툴바