layout_ui_android

レイアウト (2012/07/22)

プロジェクトの「res/layout/activity_main.xml」（名前はプロジェクト生成時に変更可能）にて、表示領域での配置について指定。

また、ボタンやテキスト入力領域などはこのレイアウトのXMLにて行う。

配置の種類

• LinearLayout
  • 横方向または縦方向にコントロールを配置。入れ子にしていくことができる。
• RelativeLayout

レイアウトのXMLファイルの定型

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<!-- 何か配置 -->

</RelativeLayout>

XMLの開始と終了をRelativeLayoutで囲む。xmlns:androidやxmlns:toolsなどの属性指定は上記記述のままでとりあえずOK。

スクリーンいっぱいいっぱいに表示されるとして、android:layout_widthとandroid:layout_heightは「fill_parent」を指定。

レイアウトの幅と高さ

「res/layout/xxx.xml」のレイアウト指定にて、RelativeLayoutタグ/LinearLayoutタグ/各種コントロールのタグの「android:layout_width」「android:layout_height」にて、表示領域全体に広げさせるか、コントロールの適切なサイズにリサイズするかを指定する。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/test_but1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ボタン1" />

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">
        
            <Button
                android:id="@+id/test_but2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
              android:text="ボタン2" />
            <Button
                android:id="@+id/test_but3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ボタン3" />
       </LinearLayout>
   </LinearLayout>
</RelativeLayout>

上記の場合は以下のように表示される。

これは、LinearLayout（android:orientation="vertical"）のタグにて縦方向にコントロール類を配置。その中に、ボタンとLinearLayout（android:orientation="horizontal"）を配置。さらにLinearLayout（android:orientation="horizontal"）のタグにてButtonを2つ配置している。

Buttonタグの属性にて、「android:layout_width="wrap_content"」や「android:layout_height="wrap_content"」とすることで、ボタンやボタン内のテキストにフィットした配置が行われる。

上のボタンを「android:layout_width="fill_parent"」とすると、親のレイアウトの横幅いっぱいいっぱいに広がった配置になる。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <!-- android:layout_widthをfill_parentに変更した -->
        <Button
            android:id="@+id/test_but1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="ボタン1" />

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">
        
            <Button
                android:id="@+id/test_but2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
              android:text="ボタン2" />
            <Button
                android:id="@+id/test_but3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ボタン3" />
       </LinearLayout>
   </LinearLayout>
</RelativeLayout>

fill_parentを指定すると1つのコントロールが占有してしまうことになるため、複数を並べたい場合はwrap_contentを使用する。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent" android:layout_height="fill_parent"
       android:orientation="vertical">

       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="fill_parent" android:layout_height="wrap_content"
           android:orientation="horizontal">
           <FrameLayout
               android:id="@+id/test_view1"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:background="#ffff0000"
               />
           <FrameLayout
               android:id="@+id/test_view2"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:background="#ff00ff00"
               />
           <FrameLayout
               android:id="@+id/test_view3"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:background="#ff0000ff"
               />
       </LinearLayout>
       
       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="fill_parent" android:layout_height="wrap_content"
           android:orientation="horizontal">
           <Button
               android:id="@+id/test_but2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="ボタン2" />
           <Button
               android:id="@+id/test_but3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="ボタン3" />
      </LinearLayout>
  </LinearLayout>
</RelativeLayout>

dip

以下、参考ページ。

http://developer.android.com/reference/android/util/DisplayMetrics.html

各タグの「android:layout_width」「android:layout_height」にて、固定サイズを指定する手段として、

android:layout_width="100dip"
android:layout_height="100dip"

のように「dip」というのをつける手段がある（※ これは、dpi（dot/inch）と違う点に注意）。

たとえば、160dpiの環境で1pixelのものがあるとする。これを320dpi環境で見た場合は、同じ1pixelでも縦横ともに0.5倍になったサイズで表示される（見える）ことになる。

これを、dpiの変化にかかわらず同じように見えるようにするのがdipという単位になる。160dpiで1pixel、が基準になる。

android:layout_width="100px"
android:layout_height="100px"

のように「px」を指定すると、pixelでのサイズ指定になるがdpi依存になるのでこれは推奨されない。