情報畑でつかまえてロゴ
本サイトは NTTテクノクロスが旬の IT をキーワードに
IT 部門が今知っておきたい最新テクノロジーに関する情報をお届けするサイトです

Android向けアプリケーションのユーザインタフェース

スマートフォン市場の拡大とともに、スマートフォン向けのアプリケーションも急増しています。無数のアプリケーションの中から、使い続けて貰うためには「ユーザインタフェース(UI)」の考慮が必要です。 本コラムでは、Android向けアプリケーション開発時のUIのポイントと、特に使いどころが難しいとされるRelativeLayoutについて紹介します。

はじめに

Androidをはじめとするスマートフォンが、市場でシェアを拡大するとともに、これらスマートフォン向けのアプリケーションも急速に数が増えています。無数のアプリケーションの中で埋もれることなく、ユーザに『使ってもらえる』アプリケーションを作るには、ユーザインタフェース(UI)の十分な考慮が必須と言えるでしょう。

今回は、Android向けアプリケーション開発のうち、UIに焦点を当て、開発時に押さえるべきポイントについてご紹介します。

まず、アプリケーションの画面を開発するには、以下2点の考慮が必要となります。

GUIコンポーネント ボタンやラベル、Webビューなど。
Androidでは、種類によって 『ウィジェット』『ビュー』 と呼ばれています。
GUIコンポーネントの並べ方 縦一列に配置、格子状に配置など。
Androidでは、 『レイアウト』 と呼ばれます。

画面を開発する場合、画面構成を検討後、どのGUIコンポーネント(ウィジェット・ビュー)を用いるか、同部品をどのように並べるか(レイアウト)を決定していくことになります。

本コラムでは、Androidアプリケーション開発時のUIのポイントの概要を紹介したのち、使いどころが難しいと見られることの多いRelativeLayoutについてご紹介します。

  

1.AndroidにおけるUI

1.1 ウィジェット・ビューの紹介

Androidで標準提供されている『ウィジェット』や『ビュー』と呼ばれるものを、いくつかを挙げてみます。

  • ラベル (TextView)
  • テキストボックス(EditText)
  • 補完機能付きテキストボックス(AutoCompleteTextView)
  • 画像(ImageView)
  • ボタン(Button)
  • チェックボックス(CheckBox)
  • ラジオボタン(RadioButton)
  • プログレスバー(ProgressBar)
  • ウェブビュー (WebView)
  • ビデオビュー(VideoView)

基本的にこれらを組み合わせて画面を作っていきます。標準提供されていないGUIコンポーネントが必要な場合は、既存部品のカスタマイズ、もしくは、新規に開発することになります。また、ゲームの画面を作成する場合のように、既存部品を使うことなく、グラフィックス系APIを駆使して画面を開発する場合もあります。

1.2 レイアウトの紹介

続いて、Androidで提供されている代表的なレイアウトを挙げてみます。

レイアウト内容
LinearLayout 垂直、もしくは、水平方向に並べる。
TableLayout 格子上に配置する。(HTMLのテーブル構造)
FrameLayout 1つのGUIコンポーネントのみを配置する。
複数の画面を重ね合わせて表示する場合などに利用する。
RelativeLayout 画面もしくは特定のGUIコンポーネントを基準として、相対的に位置を指定する。

これらのレイアウトを利用した画面例がこちらです。

図1-1 LinearLayout利用例
< 図1-1 LinearLayout利用例 >

画像1つとボタン3つを垂直方向に並べています。
図1-2 TableLayout利用例
< 図1-2 TableLayout利用例 >

ラベルおよびテキストボックスをテーブル形式(2列×4行)で並べています。
図1-3 FrameLayout利用例
< 図1-3 FrameLayout利用例 >

画像の上に、ラベル(年月日)を重ね合わせています。
図1-4 RelativeLayout利用例
< 図1-4 RelativeLayout利用例 >

中央のボタンを基準として、その上下左右に1つずつボタンを配置しています。

これらの中から、図1-1の画面を作成する場合を例にとって、具体的な構成および実装方法を詳述します。この場合の構成は、図1-5のようにImageView(画像)1つとButton(ボタン)3つをLinearLayoutにより配置します。

図1-5 LinearLayout利用例の画面構造

< 図1-5 LinearLayout利用例の画面構造 >

上記画面を実装する方法として、XMLファイルで定義する方式とJavaソースコードで定義する方式の2つがありますが、ここでは前者により上図を定義した、XMLファイルをとりあげます。 ( )

  • 【方式1】XMLファイルで定義する方式
  • 【方式2】Javaソースコードで定義する方式

< 図1-6 LinearLayout利用例のXMLファイル >

※ 本XMLファイルでは、分かり易くするためボタン文字列を直接記述しています。一般的に、文字列は直接XMLファイルに埋め込まずに、別のリソース管理用のファイルに記述しておくことが推奨されています。

XMLファイルのからの間にImageView1つとButton3つを記述しています。このように記述しておくことで、これらのGUIコンポーネントに、LinearLayoutが適用され、垂直方向(android:orientation="vertical")に並ぶことになります。

上記の例では、1つのレイアウトのみを利用しましたが、1画面につき1つのレイアウトしか使えないという制約はありません。複数のレイアウトを組み合わせて1つの画面を構成することも可能です。実際に多くのアプリケーションでは、複数のレイアウトを組み合わせて画面構成が行われています。

さて、一見ややこしいだけで使いどころがないようにみえるRelativeLayoutについて、その真の力を紹介していきます。

2.RelativeLayoutの使い方

2.1 RelativeLayoutが有効なケース

様々な種類のレイアウトを紹介してきましたが、ここでは、その中でも敬遠されがちなRelativeLayoutについて、詳しく見ていきましょう。

お気づきの方も多いと思いますが、RelativeLayoutを知らなくても、LinearLayoutやFrameLayoutの組み合わせで、大体のレイアウトは実現できてしまいます。そして、どちらのレイアウトも非常にシンプルな考え方で実装できるため、頭に思い浮かんだレイアウトを、ほぼそのまま実装(XML)に落とし込むことができます。

一方、RelativeLayoutを利用する場合には、なかなかそのようにはいきません。実装に落とし込む前に、周りのUI部品との相対位置関係をどのように指定するべきか、よくよく検討しておく必要があるためです。

ここまで読んで「わざわざRelativeLayoutを理解する意味がない」と思われた方もいらっしゃるかも知れません。ところが、 任意の位置に移動する可能性のあるUI部品(View)を配置しようとするときには、RelativeLayoutが威力を発揮する のです。

2.2 RelativeLayoutを使ったアイコン移動

図 2-1 ★印が自由に移動できるユーザインタフェース

例えば、水平に並んだ5つの正方形の上を、アイコン(★印)が自由に移動できるようなユーザインタフェースを考えてみます。(図2-1)

LinearLayoutとFrameLayoutの組み合わせで実現する場合、以下のような形になります。

  • それぞれの正方形をFrameLayoutとして実装する。
  • ★印がない正方形は、FrameLayout内部を正方形のみで構成する。
  • ★印がある正方形は、FrameLayout内部を正方形と★印の2つのUI部品で構成する。
図 2-2 LinerarLayoutとFrameLayoutを利用した、アイコン移動のイメージ

この状態で★印を移動させるためには、以下のような手順が必要になるでしょう。(図2-2)

  • 移動元のFrameLayoutから★印を削除する。
  • 移動先のFrameLayoutに★印を追加する。
図2-3 RelativeLayoutを利用した、アイコン移動のイメージ

一方、RelativeLayoutでは、図1-4のように「あるUI部品の隣に別のUI部品を配置する」という指定の他に、 「あるUI部品の真上に、重ね合わせるかのように、別のUI部品を配置する 」という指定ができます。
このため、RelativeLayoutで実現する場合、★印のレイアウトパラメータの設定を更新し、移動先の正方形の真上に位置するように配置を指示するだけで、移動が実現できてしまいます。(図2-3)

上記の実装方法は一例です。
LinearLayoutとFrameLayoutの組み合わせであっても、「全ての正方形に★印を予め配置しておき、1つの★印以外は不可視(View.INVISIBLE)にしておく」という方法も考えられ、★印の移動は、★印の可視性を変更するだけで実現できます。しかし、以下の課題も考慮しなければならず、RelativeLayoutを利用した時のシンプルさには敵いません。

■ RelativeLayoutを利用しない場合の課題
  • 正方形の数がもっと多い場合の対処。
    全ての部品に(不可視の)★印を予め配置しておくのは非効率的である。
  • ★印とは別のアイコン(△印)を追加する場合の対処。
    全ての部品に★印と△印の両方を配置しなければならなくなり、さらにレイアウトが複雑化してしまう。

以降では、RelativeLayoutで指定可能なレイアウトパラメータの詳細を説明した後に、具体的なコード例と共に、RelativeLayoutの実践的な使い方についてご紹介します。

3.RelativeLayoutでUI部品を配置してみる

3.RelativeLayoutでUI部品を配置してみる
3.1 他のUI部品に隣接するように配置する
3.2 他のUI部品と端を揃えるように配置する
3.3 親となるRelativeLayoutとの相対位置を指定して配置する

RelativeLayoutは、他のUI部品との相対位置関係をレイアウトパラメータとして指定することで、UI部品を配置していきます。配置指定の方法は、以下のいずれかにカテゴリ分けできます。

■他のUI部品に隣接するように配置する
同一のRelativeLayout内の別のUI部品(=Viewのツリー構造では兄弟にあたる)と隣接するように配置を指定します。
(例: ある部品の右隣に配置せよ)
■他のUI部品と端を揃えるように配置する
同一のRelativeLayout内の別のUI部品と、ある一辺が揃うように配置を指定します。
(例: ある部品と右揃えで配置せよ)
■親となるRelativeLayoutとの相対位置を指定して配置する
(例: 親の上辺と接するように配置せよ)

これらの条件は、1つのUI部品に対して複数個指定することができます(その場合、指定された全ての条件を満たすようにUI部品が配置されます)。通常は、水平方向の位置と垂直方向の位置の両方を指定しないと配置が確定しませんから、1つのUI部品に対して2つの条件を指定することが一般的です。

それでは、それぞれのカテゴリについて、もう少し詳しく見ていきましょう。

3.1 他のUI部品に隣接するように配置する

指定されたUI部品の隣に、自分自身を接するように配置したい場合に利用します。RelativeLayoutの中央に「anchor」と表示するボタン(IDは"@id/anchor")を配置するレイアウトXMLを、以下に示します。

< 図 3-1 RelativeLayoutの中央にボタンを配置するコード >

このanchorの右に、「this」と表示するボタンを配置したい場合には、 【1】 の部分に以下のようにボタンを配置します。

< 図 3-2 anchorボタンの右に「this」と表示するボタンを配置する例(XML) >

また、XMLではなく、Javaコードでも配置を指定することができます。この場合は、RelativeLayout.LayoutParamsクラスのaddRule()メソッドを利用します。

< 図3-3 anchorボタンの右に「this」と表示するボタンを配置する例(Java) >

このように配置した場合の画面を図3-4に示します。この画面を見れば分かるように「this」ボタンと「anchor」ボタンは隣り合っていません。android:layout_toRightOfパラメータは、あくまでも水平方向の位置しか指定していないからです。「anchor」の右隣に接するように配置するには、垂直方向の位置を指定するパラメータも同時に指定しなければなりません。そのような例は4章で紹介します。

図 3-4 android:layout_toRightOf属性で配置した例

< 図 3-4 android:layout_toRightOf属性で配置した例 >

このカテゴリに属する、あるUI部品の上隣、下隣、右隣、左隣に接するように配置する方法を、まとめました。

< 表 3-1 他のUI部品に隣接するように配置を指定する方法 >

配置XMLでの指定方法
Javaでの指定方法
(RelativeLayout.LayoutParamsクラス)
上隣 android:layout_above=" id "
addRule(RelativeLayout.ABOVE, id )
下隣 android:layout_below=" id "
addRule(RelativeLayout.BELOW, id )
左隣 android:layout_toLeftOf=" id "
addRule(RelativeLayout.LEFT_OF, id )
右隣 android:layout_toRightOf=" id "
addRule(RelativeLayout.RIGHT_OF, id )

3.2 他のUI部品と端を揃えるように配置する

指定されたUI部品の端と、自分自身の端を揃えて配置したい場合に利用します。たとえば、android:layout_alignRight属性に"@id/anchor"を指定した場合は、図3-5のような画面になります。

図3-5 android:layout_alignRight属性で配置した例

< 図3-5 android:layout_alignRight属性で配置した例 >

このカテゴリに属する、あるUI部品と上端・下端・左端・右端揃えなどで配置するには、下記のように記述します。

< 表 3-2 他のUI部品と端を揃えるように配置を指定する方法 >

配置XMLでの指定方法
Javaでの指定方法
(RelativeLayout.LayoutParamsクラス)
上揃え android:layout_alignTop=" id "
addRule(RelativeLayout.ALIGN_TOP, id )
下揃え android:layout_alignBottom=" id "
addRule(RelativeLayout.ALIGN_BOTTOM, id )
左揃え android:layout_alignLeft=" id "
addRule(RelativeLayout.ALIGN_LEFT, id )
右揃え android:layout_alignRight=" id "
addRule(RelativeLayout.ALIGN_RIGHT, id )
テキストの
ベースラインを
揃えて配置
android:layout_alignBaseline=" id "
addRule(RelativeLayout.ALIGN_BASELINE, id )

3.3 親となるRelativeLayoutとの相対位置を指定して配置する

いままでの指定方法を利用することで、RelativeLayout内の他のUI部品との相対位置関係は指定できるようになりました。では、最初に配置するUI部品については、どのように配置するのでしょうか。

この場合は、親となるRelativeLayoutとの相対位置を指定して配置することになります。実は、 図3-1 で「anchor」のボタン配置に使われているパラメータandroid:layout_centerInParentも、そのような属性のひとつです。 図 3-4 などの画面で「anchor」ボタンがRelativeLayoutの領域(背景が黄色い部分)の中央に表示されているのは、このパラメータ指定によるものです。
たとえば、この属性の代わりにandroid:layout_alignParentTop属性を指定した場合(図3-6)は、「anchor」ボタンがRelativeLayoutの領域の上辺に接するように配置されることになります。

< 図 3-6 android:layout_alignParentTopで「anchor」の位置を指定した例 >

図 3-7 android:layout_alignParentTop属性で配置した画面イメージ

< 図 3-7 android:layout_alignParentTop属性で配置した画面イメージ >

このカテゴリに属する、親となるRelativeLayoutとの相対位置を指定して配置する方法は以下のとおりです。

< 表 3-3 親となるRelativeLayoutとの相対位置を指定する方法 >

配置
(親との相対位置)
XMLでの指定方法
Javaでの指定方法
(RelativeLayout.LayoutParamsクラス)
親の上辺 android:layout_alignParentTop="true"
addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE)
親の下辺 android:layout_alignParentBottom="true"
addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE)
親の左辺 android:layout_alignParentLeft="true"
addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE)
親の右辺 android:layout_alignParentRight="true"
addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE)
親の中央
(水平方向)
android:layout_centerHorizontal="true"
addRule(RelativeLayout.CENTER_HORIZONTAL RelativeLayout.TRUE)
親の中央
(垂直方向)
android:layout_centerVertical="true"
addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE)
親の中央
(水平・垂直方向)
android:layout_centerInParent="true"
addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE)

ここまでで、RelativeLayoutを利用する場合におけるUI部品の配置方法について、ひととおり見てきました。4章では、実際にRelativeLayoutを利用した実装を見ていきます。

4. 実践! RelativeLayout

4. 実践! RelativeLayout
4.1 マスの配置
4.2 ドロイドくんアイコンの配置
4.3 ドロイドくんアイコンの移動
最後に

本章では、以下のようなGUIを例にして、実際にRelativeLayoutを利用した実装を見ていきます。(図 4-1)。

  • 要件-1:画面中央に4×4のマスが並べられている。1マスの幅は70dip×90dipとする
  • 要件-2:アプリ起動直後には、ドロイドくん (*1) のアイコンが左上のマスに表示されている
  • 要件-3:任意の位置のマスをタップすると、ドロイドくんのアイコンがその位置に移動する
図 4-1 本章で実装する画面

< 図 4-1 本章で実装する画面 >

4.1 マスの配置

はじめに、要件-1を実現するために、4×4個のマスを画面中央に並べるところを実装してみましょう。以降、説明を簡単にするために、第2行第3列のマスであれば「i23」のように、各マスに名前を付けることにします(図 4-2)。また、ここで付けた名前は、そのままViewのIDとしても用いることにします(i23マスのIDは"@id/i23"とします)。

 図 4-2 各マスの名前

< 図 4-2 各マスの名前 >

(1)中央に1マス配置してみる

最初のステップとして、1つのマスを画面中央に配置する方法を考えてみます(このマスはcenterマスと名付けます)。3.3章で紹介したandroid:layout_centerInParent属性を使えば簡単に実現できそうです。
この配置イメージを図4-3に、XMLコードを図 4-4に、それぞれ示します。ここで、1つのマスは70dip×90dipの画像(@drawable/one_element)を指定したImageViewとして実現しています。

図 4-3 centerマスを画面中央に配置してみる

< 図 4-3 centerマスを画面中央に配置してみる >

< 図 4-4 centerマスを中央に配置するXMLコード >

(2)centerマスの周囲に並べてみる

次のステップとして、centerマス左上にi11マスを配置してみます(図 4-5)。

図 4-5 centerマスの左上にi11マスを配置

< 図 4-5 centerマスの左上にi11マスを配置 >

2つのマスの垂直方向の位置関係に着目すると、centerマスの上に隣接してi11マスが存在すれば良いことがわかります。すなわち、XML属性として

が必要なことがわかります。同様に、水平方向の位置関係に着目すると、centerマスの左にi11マスが存在すれば良いため、さらに

というXML属性が有れば良いことになります。 図 4-4 にi11マスを追加したXMLコードを図 4-6に示します。

< 図 4-6 centerマスの左上にi11マスを追加したXMLコード >

同様な考え方で、centerマスの右上にi12マス、左下にi21マス、右下にi22マスを、それぞれ配置することができます。ここまでの配置イメージを図 4-7に、XMLコードを図 4-8に、それぞれ示します。

XML属性のうちabove/below/toLeftOf/toRightOfの部分が少しずつ異なる点がポイントです。なお、各マスのandroid:layout_width属性、android:layout_height属性、android:src属性は同一であるため、以降のXMLコードでは、当該部分は割愛します。

図 4-7 centerマスの周囲に4マスを配置る

< 図 4-7 centerマスの周囲に4マスを配置 >

< 図 4-8 centerマスの周囲に4マス配置したXMLコード >

(3)さらに周囲に並べてみる

次に、i11マスの左上、上、左に、それぞれi00マス、i01マス、i10マスを配置してみます(図 4-9)

図 4-9 i11マスの周囲に3マス配置したイメージ

< 図 4-9 i11マスの周囲に3マス配置したイメージ >

i00マスとi11マスの位置関係は、i11マスとcenterマスの位置関係と同じですから、i11マスの配置と同じ考え方で、XML属性は

と定義できます。
i01マスは、水平方向にはcenterマスの左に隣接しており、垂直方向ではi11マスの上に隣接していますので、XML属性は

と定義できます。
i10マスは、水平方向にはi11マスの左に隣接しており、垂直方向ではcenterマスの上に隣接していますので、XML属性は

と定義できます。ここまで定義したXMLコードを図 4-10に示します。

< 図 4-10 i11マスの周囲に3マス配置したXMLコード >

同様な考え方で、i12マス、i21マス、i22マスの周囲にも、それぞれ3マスずつ配置することができます。ここまでの配置イメージを図 4-11に、XMLコードを図 4-12に、それぞれ示します。

図 4-11 残りのマスを配置

< 図 4-11 残りのマスを配置 >

< 図 4-12 残りのマスを配置したXMLコード >

(4)仕上げ

ここまでで、マスの配置は完了しましたが、centerマスがあるため、centerマスの延長線上に空白ができてしまっています(i01マスとi02マスの間など)。この空白を取り除くために、centerマスの大きさをゼロとします(図 4-13)。

図4-13 centerマスの大きさをゼロにする

< 図 4-13 centerマスの大きさをゼロにする >

centerマスの大きさをゼロとすることにより、4×4個のマスが全て隣接させることができ、要件-1のレイアウトを満たすことができます。もはや、大きさゼロとなってしまったcenterマスがImageViewである必要はありませんから、基底クラスのViewに置き換えてしまいましょう(図 4-14)。これでマスの配置は完了です(図 4-15)。

< 図 4-14 centerマスの大きさをゼロにしたXMLコード >

図 4-15 マスを並べた画面イメージ

< 図 4-15 マスを並べた画面イメージ >

4.2 ドロイドくんアイコンの配置

次に、 要件-2 を実現するために、ドロイドくんのアイコン画像を、i00マスの真上に配置してみます。

RelativeLayoutを使って、あるUI部品に重ねて別のUI部品を配置するには、 3.2 で説明した属性を用いて

と、両方の属性に同じ部品を指定することで実現できます。この指定方法では、ある部品の左上隅が一致するように重ね合わせることになります。属性の組み合わせを変えると、重ね合わせる時に一致させる箇所を変更することができます。(表4-1)

< 表 4-1 部品を重ねあわせる場合の属性指定パターン >

左上隅が一致 android:layout_alignTop
android:layout_alignLeft
右上隅が一致 android:layout_alignTop
android:layout_alignRight
左下隅が一致 android:layout_alignBottom
android:layout_alignLeft
右下隅が一致 android:layout_alignBottom
android:layout_alignRight

今回のケースでは、マスの大きさと、ドロイドくんアイコンの大きさが同じになるように調整しているため (*2) 、どの組み合わせでもぴったり重ね合わせることができますが、ここでは左上隅が一致させるようにします(図 4-16)。このコードを 図4-14 の、 【2】 の箇所に挿入することで、レイアウトXMLは完成です。このレイアウトを画面表示したものが 図 4-1 となります。

< 図 4-16 ドロイドくんアイコンをi00の真上に配置するコード >

なお、RelativeLayoutの仕組みでは、UI部品の重なり合う順番(いわゆるzオーダー)を明示的に指定することができません (*3) 。公式ドキュメントには明示されていないものの、後から追加されたUI部品(XMLのテキスト上、より後方に出現するUI部品)が、より前面に表示されるようになっています。重なりのあるレイアウトを定義する時には、部品の定義順序にも注意を払う必要があります。

4.3 ドロイドくんアイコンの移動

最後に、 要件-3 の実現のために、タップイベント発生時にドロイドくんアイコンを移動する処理を実装していきます。

ドロイドくんアイコンの移動は、レイアウトパラメータを変更するだけで実現できるため、イベントリスナの実装は非常にシンプルです(図 4-17)。

< 図 4-17 マスがタップされた場合のイベントリスナ実装 >

具体的な手順を見ていきましょう。

  • ドロイドくんアイコンを表すViewをfindViewById()メソッドで取得します(1)
  • 新規にレイアウトパラメータを生成し、android:layout_width属性、 android_layout_height属性に対応する値を設定します(2,3,4)
  • 続けて、android:layout_alignTop属性、android:layout_alignLeft属性について、新しくタップされたViewのIDを指定します(5,6)
  • 最後に、各属性値を設定したレイアウトパラメータを、ドロイドくんアイコンを表すViewに設定します(7)

最後に、上記で定義したリスナを、各UI部品に設定する処理などが必要です。それらの処理が実装されたActivity#onCreate()メソッドの内容を図 4-18に示します。なお、ActivityにOnClickListenerを実装している前提のコードとなっています。そのため、setOnClickListenerメソッドの引数にはthisを指定しています。

< 図 4-18 Activity#onCreate()メソッドの実装 >

これで、要件を満たすアプリケーションが完成しました。このように書かれたレイアウトであれば、画面サイズにかかわらず、意図通り、画面中央に4×4マスを表示することができます。 (*4)

最後に

以上、Androidアプリケーションのユーザインタフェースの概要と、その中で特に理解が難しいと言われているRelativeLayoutの利用方法について説明しました。今回実装例に挙げたようなレイアウトは

  • アイコンなどを格子状に並べてドラッグ&ドロップで移動する画面を実装する
  • リバーシや将棋といったボードゲームのUIを実装する

など、様々な画面で応用可能ではないかと思います。 本コラムが、皆さんの、より洗練されたGUI設計の一助になれば幸いです。

【用語解説】

*1: ドロイドくん
ドロイドくんのアイコン画像は、 Googleが作成、提供している コンテンツをベースに複製したもので、 クリエイティブ・コモンズの表示 3.0 ライセンス に記載の条件に従って使用しています。
*2: マスの大きさと、ドロイドくんアイコンの大きさが同じになるように調整している
図4-16の中(1)、(2)の箇所がそれにあたりますが、@dimen/....の具体的なXML定義は割愛します。
*3: UI部品の重なり合う順番(いわゆるzオーダー)を明示的に指定することができません
View#bringToFront()メソッドを使うことで、後から特定の部品を最前面に持ってくることは可能です。
*4: 意図通り、画面中央に4×4マスを表示することができます
4×4マスの大きさより小さい画面では意図通りの表示にはなりません。
連載シリーズ
テクノロジーコラム
著者プロフィール
神原 健一
神原 健一
新技術開発を好み、Androidは正式版が出る前から試用するなど、公私にわたってモバイルの世界に没頭。 プライベートで開発した「セカイフォン」で、 Multi-Screen UX Competition優秀賞受賞。MWC(バルセロナ)/IFA(ベルリン)/CES(ラスベガス)へのプロダクト出展、 国内外(デブサミやDroidconなど)のセミナー講演や書籍執筆(単著・共著含め5冊)などの活動も行っている。NTTテクノクロスきってのモバイル技術者。 プライベートでは旅行が好きで、現地の外国人にセカイフォンをデモすることが密かな楽しみ。