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・・・指定された要素の右に配置する
<?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を上手に使って配置するのがよいでしょう。
