Androidアプリ開発でGridViewを追加する方法【初心者向け】

Androidアプリ開発でGUIコンポーネントの【GridView(グリッドビュー)】を追加する方法を初心者向けに解説した記事です。グリッドビューを使うと、列数を指定して要素をグリッド形式で表示させることができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、GridView(グリッドビュー)を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター!!Androidアプリで文字を一定の間隔で表示させたいんですけど、いい方法ってないですか〜?

田島悠介

それなら、GridViewを使うと良いよ!

 

GridViewとは

GridView(グリッドビュー)は、列数を指定して要素をグリッド形式で表示させることができるGUIコンポーネントです。たくさんの画像を一覧で表示するときなど、要素を見やすく表示できます。

今回はGridViewにテキストを表示させていきます。

 

事前準備

GridViewのセルに表示させるレイアウトを作成しておきます。「/res/layout」フォルダにcell_layout.xlmというファイルを新規で作成します。右側のツリー表示で「layout」ファイルを右クリックし、[New]-[Layout resource file]を選択します。

795316b92fc766b0181f6fef074f03fa3-620x314

表示されたダイアログボックスの[File name]に新規作成したいファイル名を入力し、[OK]ボタンをクリックします。

2b530e80c7d0de90885e285c5d7980633-620x372

これで新規ファイルが作成されました。
今回はレイアウトビューを使用せず、テキストボックスのみを配置します。レイアウトファイルだけでなく、xmlファイルを直接編集します。

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android" />

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

GridViewを配置する

activity_main.xmlに戻り、GridViewを配置していきます。

GridViewはレイアウトエディタのパレットの「コンポジット」から配置できます。

パレット内のGridViewを、配置したい場所までドラッグしましょう。

c8856789ec11ab8b1013037cef6929f93-620x600

これでGridViewの配置ができました。
xmlファイルを確認すると、次のようなコードが追加されています。

<GridView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/gridView"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

このままではアプリを実行してもデータは表示されません。そこで、データを反映させるためにjavaファイルを編集して、onCreateメゾットに、次のコードを追加します。

String[] list = {“おひつじ座”,”おうし座”,”ふたご座”,”かに座”,
    ”しし座”,”おとめ座”,”てんびん座”,”さそり座”,”いて座”,”やぎ座”,
    ”みずがめ座”,”うお座”};
ArrayAdapter adapter = new ArrayAdapter(
    getApplicationContext(), R.layout.cell_layout, list);
GridView gridView = (GridView) findViewById(R.id.gridView);
gridView.setAdapter(adapter);

ここでアプリを実行してみましょう。OnCreateメゾットに追加したデータがGridViewで表示されます。

3a4f695a458cb0ac0aceaa2eb13ac2dd3-620x632

 

GridViewをカスタマイズする

応用編として、プロパティの値を変更してGridViewをカスタマイズしてみましょう。
下記のプロパティがあります。

Horizontal Spacing:列間のスペースを指定
Vertical Spacing:行間のスペースを指定
Num Columns:一列に表示する要素の数を指定

設定したらアプリを実行して確認をします。
先ほどと表示が変わったことがわかると思います。

f96d9b4281f6d16b3c7589aed5a17be52-620x476

 

今回の記事は以上です。
ぜひ参考にしてみてください。

また、Androidアプリ開発でSpinnerを追加する方法など、Androidアプリ開発に役立つほかの記事も合わせてご覧ください。

 

大石ゆかり

星座を等間隔に表示できました♪

田島悠介

GridViewを使わないと一定の間隔に設置するのって難しいから、覚えておくと良いね♪

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。