Chapter02: RelativeLayoutの特徴

次はRelativeLayoutの説明をします。
RelativeLayoutとは、相対レイアウト用のレイアウトです。子要素を親要素であるRelativeLayoutから相対的に配置することができます。また、子要素同士も、id指定で配置することができます。

では、サンプルを見てみましょう。
サンプルアプリで、メニューを押して、chapter02を選択してください。以下のような画面になります。

 

この画面は、RelativeLayoutの下に、各ポジションを表すTextViewを配置しています。LinearLayoutと違って、自由度が大きいことがわかるかと思います。

赤枠で囲まれているのが、親要素のRelativeLayoutに対して相対的な配置です。

青枠で囲まれているのが、子要素の「中央」というTextViewに対して相対的な配置です。

コードレビュー

では、レイアウトのソースコードを見てみましょう。
Sample01プロジェクトの/res/layout/chapter02.xmlを開いてください。

注目するべきところは、子要素であるTextViewの以下の属性です。

• 親要素に対する配置(指定値 = true, false)
  • layout_alignParentTop・・・親要素の上部に要素を配置する
  • layout_alignParentBogttom・・・親要素の下部に要素を配置する
  • layout_alignParentLeft・・・親要素の左部に要素を配置する
  • layout_alignParentRight・・・親要素の右部に要素を配置する
  • layout_centerInParent・・・親要素の縦横の中央に要素を配置する
  • layout_centerVertical・・・親要素の縦方向の中央に要素を配置する
  • layout_centerHorizontal・・・親要素の横方向の中央に要素を配置する
• 子要素同士に対する配置(指定値 = 要素のid)
  
  • layout_above・・・指定された要素の上に配置する
  • layout_below・・・指定された要素の下に配置する
  • layout_toLeftOf・・・指定された要素の左に配置する
  • layout_toRightOf・・・指定された要素の右に配置する

子要素同士で指定しているidは、中央に配置した要素@id/CenterInParentに対してです。 属性名にalignとかcenterとか出てくるので、Webデザイナーの人でも直観的にわかりやすいかなと思います。

<?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">
    <!-- 
        RelativeLayoutは相対レイアウトです。
        RelativeLayoutの下のウィジェット類は、親のRelativeLayoutに対して相対的に配置されます。
        ■がそれです。
        ■   ■
        
          ■
          
        ■   ■
      -->
    <!-- 親要素に対して左上に配置 -->
    <TextView
        android:id="@+id/LeftTop"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_left_top" />
    <!-- 親要素に対して左下に配置 -->
    <TextView
        android:id="@+id/LeftBottom"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_left_bottom" />
    <!-- 親要素に対して右上に配置 -->
    <TextView
        android:id="@+id/RightTop"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_right_top" />
    <!-- 親要素に対して右下に配置 -->
    <TextView
        android:id="@+id/RightBottom"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_right_bottom" />
    <!-- 親要素に対して中央に配置 -->
    <TextView
        android:id="@+id/CenterInParent"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_center_in_parent" />
    <!-- ここから、中央の要素に対して相対配置します。□がそれです。
         ■   ■
           □
          □■□
           □
         ■   ■
     -->
    <!-- 上
        layout_aboveで指定されたIDの要素の上に配置されます。
        横方向で中央揃えするために、layout_centerHorizontalをtrueにしてます。
     -->
    <TextView
        android:id="@+id/above"
        android:layout_above="@id/CenterInParent"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_above" />
    <!-- 下
        layout_belowで指定されたIDの要素の下に配置されます。
        横方向で中央揃えするために、layout_centerHorizontalをtrueにしてます。
     -->
    <TextView
        android:id="@+id/below"
        android:layout_below="@id/CenterInParent"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_below" />
    <!-- 左
        layout_toLeftOfで指定されたIDの要素の左に配置されます。
        縦方向で中央揃えするために、layout_centerVerticalをtrueにしてます。
    -->
    <TextView
        android:id="@+id/toLeftOf"
        android:layout_toLeftOf="@id/CenterInParent"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_to_left_of" />
    <!-- 右
        layout_toRightOfで指定されたIDの要素の右に配置されます。
        縦方向で中央揃えするために、layout_centerVerticalをtrueにしてます。
    -->
    <TextView
        android:id="@+id/toRightOf"
        android:layout_toRightOf="@id/CenterInParent"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter02_to_right_of" />
</RelativeLayout>

RelativeLayoutが便利なところは、中央に要素を置くのが簡単なところです。画像を中央に配置するなど、layout_centerInParentを指定するだけでよいので、画像を使った表示の場合などによく使ってます。
LinearLayoutに比べると、思った通りに要素の配置が行いやすいはずです。そのかわり、XMLでの要素指定が複雑化する場合があるので、把握するのが大変になったりします。

全てをRelativeLayoutで配置するのではなく、LinearLayoutとRelativeLayoutを上手に使って配置するのがよいでしょう。

Chapter01：LinearLayoutの特徴

では、ようやくレイアウトXMLの説明に入ります。
今回は、サンプルアプリのChapter01でLinearLayoutの説明をします。

まだプロジェクトをインポートしていない場合は、こちらの記事を先に読んでください。

先に説明しておきますが、Androidのレイアウト要素には、以下の種類があります。

• LinearLayout(リニアレイアウト)
• RelativeLayout(リレーティブレイアウト)
• FrameLayout(フレームレイアウト)
• TableLayout(テーブルレイアウト)
• AbsoluteLayout(現在は非推奨)

5種類ありますが、ほとんどの場合、上の3種類のみを使います。特に、LinearLayoutとRelativeLayoutを多用するので、この講座（基本編）では、この2つに絞って説明します。

そもそもLayoutって何？

Layoutは、HTML的に平たくいうと、divタグみたいなものです。入れ物です。TableLayoutはtableタグみたいなものですが。しかし、名前が違うのでそれぞれ特徴があります。しかしここでは言及しません。

LinearLayoutって何？

LinearLayoutは、もっとも素直なレイアウトで、左上詰めで子要素を配置するレイアウトです。一番多用するレイアウトです。子要素を配置する方向（縦か横か）を決めることができます。
Chapter01の画面は以下のようになっています。

この画面はLinearLayoutというレイアウトとTextViewというウィジェットで構成されています。パッと見では、全部縦方向に配置されているようにみえるかもしれませんので、視覚的に表してみます。青い枠のLinearLayoutの中に、赤い枠のLinearLayoutが入っています。赤い枠のほうは、横方向にレイアウトを配置しています。

コードレビュー

では、レイアウトのソースコードを見てみましょう。
Sample01プロジェクトの、/res/layout/chapter01.xml を開いて下さい。

注目するべきところは、LinearLayoutという要素の、android:orientationという属性です。それ以外は単にテキストを表示しているだけなので、まぁそんなものだと思っておいてください。

ちなみに、layout_widthとlayout_heightは要素の横幅、縦幅を表します。fill_parentだと親要素分全部使います。つまり、width: 100%;です。wrap_contentは、必要な分だけ使うという指定です。数値でも指定可能ですが、ひとまずはこの2つを押さえましょう。また、match_parentというのもあります。2.2以降では、fill_parentではなく、match_parentを使いますが、Xperiaがある限りは、fill_parentを使わざるをえません…。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- ここから垂直方向 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_linearlayout_vertical" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_2" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_3" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_linearlayout_horizontal" />
    <!-- ここから水平方向 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_4" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_5" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_6" />
    </LinearLayout>
    <!-- ここまで水平方向 -->
    <!-- また垂直方向 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_7" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_8" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_9" />
</LinearLayout>

orientation属性は、子要素の配置方向を決定します。

• vertical・・・縦方向
• horizontal・・・横方向

途中に存在するLinearLayoutも、親要素のLinearLayoutの子要素なので、あくまで縦方向に配置される要素として置いてあります。しかし、その中身は横方向に配置されています。

単純な例でLinearLayoutを紹介しましたが、複雑なレイアウトも、ほとんどはLinearLayoutを入れ子にしたレイアウトです。縦方向の途中の要素で横方向のレイアウトが必要になったら、LinearLayoutを追加して、orientationをhorizontalに設定して配置。それを抜けたらまた縦方向。もし横方向内で縦のレイアウトが使いたい場合は、さらにLinearLayoutを入れ子にして…という感じです。

divタグの中にdivタグを入れて、さらにdivタグを入れて…というのに似ています。

LinearLayoutの特徴が分かっていただけましたでしょうか？
次回は、RelativeLayoutの特徴を説明します。

サンプルアプリの使い方について

さて、ようやくレイアウトの話になっていきます。まだサンプルプロジェクトをEclipseに用意してない人は、サンプルプロジェクトをElipseにインポートしておいてください。以下のURLで説明しています。

Eclipseでプロジェクトをインポートする(zipのまま)

インポートできているものとして話を進めます。

サンプルアプリは、特に処理の実装はしておらず、あくまでもレイアウトをXMLでやるだけにしています。しかしたくさんのプロジェクトを作って説明するのはインポートする手間も増えて大変なので、ある程度の量を1つのプロジェクトにまとめています（今後はプロジェクト増える予定ですが）。

では起動してみましょう。プロジェクト上で右クリックして、実行 > Androidアプリケーションを選択します。

 今回はエミュレータを起動させました。メニューを押してみましょう。

chapter01～chapter06まで、レイアウトのサンプルが入っているので、このブログでそれぞれ説明していきます。

次回は、chapter01について説明します。

レイアウトXMLを形成するXML群の概要説明

Androidのレイアウトを形成するのは、XMLがほとんどです。しかし、色んな種類があります。ここではレイアウトに関連するファイルに絞って、たくさんあるXMLの種類を説明します。まだ、レイアウト自体はしません。

先に言っておきますが、AndroidのXMLは、Web系のエンジニアを意識しているのかと思いますが、レイアウトとデザインの分離がしやすいようになっています。まさにHTMLとCSSの関係とそっくりです。HTMLとCSSの関係っぽく説明したいと思います。

レイアウトのXML = HTML

レイアウトのXMLは、ウェブサイトでいうHTMLの役割です。極論を言えばですが、CSSがなくてもウェブサイトは作れますね。それと同じくAndroidでもスタイルやテーマを使わなくてもアプリのレイアウトは作れます。しかし、似たようなパーツがたくさんできると修正が大変だったり、ミスも発生しやすくなります。そして、パーツやデザインを使い回したいのが世の常ですね。そこで、スタイルを使います。

スタイルのXML = CSS(細かいパーツ用)

スタイルは、レイアウトXML内の要素で使っている属性をまとめる事ができます。書き方はXMLですが、効果としてはCSSと似たようなものです。同じようなボタンの配置がある場合などは、まとめておくと修正も楽ですし、コード量が減ります。

テーマのXML = CSS(大枠)

ウェブサイトと多少違うところは、テーマという機能があるということですが、これもWordPressなどを使っていたらわかるかと思います。テーマを使う事で、サイトのパーツに統一性を持たせるように、アプリも統一性を持たせることができます。
例えば、ボタンの色をグラデーションかけたい、このアプリ内では全てそうしたいと思った場合に、全部のボタンにスタイルを適用するのは面倒ですし、適用忘れなどのミスも発生しかねません。そういう場合に、テーマを使います。
このアプリ内でこのパーツは全てこのデザインが適用されるという担保になりますので、積極的に使っていきたいところです。

こんなふうに書いてはいますが、私がレイアウトを作成する場合は

1. とりあえずレイアウトのXMLをガリガリ書きながら見た目を逐一確認
2. 見た目が完成したら、まとめられそうなものをスタイルにまとめる
3. テーマにしたほうがよさそうなパーツはテーマへ

という感じでやっています。
まぁそこは人それぞれかと思います。