【Android】レイアウト ～ 基本編 / View Group ～

Android

■ はじめに

https://dk521123.hatenablog.com/entry/2015/08/23/165632

の続き。
Android のレイアウトについて、ちょっとずつ勉強していく。
今回は、View Group(ビュー グループ) について、学ぶ。

 ■ View Group(ビュー グループ)

* Viewを纏めて配置する（グループ化できる）
* 以下の参考文献を見てイメージを掴むのがいい

http://techbooster.org/android/ui/1392/

■ View Group の種類

【１】LinearLayout：Viewを縦・横方向に並べるレイアウト
【２】TableLayout：Viewを表形式に並べるレイアウト
【３】FrameLayout：Viewを左上を原点に重ねるレイアウト
【４】RelativeLayout：お互いの位置関係により、表示箇所を決めるレイアウト
【５】AbsoluteLayout：Viewを絶対座標で配置するレイアウト(現在では非推奨扱い)

【１】LinearLayout

 * Viewを縦・横方向に並べるレイアウト

 サンプル 

<!-- 縦にボタンが配置される -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   <!-- ★ここを「orientation="horizontal"」にすると横になる★ -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

【２】TableLayout

 * Viewを表形式に並べるレイアウト

 サンプル 

[0,0] [0,1] [0,2] 
[1,0] [1,1] [1,2] 
[2,0] [2,1] [2,2] 
[a,0] [a,1] [a,2] 
[b,0______] [b,2] ( android:layout_span="2" ) 
______[c,1]______ ( android:layout_column="1" )

レイアウト 

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
        <EditText android:text="[0,0]" />
        <EditText android:text="[0,1]" />
        <EditText android:text="[0,2]" />
    </TableRow>
    <TableRow>
        <EditText android:text="[1,0]" />
        <EditText android:text="[1,1]" />
        <EditText android:text="[1,2]" />
    </TableRow>
    <TableRow>
        <EditText android:text="[2,0]" />
        <EditText android:text="[2,1]" />
        <EditText android:text="[2,2]" />
    </TableRow>
    <TextView
            style="@style/CodeFont"
            android:text="a-1"
            android:background="#f00"
            />
        <TextView
            style="@style/CodeFont"
            android:text="a-2"
            android:background="#fff"
            />
        <TextView
            style="@style/CodeFont"
            android:text="a-3"
            android:background="#ff0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="b-1"
            android:background="#f00"
            android:layout_span="2"
            />
        <TextView
            style="@style/CodeFont"
            android:text="b-3"
            android:background="#ff0"
            />
    </TableRow>
    <TableRow>
        <TextView
            style="@style/CodeFont"
            android:text="c-2"
            android:background="#fff"
            android:layout_column="1"
            />
    </TableRow>
</TableLayout>

 参考文献
http://ichitcltk.hustle.ne.jp/gudon2/index.php?pageType=file&id=Android061_TableLayout
http://kuwalab.hatenablog.jp/entry/20110103/p1
 

【３】FrameLayout

 * Viewを左上を原点に重ねるレイアウト

【４】RelativeLayout

 * お互いの位置関係により、表示箇所を決めるレイアウト

【５】AbsoluteLayout

 * Viewを絶対座標で配置するレイアウト(現在では非推奨扱い)

参考文献

http://dixq.net/Android/03_01.html
http://codezine.jp/article/detail/4670
http://www.atmarkit.co.jp/ait/articles/0904/09/news111.html

関連記事

レイアウト ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2015/08/23/165632