androidLayout之layout_weight小解

一.兄弟Layout_height为fill_parent

本来准备编写一款简单的计算器，来学习android，遇到了多个兄弟Layout区域按照一个比例大小来显示的技术问题，进行了研究后，得到如下案例：

1.以下是该计算器的布局xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".StandardActivity">
	<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="6">
		<TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff00ffff" android:layout_weight="1"/>
		<TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff00ffff" android:layout_weight="1"/>
	</LinearLayout>
	<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="7">

		<Button
		    android:id="@+id/button_st_sc"
		    android:layout_width="wrap_content"
		    android:layout_height="match_parent"
		    android:text="标准->科学" />

	</LinearLayout>
	<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="3">
		<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="2">
			<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="1">
				<Button android:id="@+id/button_st_sc" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="c"/>
				<Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="e"/>
				<Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="i"/>
				<Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="m"/>
			</LinearLayout>
			<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="1">
				<Button android:id="@+id/button11" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="b"/>
				<Button android:id="@+id/button21" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="f"/>
				<Button android:id="@+id/button31" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="j"/>

				<Button
				    android:id="@+id/button_st_sc"
				    android:layout_width="match_parent"
				    android:layout_height="match_parent"
				    android:layout_weight="1"
				    android:text="n" />

			</LinearLayout>
			<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="1">
				<Button android:id="@+id/button111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="c"/>
				<Button android:id="@+id/button211" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="g"/>
				<Button android:id="@+id/button311" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="k"/>
				<Button android:id="@+id/button411" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="o"/>
			</LinearLayout>
		</LinearLayout>
		<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="3">
			<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_weight="1">
				<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="1">
					<Button android:id="@+id/button4111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="d"/>
					<Button android:id="@+id/button41111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="h"/>
					<Button android:id="@+id/button41111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="l"/>
				</LinearLayout>
				<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_weight="1">
					<Button android:id="@+id/button41111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:text="q"/>
					<Button android:id="@+id/button411111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="2" android:text="r"/>
				</LinearLayout>
			</LinearLayout>
			<Button android:id="@+id/button411111" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="3" android:text="p"/>
		</LinearLayout>
	</LinearLayout>
</LinearLayout>

 

2.该布局xml具体的效果如下图(当然红色字母和方框是用画图工具添加上去的，并非程序界面本身)：

 

3.那么如何做到三个红色LinearLayout区域的高度比例为2:1:5呢？

首先，设置三个区域对应的Layout的layout_height为fill_parent.

然后，设A,B,C三个区域的Layoutweight为x,y,z

生成公式：

前提：下面常量1,3的单位是三个Layout区域的父Layout的高度，fill_parent表示的是填充满父Layout+剩余高度空间*自己所占剩余空间的比重。x,y,z表示三个Layout的layout_weight

 

1+(1-3)*x/(x+y+z)=2/8;（1个父Layout高度 + （1-3）（剩余高度空间）* x(x+y+z) (自己所占剩余高度空间的比例)） = 该Layout所占的父Layout窗口的高度比例

1+(1-3)*y/(x+y+z)=1/8;

1+(1-3)*z/(x+y+z)=8/8;

 

最后解除这个公式的结果为:

x=6
y=7
z=3

将结果设置到对应layout的layout_weight，就能得到高度比例为2:1:5的效果了。当然宽度同理。

 

结论：在子Layout的高为fill_parent的时候，layout_weight的值和所及所占的高度有相反的增减方向，但是不成绝对反比，具体的数据需要用上面公式来计算

 

 

二.在兄弟Layout的height或者width为wrap_content时：

此时的Layout_weight为实际占父类Layout区域的高或者宽的比例，但是实际显示出来的效果会受到layout的内容所影响，如将上面的简单计算器的“标准->科学”按钮修改为

"标准->科ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss学"

那么，由于父Layout区域的1/8不能容下其文本内容，而将根据内容调整自己的大小。

 

总结：如果需要几个兄弟Layout区域按照一定的比例来显示，那么就应该设置为fill_parent的方式，而不应该设置为wrap_content的方式。

 

 

是不是觉得上面写的有些难懂烦躁，难道要布局几个空间按照某个比例的大小显示就那么难么？？OK，现在让你从中解脱出来：

android:layout_height=0;

android:layout_weiight=n;

那么此时的n的大小就和控件本身的大小成正比了，layout_height=0嘛，优先级比较低O(∩_∩)O哈哈~

2014年3月10日15:34:09