RelativeLayoutクラスを使用する

RelativeLayoutクラスとは

RelativeLayoutクラスは、基準となるViewを元に、他のViewを相対的にレイアウトするクラスです。
たとえば、基準となるView①を画面に中央に配置し、View②はView①の左に、View③はView①下に表示する。といった感じです。

基準とするViewは、以下の2種類の方法で決めることができます。
①親のViewを基準とする
②指定したViewを基準とする

少々複雑そうに聞こえますが、実際はいたってシンプルです。
このRelativeLayout。
おそらく言葉で理解するよりも、実際に使ってみたほうが理解しやすいです。

また、RelativeLayoutと同じ概念は、CSS(スタイルシート)のRelativeと同じなので、
CSSのご経験がある方は、イメージしやすいと思います。

それでは、2種類の方法について順番に見ていくことにしましょう。

RelativeLayoutで、親のViewを基準にレイアウトする

画面に、全部で9つのボタンを相対配置で表示してみます。

レイアウトxmlの内容は以下の通りです。
9つのButtonを配置し、それぞれの表示位置を定義していきます。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.yocchin.relativelayoutsample.MainActivity" >
	
    <!-- 左 上-->	
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button1"
		android:layout_alignParentTop="true"
		android:layout_alignParentLeft="true"/>
	
	<!-- 上 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button2"
		android:layout_alignParentTop="true"
		android:layout_centerInParent="true"/>
	
	<!-- 右上 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button3"
		android:layout_alignParentTop="true"
		android:layout_alignParentRight="true"/>
	
	<!-- 左 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button4"
		android:layout_centerInParent="true"
		android:layout_alignParentLeft="true"/>
	
	<!-- 中央-->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button5"
		android:layout_centerInParent="true"/>
	
	<!-- 右 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button6"
		android:layout_centerInParent="true"
		android:layout_alignParentRight="true"/>

	<!-- 左 下-->	
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button7"
		android:layout_alignParentBottom="true"
		android:layout_alignParentLeft="true"/>
	
	<!-- 下 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button8"
		android:layout_alignParentBottom="true"
		android:layout_centerInParent="true"/>
	
	<!-- 右下 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button9"
		android:layout_alignParentBottom="true"
		android:layout_alignParentRight="true"/>
	
</RelativeLayout>

このレイアウトで画面を表示すると、以下のように表示されます。
RelativeLayout_001

属性の一覧は以下の通りです。

属性内容
layout_alignParentTop親レイアウトの上側に配置
layout_alignParentBottom親レイアウトの下側に配置
layout_alignParentLeft親レイアウトの左側に配置
layout_alignParentRight親レイアウトの右側に配置
layout_centerInParent親レイアウトの中央に配置

また、サンプルにもありますが、左右属性と上下属性などを組み合わせることで、
左上、右上、などに表示させたりすることが可能になります。

RelativeLayoutで、任意のViewを基準にレイアウトする

それでは、次に、任意のViewを基準にレイアウトしてみましょう。

中央にボタンを基準に、周囲にボタンを配置してみます。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.yocchin.relativelayoutsample.MainActivity" >
    
   	<!-- 中央-->
	<Button
	    android:id="@+id/center_btn"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button5"
		android:layout_centerInParent="true"/>
	
    <!-- 左 上-->	
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button1"
		android:layout_toLeftOf="@id/center_btn"
		android:layout_above="@id/center_btn"/>
	
	<!-- 上 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button2"
		android:layout_above="@id/center_btn"
		android:layout_alignLeft="@id/center_btn"/>
	
	<!-- 右上 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button3"
		android:layout_toRightOf="@id/center_btn"
		android:layout_above="@id/center_btn"/>
	
	<!-- 左 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button4"
		android:layout_toLeftOf="@id/center_btn"
		android:layout_alignTop="@id/center_btn"/>
	
	<!-- 右 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button6"
		android:layout_toRightOf="@id/center_btn"
		android:layout_alignTop="@id/center_btn"/>

	<!-- 左 下-->	
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button7"
		android:layout_toLeftOf="@id/center_btn"
		android:layout_below="@id/center_btn"/>
	
	<!-- 下 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button8"
		android:layout_below="@id/center_btn"
		android:layout_alignLeft="@id/center_btn"/>
	
	<!-- 右下 -->
	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/button9"
		android:layout_toRightOf="@id/center_btn"
		android:layout_below="@id/center_btn"/>
	
</RelativeLayout>

このレイアウトで画面を表示すると、以下のように表示されます。

RelativeLayout_002

属性の一覧は以下の通りです。

属性内容
layout_above指定したView の上側に配置
layout_below指定したView の下側に配置
layout_toLeftOf指定したView の左側に配置
layout_toRightOf指定したView の右側に配置
layout_alignTop指定View の上側を基準位置に設定
layout_alignBottom指定View の下側を基準位置に設定
layout_alignLeft指定View の左側を基準位置に設定
layout_alignRight指定View の右側を基準位置に設定

コメント

タイトルとURLをコピーしました