2014年9月9日火曜日

Android WidthやHeightとWeightの関係

androidでレイアウトを作成する時、WidthやHeight、Weightの設定でデザインが大きく変わります。

WidthプロパティとHeightプロパティに指定できる値は以下の3種類あります。
match_parent・・・親のViewいっぱいに表示
wrap_content・・・自動調整で表示
fill_parent・・・Android SDK 2.2以降は非推奨。match_parentを使用する。

次にWeightですが「画面上のオブジェクトの占有比率」を指定します。

つまりボタンを3つ配置し、Weight=1、Weight=2、Weight=3と指定すると
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されるということです。
しかし、WidthやHeightの設定によって、まったく逆の結果になってしまうこともあります。
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されることもあります。

具体的に見ていきます。
以下はLinearLayout(Vertical)にボタンを3つ配置して、ボタンのプロパティをそれぞれ設定します。

まずボタンのHeightにwrap_contentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=2

3つ目のボタン
Width=wrap_content
Height=wrap_content
weight=3
次はボタンのHeightにmatch_parentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=match_parent
weight=1

2つ目のボタン
Width=wrap_content
Height=match_parent
weight=2

3つ目のボタン
Width=wrap_content
Height=match_parent
weight=3

Heightプロパティにwrap_contentを指定した場合は
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されます。

Heightプロパティにmatch_parentを指定した場合は
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されます。

原因はコチラに詳しく解説されています。
zaki日記 LinearLayout の width(またはheight) と weight の関係
つまりweightは余白を配分する割合を指定するもので、
wrap_contentを指定し場合は余白が正の値になるため、weightに指定した値で余白を分配できるが
match_parentを指定した場合は余白が負の値になるため、weightに指定した値で分配するとおかしなことになるとのことです。
なるほど~

次は横パターンで見ていきます。
LinearLayout(Horizontal)にボタンを2つ配置して、Width=wrap_contentを指定しweightは指定していない状態です。

1つ目のボタン
Width=wrap_content
Height=wrap_content


2つ目のボタン
Width=wrap_content
Height=wrap_content

それぞれのボタンにweight=1を指定します。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1


2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

右のボタンの方が大きいですね。
wrap_contentはボタンに設定されているテキストからボタンサイズを計算し、さらにweightの指定による余白の分配をしているので当然の結果ですね。

次はそれぞれのボタンにWidth=match_parent、weight=1を指定した状態です。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


左右のボタンの大きさが同じになりました。
しかし、2つのボタンのweightが共に1なので問題ありませんが、それぞれweightを変えてみると、縦配置と同じような現象が発生します。
1つ目のボタンをweight=1、2つ目のボタンをweight=2とすると、2つ目のボタンが小さくなってしまいました。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=2


widthやheightにwrap_contentを指定した上でweightを指定するということは、ウィジェットに設定されている内容からウィジェットのサイズを自動計算し、 さらにweightの指定による余白の分配が行われます。
そのため少しパフォーマンスが悪くなるようです。

weightに指定した比率でボタンを配置したい場合は、縦配置であればHeight=0dip、横配置であればWidth=0dipに指定し、Weightを指定するようにします。

縦配置の例です。

1つ目のボタン
Width=wrap_content
Height=0dip
weight=1

2つ目のボタン
Width=wrap_content
Height=0dip
weight=2

3つ目のボタン
Width=wrap_content
Height=0dip
weight=3
横配置の例です。

1つ目のボタン
Width=0dip
Height=wrap_content
weight=1

2つ目のボタン
Width=0dip
Height=wrap_content
weight=2

0 件のコメント: