【Kotlin】AndroidでGridLayoutを画面サイズに合わせて表示する方法

この記事では、Kotlinを使用してAndroidアプリのGridLayoutを画面サイズに合わせて表示する方法を、実際のコード例とともにステップごとに解説します。

ステップ1：新規プロジェクトを作成する

まず、Android Studioで新しいプロジェクトを作成します。テンプレートは「Empty Activity」を選択し、使用言語としてKotlinを指定してください。

ステップ2：activity_main.xml にレイアウトを定義する

res/layout/activity_main.xml に以下のコードを追加します。ここでは4列構成のGridLayoutを画面中央に配置し、ボタンを16個並べています。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/tableGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button android:text="10" />
    <Button android:text="11" />
    <Button android:text="12" />
    <Button android:text="13" />
    <Button android:text="14" />
    <Button android:text="15" />
    <Button android:text="16" />
</GridLayout>

ステップ3：MainActivity.kt を実装する

src/MainActivity.kt に以下のコードを追加します。このコードでは、ImageViewを動的に生成しながら、行と列の位置を計算してGridLayoutの各セルへ配置していきます。

import android.os.Bundle
import android.view.Gravity
import android.widget.GridLayout
import android.widget.ImageView
import android.widget.TableLayout
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        val gridLayout = findViewById<GridLayout>(R.id.tableGrid)
        gridLayout.removeAllViews()
        val total = 12
        val column = 5
        val row = total / column
        gridLayout.columnCount = column
        gridLayout.rowCount = row + 1
        var i = 0
        var c = 0
        var r = 0
        while (i < total) {
            if (c == column) {
                c = 0
                r++
            }
            val oImageView = ImageView(this)
            oImageView.setImageResource(R.drawable.ic_launcher_background)
            val param = GridLayout.LayoutParams()
            param.height = TableLayout.LayoutParams.WRAP_CONTENT
            param.width = TableLayout.LayoutParams.WRAP_CONTENT
            param.rightMargin = 5
            param.topMargin = 5
            param.setGravity(Gravity.CENTER)
            param.columnSpec = GridLayout.spec(c)
            param.rowSpec = GridLayout.spec(r)
            oImageView.layoutParams = param
            gridLayout.addView(oImageView)
            i++
            c++
        }
    }
}

ステップ4：AndroidManifest.xml を設定する

androidManifest.xml に以下のコードを記述します。特別なパーミッションは不要ですが、メインアクティビティの宣言が必要です。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">
    <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からアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーにある実行アイコンをクリックします。デバイスの選択肢から自分のモバイル端末を選ぶと、端末側にアプリの初期画面が表示されます。