你了解yout_weight属性吗?

2016-10-21  本文已影响22人  小木桨

相信大家应该都用过LinearLayout的android:layout_weight属性,android:layout_weight是线性布局LinearLayout中非常重要的一个属性,它的主要作用是分配剩余空间,所谓的剩余空间是线性布局中把子组件所占的空间分配后剩余的空间,每个子组件占用剩余的比例等于自身所设的layout_weight参数乘以所有子组件所设置layout_weight参数之和,下面就以LinearLayout的horizontal方向举例

计算公式:
剩余空间 = 父组件的宽度 - 各子组件所设置的宽或所占的宽
子组件所占空间 = 所设置的宽或所占宽 + layout_weight * 剩余空间

*注: 最终子组件所占用的空间大小 与 android:layout_width 属性有很大关系,以下分别举例 *

设置值为: match_parent

首先看一下布局xml:

<TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="match_parent情况:(1:2:3)"/>

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="30dp"
          android:orientation="horizontal">
          <TextView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_weight="1"
              android:gravity="center"
              android:text="item1"
              android:background="#FF0000"/>
          <TextView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_weight="2"
              android:gravity="center"
              android:text="item2"
              android:background="#00FF00"/>

          <TextView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_weight="3"
              android:gravity="center"
              android:text="item3"
              android:background="#FF00FF"/>
      </LinearLayout>

效果图如下:


QQ截图20161021182817.png

看到效果图后是不是觉得很惊讶,怎么只显示1、2,而3没显示出来。不要着急,我们根据计算公式,一步一步来解析,查看xml布局可以看到各子组件android:layout_weight之和为6,TextView1、TextView2、TextView3各占剩余空间比例为1/6、2/6、3/6。各子组件和父组件宽度属性都为android:layout_width="match_parent",即都撑满整个屏幕宽度,套用公式可以得出:

剩余空间 = 屏幕宽度 - TextView1所设置宽度(即屏幕宽度) - TextView2所设置宽度(即屏幕宽度) - TextView3所设置宽度(即屏幕宽度) = -2个屏幕宽度(是的,你没看错。此处剩余空间为负
那么组件1所占空间 = TextView1所设置宽度(即屏幕宽度) + 1/6 * (-2个屏幕宽度) = 2/3个屏幕宽度
组件2所占空间 = TextView2所设置宽度(即屏幕宽度) + 2/6 * (-2个屏幕宽度) = 1/3个屏幕宽度
组件3所占空间 = TextView3所设置宽度(即屏幕宽度) + 3/6 * (-2个屏幕宽度) = 0

根据计算,我们可以看到组件3所占空间为0,且组件1和组件2所占空间比为2:1,和效果图一样。

设置值为: wrap_content

看一下布局xml

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="wrap_content:(1:2:3)"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="item1"
                android:background="#FF0000"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:gravity="center"
                android:text="item2"
                android:background="#00FF00"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:gravity="center"
                android:text="item3"
                android:background="#FF00FF"/>
        </LinearLayout>

效果图如下:


QQ截图20161021182825.png

  可以看到各子组件android:layout_weight之和为6,TextView1、TextView2、TextView3各占剩余空间比例为1/6、2/6、3/6。各子组件所设置android:layout_width属性为wrap_content,即依内容而定,此处为各自文本字符串1、2、3的宽度;父组件宽度属性为android:layout_width="match_parent",即撑满整个屏幕宽度,套用公式可以得出:

剩余空间 = 屏幕宽度 - 字符串1宽度 - 字符串2宽度 - 字符串3宽度
子组件1所占空间 = TextView1内容宽度 + 1/6 * 剩余空间
子组件2所占空间 = TextView2内容宽度 + 2/6 * 剩余空间
字组件3所占空间 = TextView3内容宽度 + 3/6 * 剩余空间

主意:主意使用wrap_content值的时候,是会计算组件内容宽度的,而不是从0计算的

设置值为: 0dp

还是先看一下布局xml

<!--wrap_content情况和上面的一样所以就不写了-->
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="0dp:(1:2:3)"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:orientation="horizontal">
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="item1"
                android:background="#FF0000"/>
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:gravity="center"
                android:text="item2"
                android:background="#00FF00"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:gravity="center"
                android:text="item3"
                android:background="#FF00FF"/>
        </LinearLayout>

跟wrap_content对比后的效果图:


QQ截图20161021185119.png

通过效果图对比可以看到android:layout_weight之和为同样都是6,各子组件所占比例同样都是1/6、2/6、3/6。但是为什么两种布局方式子组件所占空间大小却不同那?答案我就不写了,相信只要仔细看过文章都能知道答案了!

上一篇下一篇

猜你喜欢

热点阅读