Androidでボタンを複数行にわたってプログラムで追加する方法

この記事では、Androidアプリにおいて、ボタンを複数行（グリッド状）に配置しながらレイアウトへプログラムで追加する方法を解説します。XMLでボタンを1つずつ定義する代わりに、Javaコードのループ処理を使うことで、効率よく動的にUIを生成できます。

手順1：プロジェクトを新規作成する

まずAndroid Studioで新しいプロジェクトを作成します。メニューから「File」⇒「New Project」を選択し、必要な項目を入力してプロジェクトを作成しましょう。

手順2：res/layout/activity_main.xml にコードを追加する

レイアウトファイルには、縦方向（vertical）のLinearLayoutのみを定義しておきます。ボタンは後ほどコードから動的に追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:orientation="vertical">
</LinearLayout>

手順3：src/MainActivity.java にコードを追加する

次に、アクティビティ側でLinearLayoutをネストさせ、外側のループで「行」を、内側のループで各行に並べる「ボタン」を生成します。

package app.com.sample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        for (int i = 0; i < 3; i++) {
            LinearLayout row = new LinearLayout(this);
            row.setLayoutParams(new LinearLayout.LayoutParams
              (LinearLayout.LayoutParams.WRAP_CONTENT,
               LinearLayout.LayoutParams.WRAP_CONTENT));
            for (int j = 0; j < 4; j++) {
                Button btnTag = new Button(this);
                btnTag.setLayoutParams(new LinearLayout.LayoutParams
                (LinearLayout.LayoutParams.WRAP_CONTENT,
                  LinearLayout.LayoutParams.MATCH_PARENT));
                btnTag.setText("Button " + (j + 1 + (i * 4 )));
                btnTag.setId(j + 1 + (i * 4));
                row.addView(btnTag);
            }
            layout.addView(row);
        }
        setContentView(layout);
    }
}

コードのポイント

このコードでは、外側のループが3行分のLinearLayout（横方向）を生成し、内側のループでそれぞれの行に4つのButtonを追加しています。setText()で「Button 1」〜「Button 12」という連番のラベルを設定し、setId()で重複しない一意のIDを割り当てているのがポイントです。これにより、後から特定のボタンをfindViewById()で参照することも可能になります。

補足： 新しいプロジェクトテンプレートでは、インポート文を androidx.appcompat.app.AppCompatActivity に置き換えてください。

手順4：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」アイコンをクリックしてください。表示された選択肢から接続したモバイルデバイスを選ぶと、端末の画面に以下のようにボタンが3行×4列で整然と並んで表示されます。

このように、ループ処理とネストしたLinearLayoutを組み合わせれば、XMLレイアウトを編集することなく、任意の数のボタンを柔軟に画面へ配置できます。行数や列数を変更したい場合は、for文の条件式の数値を調整するだけで対応可能です。