Androidアプリ入門 No.37 RelativeLayoutのレイアウト応用

RelativeLayout

レイアウト応用

RelativeLayoutはその名の通り、ほかのプロパティに対する相対的な表記ができるところになる。それらを行うための属性は以下になる。

属性	説明
layout_above	ウィジェットをこのプロパティで参照しているコンポーネントの上に配置する。
layout_below	ウィジェットをこのプロパティで参照しているコンポーネントの下に配置する。
layout_toLeftOf	ウィジェットをこのプロパティで参照しているコンポーネントの左に配置する。
layout_toRightOf	ウィジェットをこのプロパティで参照しているコンポーネントの右に配置する。
layout_alignTop	ウィジェットをこのプロパティで参照しているコンポーネントの上側に合わせる。
layout_alignBottom	ウィジェットをこのプロパティで参照しているコンポーネントの下側に合わせる。
layout_alignLeft	ウィジェットをこのプロパティで参照しているコンポーネントの左側に合わせる。
layout_alignRight	ウィジェットをこのプロパティで参照しているコンポーネントの右側に合わせる。
layout_alignBaseline	ウィジェットをこのプロパティで参照しているコンポーネントとベースラインを合わせる。

以下、2つの例で内容を確認する。まず、共通のstrings.xmlを以下に示す。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">ActivityTest</string>

    <style name="CodeFont">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">16sp</item>        
    </style>
</resources>

こちらも共通のMainActivity.javaを以下に示す。

package sample.at;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

最後に、main.xmlを示す。真ん中に配置したTextViewを元に2つのTextViewを配置している。

<?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"
    >
    <TextView
        android:id="@+id/target"
        style="@style/CodeFont"
        android:text="真ん中"
        android:background="#fff"
        android:layout_centerInParent="true"
        />
    <TextView
        style="@style/CodeFont"
        android:text="上に配置し、右揃え"
        android:background="#f00"
        android:layout_above="@id/target"
        android:layout_alignRight="@id/target"
        />
    <TextView
        style="@style/CodeFont"
        android:text="右に配置し、上揃え。長い文字列で折り返します。どうなるか確認してみてください"
        android:background="#0f0"
        android:layout_toRightOf="@id/target"
        android:layout_alignTop="@id/target"
        />
</RelativeLayout>

実行結果は以下。

もうひとつの例を挙げる。main.xmlのみを変更する。

<?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"
    >
    <TextView
        android:id="@+id/target"
        style="@style/CodeFont"
        android:text="真ん中"
        android:background="#fff"
        android:layout_centerInParent="true"
        />
    <TextView
        style="@style/CodeFont"
        android:text="下に配置し、左揃え"
        android:background="#f00"
        android:layout_below="@id/target"
        android:layout_alignLeft="@id/target"
        />
    <EditText
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_toLeftOf="@id/target"
        android:layout_alignBaseline="@id/target"
        />
</RelativeLayout>

実行結果は以下。