[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 属性に値が設定されているかどうかの違い。
以上
