Relative Layout について


[Hello Views 関連記事]

Android developers による「Hello Views」チュートリアルで紹介されているレイアウトには次のようなものがあります。

  1. Linear Layout
  2. Relative Layout
  3. Table Layout
  4. Grid View
  5. Tab Layout
  6. List View

今回は「Relative Layout」チュートリアルについて日本語への翻訳と内容を補足しながらみていきます。

Relative Layout

プロジェクト

step1のLinear Layoutで、HelloViewという名前のプロジェクトを作成しました。今回はこのプロジェクトを利用して表示するレイアウトを切り替えるだけにします。プロジェクトの作成については「Linear Layout > 新規プロジェクト作成」を参考にしてください。

レイアウト用の新規XMLファイルの作成

今回のLRelative Layout用のレイアウトとして「relative_layout.xml」という名前のレイアウトxmlファイルを作成します。


新規レイアウトファイルの作成方法については「Linear Layout >レイアウト用の新規xmlファイルの作成」に詳しく説明したので参考にしてください。
レイアウトファイルとして、プロジェクト作成時に自動生成されるmain.xml、step1のLinear Layoutで作成したlinear_layout.xml、そして今回作成したrelative_layout.xmlができています。

relative_layout.xmlファイルが作成できたら、エディタービューのxmlタグを「Relative Layout」チュートリアルのサンプルタグと入れ替えます。
これでとりあえず「Relative Layout」チュートリアルに従ってアプリを作る下準備はできました。

Relative Layout の概要

チュートリアルのサンプルコードを見る前にRelative Layoutの説明についてみていきます。

RelativeLayout is a ViewGroup that displays child View elements in relative positions. The position of a View can be specified as relative to sibling elements (such as to the left-of or below a given element) or in positions relative to the RelativeLayout area (such as aligned to the bottom, left of center).
A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested ViewGroups. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.

[訳]
RelativeLayout は相対位置で子の View要素を表示する ViewGroup です。View の位置としては対象要素の左や下というように兄弟要素(※同じレベルの要素)に対して指定することができます。または下部や中央左に揃えるといったようにRelativeLayout 領域に対して相対位置を指定することもできます。
RelativeLayout はユーザインターフェースを設計する上で極めて効果的です。なぜならネストされた ViewGroup を排除できます。いくつかにネストされたLinearLayout グループを使っていることを見つけたら、それらを1つのRelativeLayout で置き換えることができるかもしれません。

Relative Layout のサンプルコード
<?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>
Notice each of the android:layout_* attributes, such as layout_below, layout_alignParentRight, and layout_toLeftOf. When using a RelativeLayout, you can use these attributes to describe how you want to position each View. Each one of these attributes define a different kind of relative position. Some attributes use the resource ID of a sibling View to define its own relative position. For example, the last Button is defined to lie to the left-of and aligned-with-the-top-of the View identified by the ID ok (which is the previous Button).
All of the available layout attributes are defined in RelativeLayout.LayoutParams.

[訳]
layout_below, layout_alignParentRight, そして layout_toLeftOf のような android:layout_* 属性それぞれに注目してください。RelativeLayoutを使えば、これらの属性を使ってそれぞれのView の希望の配置を記述することができます。これらの属性のそれぞれが、異なった種類の相対位置を定義しています。いくつかの属性では、自身の相対位置を定義するために兄弟View (同じレベルのView)のリソースIDを使っています。例えば最後のButtonは、ID okで特定されるView(1つ前のView)の左側で上配置するように定義されています。
利用できる全てのレイアウト属性については
RelativeLayout.LayoutParams で定義されています。

  • 【2行目で相対レイアウトを指定しています。】
  • 4行目と5行目で相対レイアウトの横幅と縦幅がfill_parentと指定しています。この相対レイアウトが一番外側の要素なので画面に対してになります。幅も高さもfill_parentなので画面全体を占めます。API レベル8以上では fill_parentとせず match_parentとするようです。
  • 【6~10行目がTextViewに関してです。】
  • 7行目でこのTextViewの識別子IDを「label」に指定しています。
  • 8行目で横幅を親要素(RelativeLayout)に対して幅いっぱい占めます。
  • 9行目で縦幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 10行目でTextViewでの表示内容を「Type here:」と指定しています。
  • 【11~16行目がEditTextに関してです。】
  • 12行目でこのEditTextの識別子IDを「entry」に指定しています。
  • 13行目で横幅を親要素(RelativeLayout)に対して幅いっぱい占めます。
  • 14行目で縦幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 15行目で背景画像を指定しています。res/drawable-* にファイル名がditbox_backgroundの画像があれば背景画像になります。
  • 16行目でこのEditTextを識別子IDがlabel(TextView)の下に配置するように指定しています。
  • 【17~24行目がButtonに関してです。】
  • 18行目でこのButtonの識別子IDを「ok」に指定しています。
  • 19行目で横幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 20行目で縦幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 21行目でこのButtonを識別子IDがentry(EditView)の下に配置するように指定しています。
  • 22行目で右寄せにするように指定しています。このボタンは横幅も必要な領域しか占めないので親要素いっぱい占めない場合はデフォルトの左寄せになってしまいます。
  • 23行目はこのボタンに対して他のビューが左に配置される場合、そのビューとの間隔を10dipに指定しています。
  • 24行目はこのボタンの表示内容を「OK」に指定しています。
  • 【25~30行目もButtonに関してです。】
  • 26行目で横幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 27行目で縦幅はwrap_contentなので内容に必要な部分(可変)だけ占めます。
  • 28行目でこのButtonを識別子IDがok(1つ前のボタン)の左に配置するように指定しています。
  • 29行目でこのButtonを識別子IDがok(1つ前のボタン)を基準に上寄せを指定しています。これがなければRelativeLayoutを基準に上寄せされTextViewと重なってしまいました。
アクティビティの変更

src > helloView.java を開きます。

package localhost.helloview;

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

public class helloView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        //setContentView(R.layout.linear_layout);
        setContentView(R.layout.relative_layout);
    }
}

前回の「Linear Layout について」でレイアウトを「res/layout/linear_layout.xml」を使うように指定しましたが、今回は「res/layout/relative_layout.xml」なのでこちらに変更します。12行目をコメントアウトし13行目を追加しました。

AVDによる実行

AVDによるアプリケーションの実行については「AVDでアプリケーションを実行する」の記事で詳しく書きました。参考にしてください。
実行結果をみてみます。次のような画面が表示されました。


[Hello Views 関連記事]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です