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を上手に使って配置するのがよいでしょう。