ページ

2011年9月1日木曜日

layout_weightの留意点

layout_weightの留意点

layout_weightは、複数のViewを任意の大きさの割合で配置することができるコマンドであり、とても有益である。このコマンドの留意点は次のとおりである。
  1. 絶対の位置では無く、相対的な位置を設定する。このため、物理画面の大きさの違いに関係無く、全てのサイズの画面に対応できる。
  2. 横方向で使う場合:layout_widthの値を"0dp"にすること。具体的には次のように書く。android:layout_width="0dp"
    この値を"fill_parent"にした場合、layout_weightの数値が低いViewが大きく配置される。物好きな人はお試しください。
    この値を"wrap_content"にした場合、各Viewの配置割合は不正確になる。
  3. 縦方向で使う場合には、(layout_widthを0dpにするのではなく)layout_heightの値を"0dp"にする。
  4. layout_weightで指定した大きさを超える長い文字列がViewに代入された場合、layout_weightの指定が優先適用され、指定された方向にはサイズは伸びない。そして、Viewは、layout_weightによる指定が無い方向に伸びていく。
  5. android:weightSumに代入する値が、各layout_weightの値の合計よりも多い場合、その多い分が余白となる。つまり、 android:weightSumは余白を設けるコマンドである。
  6. android:weightSumは設けなくても良い。この値が、各layout_weightの値の合計と同一であるならば、android:weightSumを書く意味は無い。
  7. LinearLayoutの子Viewにだけしか使えない。ただし、LinearLayoutを継承したViewGroupの子Viewにも使える。例えば、RadioGroupの子ViewであるRadioButtonにも使える。
  8. LayoutInflaterを用いて追加するViewでは、inflater()の第二引数に親のLinearLayoutを指定することによって、layout_weightが有効に機能する。詳細は動的にレイアウトの挿入&削除を繰り返すを見てください。
例:縦方向の場合
画面の上の方に80%の余白を設け、80%よりも下の位置からButtonを配置する場合

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="100"
        >
        <!-- 位置調整のためのダミーView -->
        <View
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="80"
            >
        </View>
        <Button (以下、省略)


例:横方向の場合
android:weightSumの余白作成機能を用いて、Viewを中央に配置することができる。この場合、余白を作成するためのダミーのViewを必要としない。
左の余白が1、SeekBarが8、右の余白が1の割合でSeekBarを中央に配置するxmlのサンプルは次のとおりです。
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="100"
        android:gravity="center"
        >
        <SeekBar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="80"
            >
        </SeekBar>
    </LinearLayout>

例:RadioButtonを横方向に均等に並べる場合
    <RadioGroup
        android:id="@+id/radioG_Start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/radio_StartZero"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="50"
            android:text="@string/RadioEndVideo"
            >
        </RadioButton>
        <RadioButton
            android:id="@+id/radio_StartFavorite"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="50"
            android:text="@string/SetTime"
            >
        </RadioButton>
    </RadioGroup>

私が実験用に作成したxmlを掲載しておきます。
"Buttoooooooooooon"などと、ボタンに執着があるかのような記述がありますが、これは長い文字列を設定した場合の挙動を実験するためのものであり、私個人の嗜好を示すものでは無いことを念のため申し添えておきます。

Eclipseのxmlエディタの下の方にある「Graphical Layout」タブをクリックすると、ビルドすること無く、画面を確認できます。

<?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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <SeekBar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="60"
            >
        </SeekBar>
        <TextView
            android:text="Valuuuuuuuuuuuuuuue"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20"
            >
        </TextView>
        <Button
            android:text="Buttoooooooooooon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20"
            >
        </Button>
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="120"
        >
        <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="60"
            >
        </Button>
        <Button
            android:text="Buttoooooooooooon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20"
            >
        </Button>
        <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20"
            >
        </Button>
    </LinearLayout>
</LinearLayout>

【開発環境】
OS:Windows Vista
Eclipse IDE for Java Developers Version: Indigo Release

0 件のコメント:

コメントを投稿