【androidアプリ開発　No.13】　スライドパズルを作ろう

はい、では前回の続きでスライドパズルを作成してきます。

今回はスライドパズルのレイアウトを作成してきます。

レイアウト作成

それでは先にスライドパズルのイメージをお見せいたします。

それっぽくは見えるでしょうか。

いつも通りres/layout/mail.xmlを修正していくのですが、
中身を少し解説しながら進んでいこうと思います。

まず、今回新しく「RelativeLayout」というレイヤーを使用します。
「RelativeLayout」は子要素の位置を相対的に指定できるようです。

今回はパズルを中央に表示させるために使用しています。

また、「TableLayout」というレイヤーも使用しますが、これはHTMLのTABLEタグのようなものです。

ではさっそくmain.xmlを見ていきましょう。

res/layout/mail.xml

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
      <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
          <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="left">
              <!-- タイムラベル -->
              <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Time ： "></TextView>
              <!-- 経過した時間の表示 -->
              <Chronometer
                android:id="@+id/chronometer1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></Chronometer>
          </LinearLayout>
          <!-- ３×３のスライドパズル -->
          <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
              <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                  <ImageButton android:id="@+id/imageButton1"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton android:id="@+id/imageButton2"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton android:id="@+id/imageButton3"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
              </TableRow>
              <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                  <ImageButton
                    android:id="@+id/imageButton4"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton
                    android:id="@+id/imageButton5"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton
                    android:id="@+id/imageButton6"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
              </TableRow>
              <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                  <ImageButton
                    android:id="@+id/imageButton7"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton
                    android:id="@+id/imageButton8"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
                  <ImageButton
                    android:id="@+id/imageButton9"
                    android:layout_width="120px"
                    android:layout_height="120px"></ImageButton>
              </TableRow>
          </TableLayout>
          <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
              <!-- スタートボタン -->
              <Button
                android:text="スタート"
                android:id="@+id/button1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"></Button>
          </LinearLayout>
      </LinearLayout>
  </RelativeLayout>

layout

前回あまり説明していませんでしたが、「layout_width」と「layout_height」についても簡単に説明します。
名前を見ただけである程度予測はつくと思います。

「layout_width」は幅を「layout_height」は高さを設定します。
値に「fill_parent」を設定すると可能な限り大きいサイズになります。
値に「wrap_content」を設定した場合は、内容の大きさに合わせたサイズになります。

また、120pxのように直接大きさを指定することも可能です。

orientation

LinearLayoutで使用している「orientation」は、
子要素の並べ方を指定しています。

orientation属性に「vertical」を設定すると子要素を縦に並べることが出来ます。
また、orientation属性に「horizontal 」を設定すると子要素を横に並べることが出来ます。

今回の例では１番最初のLinearLayoutで設定しているorientation属性が「vertical」になっている為、
経過時間、パズルのピース、ボタンのレイアウトが縦並びになっています。
また２番目に出てくるLinearLayoutのorientation属性が「horizontal」に設定されているため、
Timeと書かれているラベルと経過時間（00：00と表示されている項目）が横並びに表示されます。

今回は主にレイアウト面に関して書いていきました。
次回以降は画像の設定をしていきたいと思います。

※予断ですがAndroid版のなめこ栽培のアプリが発表されましたね。
まだいつマーケットに乗るか未定のようですが、楽しみですね。