我的Android进阶之旅------>关于android:layout_weight属性的详细解析

关于android:layout_weight属性的详细解析

效果一

图1
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

上面的效果图中三个文本框的宽度比为 1:2:3

图2
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析
代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

三个TextView的layout_width都设置为0dp，layout_weight的值分别为1:2:3，所以展示的比例也为1:2:3

效果二

图3
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

图4
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

看到上面两个图片可以发现:
图3中的第一个文本框与第二、第三个文本框是不对齐的
图4中的第一个文本框与第二、第三个文本框是对齐的

图3的布局代码

下面来看图3的布局代码，如下所示

图5
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图4的布局代码

下面来看图4的布局代码，如下所示

图6
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

可以发现图3和图4的布局文件的差别是在父布局LinearLayout中设置了android:baselineAligned=”false”

效果三

图7
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

图7代码

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图8
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

图8代码

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图7和图8看起来好像效果一样。

图7的代码只是设置textView1的layout_width为“wrap_content”，textView2、textView3的layout_width都为“0dp”

图8的代码只是设置textView1、textView2、textView3的layout_width都为“wrap_content”

效果四

图9
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

图9代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图10
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

图10代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

图9和图10的区别是：
图9中没有展示出TextView3，而图10中展示出TextView3

而图9和图10的代码区别只是TextView3的 android:layout_weight在图9中为3，在图10中为2

下面我们来弄清楚一下到底为什么会这样：

图11
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

如图11所示：假设外层的父布局LinearLayout的width为480dp,

参考：布局首先按照控件声明的尺寸进行分配，然后再将剩下的尺寸按weight进行分配。

按上面的参考来计算一下三个TextView的具体width。

第一步：计算剩余的尺寸
由于三个TextView的width都设置为match_parent，即都是480dp,那么剩余的尺寸为
restWidth=480-480*3=-480*2

第二步：计算TextView1的尺寸

参考：控件的最终宽度=控件声明的宽度+父控件剩余的宽度*所占的比例

分析如图9：
按上面的参考来计算一下三个TextView的具体width。
即：TextView1的width1如下所示：
width1=480+（-480*2）（1/6）=480（4/6）
即：TextView2的width2如下所示：
width2=480+（-480*2）（2/6）=480（2/6）
即：TextView3的width3如下所示：
width3=480+（-480*2）（3/6）=480（0/6）
所以width1:width2:width3=2:1:0 如图9所示

分析如图10：
按上面的参考来计算一下三个TextView的具体width。
即：TextView1的width1如下所示：
width1=480+（-480*2）（1/5）=480（3/5）
即：TextView2的width2如下所示：
width2=480+（-480*2）（2/5）=480（1/5）
即：TextView3的width3如下所示：
width3=480+（-480*2）（2/5）=480（1/5）
所以width1:width2:width3=3:1:1 如图10所示

效果五

图12
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

有时候需要展示如图12所示的效果：子控件占据父布局宽度的1/2或者1/3等要求的时候，就需要设置父布局android:weightSum参数

图12的代码如下所示：
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="2">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />
</LinearLayout>

当父布局不设置android:weightSum参数的时候如下图所示：

图12
小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析
图12的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111111111" />
</LinearLayout>

关于android:layout_weight的更多介绍可以参考一下资源：

我的Android进阶之旅——>关于android:layout_weight属性的一个面试题
http://www.cnblogs.com/angeldevil/archive/2012/04/08/2437747.html
http://blog.****.net/softmanfly/article/details/7636510
http://developer.android.com/guide/topics/ui/layout/linear.html#Weigh
http://www.cnblogs.com/draem0507/archive/2013/05/11/3073508.html
Android 对Layout_weight属性完全解析以及使用ListView来实现表格

作者：欧阳鹏欢迎转载，与人分享是进步的源泉！
转载请保留原文地址：http://blog.****.net/ouyang_peng

小弟我的Android进阶之旅->关于android:layout_weight属性的详细解析