AndroidアプリでGridViewレイアウトを作成する方法をステップ解説

はじめに

本記事では、AndroidアプリでGridViewレイアウトを実装する方法を、サンプルコードとともにステップバイステップで解説します。GridViewを使うと、画像やテキストなどの要素をグリッド状（格子状）に並べて表示できるため、ギャラリー画面やメニュー画面など、さまざまな場面で活用できます。

実装手順

ステップ1：新規プロジェクトの作成

Android Studioを起動し、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力して、プロジェクトのセットアップを完了させてください。

ステップ2：activity_main.xmlの編集

res/layout/activity_main.xmlに以下のコードを追加します。ここでは、2列表示のGridViewを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"/>
</RelativeLayout>

ステップ3：build.gradleへの依存関係の追加

build.gradle（Module: app）を開き、以下の依存関係を追加します。

implementation 'com.android.support:gridlayout-v7:28.0.0'

※なお、標準のGridViewウィジェット自体はAndroid SDKに含まれているため、基本的な実装にはこのライブラリは必須ではありません。

ステップ4：MainActivity.javaの実装

src/MainActivity.javaに以下のコードを追加します。数字の文字列配列と画像リソース配列を用意し、カスタムアダプター経由でGridViewにセットします。さらに、アイテムがタップされた際にToastでメッセージを表示するクリックリスナーも実装しています。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    GridView gridView;
    String[] numberInWords = {"One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten"};
    int[] numberImage = {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,
    R.drawable.five,R.drawable.six,R.drawable.seven,R.drawable.eight,R.drawable.nine,
    R.drawable.ten};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gridView);
        MainAdapter mainAdapter = new MainAdapter(MainActivity.this, numberInWords,numberImage);
        gridView.setAdapter(mainAdapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), "You CLicked " + numberInWords[+position],
                Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ステップ5：MainAdapter.javaの作成

MainAdapter.javaに以下のコードを追加します。BaseAdapterを継承したカスタムアダプターを作成し、getView()メソッド内で各セルに画像とテキストをバインドしています。

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;
class MainAdapter extends BaseAdapter {
    private Context context;
    private LayoutInflater layoutInflater;
    private String[] numbersInWords;
    private int[] numberImage;
    private ImageView imageView;
    private TextView textView;
    public MainAdapter(Context c, String[] numbersInWords,int[] numberImage){
        context = c;
        this.numberImage = numberImage;
        this.numbersInWords = numbersInWords;
    }
    @Override
    public int getCount() {
        return numbersInWords.length;
    }
    @Override
    public Object getItem(int position) {
        return null;
    }
    @Override
    public long getItemId(int position) {
        return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (layoutInflater==null) {
            layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }
        if (convertView==null){
            convertView = layoutInflater.inflate(R.layout.rowitem, null);
        }
        imageView = convertView.findViewById(R.id.imageView);
        textView = convertView.findViewById(R.id.textView);
        imageView.setImageResource(numberImage[position]);
        textView.setText(numbersInWords[position]);
        return convertView;
    }
}

ステップ6：rowitem.xmlの作成

新しいレイアウトリソースファイル「rowitem」を作成し、rowitem.xmlに以下のコードを記述します。このレイアウトは、GridViewの各セル（ImageViewとTextView）の見た目を定義するものです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24sp"
    android:gravity="center">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/imageView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:text="Numbers"
        android:textSize="24sp"
        android:layout_marginTop="8dp" />
</LinearLayout>

ステップ7：AndroidManifest.xmlの編集

androidManifest.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と動作確認

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続しているものとします。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「実行（Run）」アイコンをクリックしてください。接続したモバイルデバイスを選択すると、端末上にGridViewによるデフォルト画面が表示されます。