モグラ叩きゲームで学ぶアンドロイドプログラミング (2/8)

前回に続いて、今回も画面周りを作っていきましょう。

1.画像を追加

以下の画像を res/drawable-hdpi にコピーします。

モグラを叩いたときの手のマーク：btn_push.png
モグラの出てくる穴：hole.png

2.ボタンの背景画像を作成

モグラが出てくる部分はボタンにします。
そのボタンの背景画像を作成します。

res/drawable-nodpi/bg_button.xml というファイルを作成し、以下のように記述します。
※drawable-nodpi というフォルダがない場合は新規作成します。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ボタンが押されている -->
    <!-- フォーカスされていない -->
    <item android:state_focused="false" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/btn_push">
        </item></layer-list>
    </item>

    <!-- ボタンが押されていない -->
    <!-- フォーカスされていない -->
    <item android:state_focused="false" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/hole">
        </item></layer-list>
    </item>

    <!-- ボタンが押されている -->
    <!-- フォーカスされた -->
    <item android:state_focused="true" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/btn_push">
        </item></layer-list>
    </item>

    <!-- ボタンが押されていない -->
    <!-- フォーカスされた -->
    <item android:state_focused="true" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/hole">
        </item></layer-list>
    </item>

</selector>

これは、ボタンが押されていないときは、モグラの穴を表示し、ボタンが押された時には手のマークを表示するように設定しています。

3.画面にボタンを配置する

縦に５つ、横に４つの格子状にボタンを配置します。
あと、上部にはスコアと、タイムの表示をします。
activity_main.xml を以下のように修正します。

<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:background="@drawable/bk_grass"
    tools:context="com.yojiokisoft.whacmole.app.MainActivity">

    <LinearLayout
        android:id="@+id/relativeLayout"
        android:layout_width="fill_parent"
        android:orientation="horizontal"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:layout_height="60dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Score:"
            android:textSize="25sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="100"
            android:textSize="30sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Time:"
            android:textSize="25sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="60"
            android:textSize="30sp" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="false"
        android:layout_below="@+id/relativeLayout">

        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true">

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button1A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button1D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button2A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button2D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button3A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button3D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button4A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button4D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1">

                <Button
                    android:id="@+id/Button5A"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5B"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5C"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

                <Button
                    android:id="@+id/Button5D"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/bg_button" />

            </TableRow>
        </TableLayout>
    </RelativeLayout>

</RelativeLayout>

Button の背景には先ほど作成した bg_button を指定しています。

4.実行してみる

スコアやタイムは固定だし、モグラも出て来ませんが、モグラ叩きっぽくなりました。
ボタンを押すと、押した部分が手のマークになります。

今日は、ここまで。次回に続く。