!!!レイアウト (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>
上記の場合は以下のように表示される。
{{ref_image android_layout_001.png}}
これは、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>

{{ref_image android_layout_002.png}}

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>
{{ref_image android_layout_003.png}}

!!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依存になるのでこれは推奨されない。