[Android] レイアウト (2) LinearLayout レイアウト

[Android] レイアウト (2) LinearLayout レイアウト
================================================================================

LinearLayout は、ウィジェットを縦または横に並べて配置するボックス・モデルのレイア
ウト。
つぎの属性によって配置のしかたを決める。
    方向
    塗りつぶしモデル
    配置
    パディング


・方向

縦方向にウィジェットを並べるか、横方向に並べるかを示す。
    android:orientation="vertical" または "horizontal"

なにも記述しないときは横方向。


・塗りつぶしモデル

ウィジェットを並べたときに、ウィジェットの大きさをどうするかを示す。

横方向、縦方向に関して、それぞれ
        android:layout_width
        android:layout_height
属性で指定する。


・比率

そのウィジェットに割りあてられる領域の割合を示す。
    android:layout_weight


・配置

そのウィジェットの配置（左寄せ、センタリング、右寄せなど）を示す。
    android:gravity

---
★?
LinearLayout の API 上では android:layout_gravity だが、実際には android:gravity
 で設定するようだ。layout_gravity だとうまく配置できない。
たとえば、android:gravity="center" ならセンタリングしてくれるが、
android:layout_gravity="center" だと左寄せのまま。
---


指定できる値
---
top    
bottom  
left   
right   
center_vertical  
fill_vertical    
center_horizontal
fill_horizontal     
center  
fill    
clip_vertical
clip_horizontal
start   
end    
---


・パディング

ウィジェット間の余白を指定する。何も指定しなければ余白なし。
android:padding 属性をつけることで、上下左右にも余白をつけることができる。
また、上下左右個別につけることもできる。


属性
---
android:padding        上下左右のパディングをピクセル単位で設定
android:paddingBottom  下方向のパディングをピクセル単位で設定
android:paddingLeft    左方向のパディングをピクセル単位で設定
android:paddingRight   右方向のパディングをピクセル単位で設定
android:paddingTop     上方向のパディングをピクセル単位で設定
---

なお、つぎのメソッドでパディングを動的に設定できる。
    setPadding(int,int,int,int)


▲ レイアウト

テーブル形式にウィジェットを並べた。ウィジェットは、ToggleButton で、ON になると、
サイズが縦方向横方向それぞれ動的に 2 倍になる。OFF になればもとに戻る。
ただし、レイアウトによっては、見た目は 2 倍にならないときもある。

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <ToggleButton
            android:id="@+id/button00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[0][0]¥nww-"
            android:textOn="[0][0]¥nww-" />

        <ToggleButton
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[0][1]¥nww-"
            android:textOn="[0][1]¥nww-" />

        <ToggleButton
            android:id="@+id/button02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[0][2]¥nmw-"
            android:textOn="[0][2]¥nmw-" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" >

            <ToggleButton
            android:id="@+id/button10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[1][0]¥nmw-"
            android:textOn="[1][0]¥nmw-" />

        <ToggleButton
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[1][1]¥nww-"
            android:textOn="[1][1]¥nww-" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <ToggleButton
            android:id="@+id/button20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[2][0]¥nww1"
            android:textOn="[2][0]¥nww1" />

        <ToggleButton
            android:id="@+id/button21"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[2][1]¥nww1"
            android:textOn="[2][1]¥nww1" />

        <ToggleButton
            android:id="@+id/button22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[2][2]¥nww1"
            android:textOn="[2][2]¥nww1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tableLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <ToggleButton
            android:id="@+id/button30"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[3][0]¥nww2"
            android:textOn="[3][0]¥nww2" />

        <ToggleButton
            android:id="@+id/button32"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[3][2]¥nww1"
            android:textOn="[3][2]¥nww1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tableLayout4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dip" >

        <ToggleButton
            android:id="@+id/button40"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[4][0]¥n0w2"
            android:textOn="[4][0]¥n0w2" />

        <ToggleButton
            android:id="@+id/button42"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[4][2]¥n0w1"
            android:textOn="[4][2]¥n0w1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tableLayout5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dip" >

        <ToggleButton
            android:id="@+id/button50"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:onClick="onClick"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textOff="[5][0]¥nww-"
            android:textOn="[5][0]¥nww-" />
    </LinearLayout>

</LinearLayout>
---


□ LinearLayout.LayoutParams クラス

java.lang.Object
   +    android.view.ViewGroup.LayoutParams
        +    android.view.ViewGroup.MarginLayoutParams
             +    android.widget.LinearLayout.LayoutParams

LinearLayout で配置する場合のウィジェットに割り当てられる領域の割合などを設定す
る。

XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
android:layout_gravity  ウィジェットの配置
android:layout_weight   そのウィジェットに割りあてられる領域の割合
---


□ android:layout_weight の使い方 (1) 

・android:layout_weight に "0" 以外の値を指定する。

・2 つの要素で、同じ 0 以外の値を指定すると領域が均等に二分

・ひとつ目で "1"、ふたつ目に "2" を指定すると、ふたつ目のウィジェットはひとつ目
の 2 倍の領域を使う


□ android:layout_weight の使い方 (2) 

割合に基づいてサイズを指定する。

水平レイアウトの場合

・レイアウト内のすべてのウィジェットで android:layout_width="0dp" とする

・レイアウト内のすべてのウィジェットで android:layout_weight の値を適切な割合に
する

・レイアウト内のすべてのウィジェットの android:layout_weight の値の合計が 100 に
なるようにする

実際には、合計が 100 にならなくても、全体の合計に対する割合で、領域の大きさを決
めてくれる。値も、整数値である必要はなく、実数値でもよい。


▲ アクティビティ

ボタンがクリックされたら、その状態によって、ボタンの幅と高さを倍にするか半分にす
る。

□ LinearLayout01Activity.java
---
package jp.marunomaruno.android.linearlayout;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ToggleButton;
import jp.marunomaruno.android.linearlayout.R;

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

    public void onClick(View view) {
        ToggleButton button = (ToggleButton) view;
        if (button.isChecked()) {
            button.setWidth(button.getWidth() * 2);
            button.setHeight(button.getHeight() * 2);

        } else {
            button.setWidth(button.getWidth() / 2);
            button.setHeight(button.getHeight() / 2);

        }
    }
}
---

ボタンに表示される 3 ケタの記号は順番に、
    layout_width 値
    layout_height 値
    layout_weight 値
を意味し、数字はその値である。また、記号 w と m は、それぞれ
    w:    wrap_content
    m:    match_parent
を意味する。


□ 表示
---
00        01        02
ww-       ww-       mw-

10        11        12
mw-       ww-       mw-

20        21        22
ww1       ww1       ww1

30                  32
ww2                 ww1

40                  42
0w2                 0w1

          50
          ww-
---

[3x] と [4x] とでは、layout_width 属性に値が設定されているかどうかの違い。

                                                                            以上