日积月累:LinearLayout的andrid:layout_weight

系统 1738 0

在开发的过程中,为了布局更好的适配各种各样的屏幕,会经常使用android:layout_weight属性,按比例分配屏幕的空间。在很多资料和书籍中解释说,系统根据layout_weight比例分配占据空间的大小。但是这个解释在实际开发过程中,往往给我们带来许多困惑。

现在我们来看看具体场景如下:我们需要将三个TextView按照1:2:3的横向的比例显示。于是就有了如下代码:

        <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="horizontal" > 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="1" 
        android:background="#FF4500" 
        android:gravity="center" 
        android:text="第一个" /> 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="2" 
        android:background="#D15FEE" 
        android:gravity="center" 
        android:text="第二个" /> 
 
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_weight="3" 
        android:background="#CAFF70" 
        android:gravity="center" 
        android:text="第三个" /> 
</LinearLayout> 
      
观察结果显示如下(我们分别修改三个TextView的laytou_width属性 ):

1.layout_width: wrap_content

2.layout_width: fill_parent

3.layout_width:"0dp"

观察可知,在三种情况下,同样的layout_weight比例1:2:3,0dp的比例正确外,其它两种产生了错误的不同结果,这就让我们非常疑惑。


在查阅官方文档: Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight。意思是,子视图可以指定一个权重值,然后在这个视图组中的所有剩余空间根据它们声明的权重比例分配

查阅相关的各方面资料,综合总结,layout_weight比例分配的原则如下

第一步,根据layout_width / layout_height ( 根据方向而定 ) 的属性分配视图的空间

第二步,计算视图组剩余的空间大小,并按照layout_weight比例分配给子视图

第三步,子视图实际空间 = layout_width / layout_height分配空间+layout_weight比例分配空间

根据如上步骤我们分别解释上面三种情况结果的原因

为了更好的解释,这里我们声明两个常量content_width(内容所需占据的空间大小)和screen_width(屏幕的宽度空间大小)。

1.layout_width: wrap_content

第一步,根据layot_width:wrap_content分配三个TextView内容填充的空间,三个TextView的layout_width空间分别为:

layout_width1= content_width

layout_width2= content_width

layout_width3= content_width

第二步,视图组线性布局剩余的空间大小 = screen_width - 3 * content_width;那么三个TextView 的layout_weight比例分配空间分别为

layout_weight1=(screen_width-3* content_width )/6

layout_weight2= ( screen_width-3* content_width )/3

layout_weight3= ( screen_width-3* content_width )/2

第三步,根据计算公式, 子视图实际空间 = layout_width / layout_height分配空间+layout_weight比例分配空间 三个TextView的空间分别为

textview1= content_width + (screen_width-3* content_width )/6

textview2= content_width + (screen_width-3* content_width )/3

textview3= content_width + (screen_width-3* content_width )/2

那么textview1:textview2:textview3=(screen_width-2* content_width ):2*( screen_width-2* content_width ):3* screen_width。显然,该比率是随着content_width和screen_width而变化的,不能满足我们的需求

2.layout_width: fill_parent

第一步,三个TextView的layout_width空间分别为

layout_width1= screen_width

layout_width2= screen_width

layout_width3= screen_width

第二步,三个TextView 的layout_weight比例分配空间分别为

layout_weight1=(screen_width-3* screen_width )/6=- screen_width /3

layout_weight2= ( screen_width-3* screen_width )/3=-2* screen_width /3

layout_weight3= ( screen_width-3* screen_width )/2=- screen_width

第三步,根据计算公式, 子视图实际空间 = layout_width / layout_height分配空间+layout_weight比例分配空间 三个TextView的空间分别为

textview1= screen_width - screen_width /3 = 2 * screen_width /3

textview2= screen_width - 2 * screen_width /3 = screen _width/3

textview3= screen_width - screen_width = 0

那么textview1:textview2:textview3=2:1:0,符合我们观察到的现象!但不满足需求。

3.layout_width:"0dp"

第一步,三个TextView的layout_width空间分别为

layout_width1=0dp

layout_width2=0dp

layout_width3=0dp

第二步,三个TextView 的layout_weight比例分配空间分别为

layout_weight1=(screen_width-0dp)/6= screen_width /6

layout_weight2=( screen_width-0dp)/3= screen_width /3

layout_weight3=(screen_width-0dp)/2= screen_width /2

第三步,根据计算公式, 子视图实际空间 = layout_width / layout_height分配空间+layout_weight比例分配空间 三个TextView的空间分别为

textview1= 0dp+screen_width/6= screen_width /6

textview2= 0dp+screen_width/3= screen_width /3

textview3= 0dp+screen_width/2= screen_width /2

那么textview1:textview2:textview3=1:2:3,符合我们观察到的结果,完全满足我们的需求!!!


综上的分析和总结,建议在开发的过程当中,如果想根据自己的意愿,按照比例分配子视图占据的空间,将你分配的方向的layout_width或layout_height属性设置为”0dp"。

日积月累:LinearLayout的andrid:layout_weight属性的使用详解


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论