Androidのチュートリアル – Tutorials > Hello, Views | Relative Layout

Relative Layout は子要素のレイアウトを相対位置で行うためのコンテナです。

レイアウト作成

HelloRelativeLayout という名前で新規にプロジェクトをつくり、res/layout/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/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="OK" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="Cancel" />
</RelativeLayout>

サンプル中の RelativeLayout の子要素に設定されている、layout_below layout_alignParentRight layout_toLeftOf などが相対レイアウト指定の属性です。

たとえば、android:layout_below=”@id/entry” は id が entry の下に来るように、id が ok の Button を配置しています。

また、android:layout_toLeftOf=”@id/ok” は id が ok のボタンの左に Cancel ボタンが配置されるように定義しています。

レイアウトをセット

HelloRelativeLayout.java の onCreate() で res/layout/main.xml を読み込むように指定します。

おそらくそのままでよいでしょう。なっていなければ、以下のように書き換えます。

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
}

Eclipse からシミュレータを起動して、実行すれば、チュートリアルのページのような画面が表示されます。

プロジェクトの作成から main.xml を上書きするだけでとりあえず完成します。

相対指定の良いところは、基準にしているオブジェクトの位置を変えてもそれに追従することでレイアウトは保たれる(OK ボタンを動かしても、Cancel ボタンは OK ボタンの左隣に並ぶ)ことです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする