UI布局是Android项目非常重要的一部分内容,我们知道Android一共包括五中布局方式:1.LinearLayout(线性布局);2.RelativeLayout(相对布局);3.TableLayout(表格布局);4.AbsoluteLayout(绝对布局);5.FrameLayout(帧布局)。但在实际项目当中,我们基本上只用到LinearLayout和RelativeLayout。现在我们一起了解一下LinearLayout中的一个非常重要的属性:layout_weight。
android:layout_weight是指LinearLayout先给里面的控件分配完大小之后剩余空间的权重,这块可能大家不是特别好理解。不用着急,首先我们初学者要明白一个概念,那就是布局文件并不一定都要放在屏幕当中,例如下面一个例子:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world" /> <TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world" /> </LinearLayout></span>
两个TextView,textView1填满父元素,textView2也是填满父元素,其实是这样分布,textView2是放在屏幕外面的:
其次,很多初学者都以为layout_weight是按比例分配空间的,根本不理解剩余空间的概念,下面我们来看这样一个例子
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="天气" android:background="#fff123" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="北京天安门" android:background="#123fff"/> </LinearLayout></span>
运行结果:
可以看到两个TextView的宽度都是包裹内容,那么layout_weight的作用就是分配剩余白色空间的大小,比如我们都给两个控件的layout_weight设置成1,意思就是每个控件分配剩下白色区域的1/2:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="天气" android:layout_weight="1" android:background="#fff123" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="北京天安门" android:layout_weight="1" android:background="#123fff"/> </LinearLayout></span>
运行结果:
可以看到,每个控间都设置成包裹内容,然后给每个控件都设置了权重为1,但是两个控件的宽度明显不同,说明layout_weight属性确实分配的是剩余空间的大小。首先textView1得到了包裹它内容的宽度,然后再加上布置完所有控件剩余部分中自己所占的比例,就是自己的实际宽度;textView2同样也是如此。
以上我们设置的控件宽度都是包裹内容,那如果我们把控件的宽度设置成fill_parent会是如何呢
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="天气" android:layout_weight="1" android:background="#fff123" /> <TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="北京天安门" android:layout_weight="1" android:background="#123fff"/> </LinearLayout></span>
运行结果:
可以看到两个控件占的空间大小是相同的,如何解释呢:textView1和textView2的宽度都是fill_parent,那么剩余的宽度=屏幕的宽度(1 个fill_parent)-textView1的宽度(1个fill_parent)-textView2的宽度(1个fill_parent)=-1个fill_parent的宽度,因为我们给两个控件都设置了权重为1,那么textView1的宽度=1个fill_parent的宽度(自身的宽度)+1/2(-1个fill_parent的宽度)【layout_weight为其分配的权重所占的空间大小】=1/2个fill_parent的宽度,也就是屏幕的一半宽度,同样textView2也是这样。所以搞清楚剩余空间的大小是搞清楚laytou_weight作用的关键。这里我们可以这样总结一下:
剩余空间的大小=LinearLayout(权重所在的线性布局的大小)-我们给其中每一个控件分配的大小空间
这里剩余空间的大小并不都是正数,这一点大家要注意,明白剩余空间的概念,相信我们很容易就能按我们的需要给每个控件分配权重大小。
-------------------------------------------------------------------分割性---------------------------------------------------------------------------
下面是几个我常见的例子:
1.我们往往不会为了实现上面的效果,而让每个控件的大小都fill_parent,也就是说我们如何实现在控件为wrap_content的情况下实现如上那样等比例分配空间大小,而不会根据里面内容多少而获得不同的空间大小(如上上个效果图)。其实很简单:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="天气" android:layout_weight="1" android:background="#fff123" /> <TextView android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="北京天安门" android:layout_weight="1" android:background="#123fff"/> </LinearLayout></span>
我们给每一个控件的宽度都设为0dp,这样剩余空间的大小=1个fill_parent的大小-textView1的大小(0)-textView2的大小(0)=1个fill_parent的大小,然后textView1的大小=0dp+1/2(1个fill_parent)=1/2fill_parent,也就是屏幕的一半,textView2同样.
2.我们在实际项目中会经常遇到这样一种布局样式
一个控件在屏幕的最左边,另一个控件在屏幕的最右边,如果不了解LinearLayout的layout_weight属性,我们会用RelativeLayout来实现这样的效果,那么现在我们了解了layout_weight,我们用layout_weitght非常容易就能实现这样的效果
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="天气" android:layout_weight="1" android:background="#fff123" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:background="#123fff"/> </LinearLayout></span>
可以看到,我们给textView1控件设置了layout_weight为1,没有为textView2设置权重,而且两个控件的宽度都是包裹内容,用我们上面的公式分析,textView1把剩余的空间全部占了,所以就把textView2控件挤到了屏幕的右边。
3.最后,我们看一个稍微简复杂点的例子
我们如何让第二列的对其方式符合上面的样子
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="1"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="2"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="3"/> <TextView android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="4"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="5"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="3" android:text="1"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="4" android:text="2"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="4" android:text="3"/> <TextView android:layout_width="match_parent" android:layout_weight="4" android:layout_height="wrap_content" android:text="4"/> </LinearLayout> </LinearLayout></span>
我们可以看到第二列的宽度都是fill_parent,权重是3:4:4:4,那么我们再来一起分析一下这个权重是如何得来的,首先我们计算第二列的剩余空间的大小=1个fill_parent(LinearLayout的宽度)-4个fill_parent(4个控件的宽度都为fill_parent,所以是4个fill-parent)=-3个fill_parent,那么根据我们所需textView1的宽度占屏幕的2/5,我们设textView1的权重为x,也就是1个fill_parent+(x/4)*(-3个fill_parent)=2/5fill_parent,得到x=4/5;同样的方法textView2,设其权重为y,1个fill_parent+(x/4)*(-3个fill_parent)=1/5fill_parent,得到y=16/15
,剩下的权重都为16/15,所以权重比应该是4/5:16/15:16/15:16/15,也就是3:4:4:4.
ok,到此位置layout_weight的总结全部结束!