我们先来看以下这段Android布局代码:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="1111111111111111111"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="2"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="2"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="3"
android:background="@color/white"
android:gravity="center"
android:text="3"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> </LinearLayout>
layout_weight解析一代码
在线性布局LinearLayout中,三个TextView以layout_weight属性分别是1、2、3来布局,它们的高度都是100dip,宽度都是0dip。在这种情况下,三个TextView的布局是什么样子的呢?答案如下图所示。
如上图所示,三个TextView所占的宽度分别是1:2:3,这是在我们意料之中的,在我们意料之外的是,第一个TextView的位置偏下。这是为什么呢?我们只需要对结果图稍作处理,答案就会显而易见,见下图。
如上图所示,我们加上一道“辅助线”之后就会发现,虽然位置参差不齐,但它们的第一行文本的位置是在同一高度的。由此我们得出结论:在Android的LinearLayout布局中,TextView默认是根据第一行文本来对齐的。可是我们怎样消去这种文本对齐关系呢?我们只需要在父布局的LinearLayout中添加这样一句代码 android:baselineAligned="false" 就可以解决这个问题,解决后的布局图如下:
如果我们把某一个TextView的layout_width属性设置为wrap_content,结果又会如何呢?如果我们将上面的布局代码修改成如下的样子,那么我们会得到如下图所示的结果。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"> <TextView
android:layout_width="wrap_content"
android:layout_height="100.0dip"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="1111111111111111111"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="2"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="2"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="3"
android:background="@color/white"
android:gravity="center"
android:text="3"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> </LinearLayout>
layout_weight解析二代码
我们把第一个TextView的宽度属性设置成wrap_content,结果如上图所示。从结果中我们可以看到,我们得到的结果不符合1:2:3的布局比例。这时为什么呢?这时因为,Android会先分配已经声明尺寸的控件的空间,再分配未声明尺寸的控件的空间。在这个例子中,第一个TextView的宽度已经声明(wrap_content),而另外两个TextView的宽度都是0(等待父布局按layout_weight分配),那么Android就会先分配第一个TextView的空间,然后再把剩余的空间按1:2:3的比例分配给三个TextView。
如果三个TextView的宽度都是已经声明的,结果又会是怎样的呢?我们把三个TextView的宽度比例改成1:2:2,并把它们的宽度都设置成match_parent(代码如下),这样,我们就会得到如下图所示的结果。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"> <TextView
android:layout_width="match_parent"
android:layout_height="100.0dip"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="1111111111111111111"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="match_parent"
android:layout_height="100.0dip"
android:layout_weight="2"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="2"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> <TextView
android:layout_width="match_parent"
android:layout_height="100.0dip"
android:layout_weight="2"
android:background="@color/white"
android:gravity="center"
android:text="3"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> </LinearLayout>
layout_weight解析三代码
按照我们上一个demo得到的结论,Android先分配已经声明的控件的空间,那么这里,这三个TextView的宽度应该是按照1:2:2的比例分配的,即把屏幕宽度分成五份,然后让这三个TextView分别占一份、两份、两份。但现在为什么得到的结果与理论不相同呢?其实,我们得到的结果正是“一丝不苟”的按照我们得到的理论进行的,下面我们来分析一下。
我们假设手机屏幕的宽度是480dip,那么按照我们之前得出的结论(先给已经声明的控件分配空间),这三个TextView的宽度都应该是480dip(和屏幕的尺寸相同),那么剩余的空间就是480-(480*3)=-960,也就是说,我们要把-960dip评分成五份,然后按照1:2:2的比例分配给三个TextView。那么,第一个TextView就会分配到-192dip,第二个和第三个TextView都分配到-384dip。用它们之前分配的和屏幕同样宽度的480dip分别减去它们后来分配的尺寸,就可以求出它们实际所占的尺寸分别是288dip、96dip和96dip,即3:1:1。
layout_weight还有一个非常有用的作用,我们来看下面这个需求:我们想要得到一个占屏幕二分之一的TextView,我们该怎么办呢?这时,我们就可以利用layout_weight来解决这个问题。代码如下,结果如下图所示。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"> <TextView
android:layout_width="0.0dip"
android:layout_height="100.0dip"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="1111111111111111111"
android:textColor="@color/black"
android:textSize="18.0sp"
android:textStyle="bold"/> </LinearLayout>
layout_weight的另一个作用