深入了解layout_weight的用途

导语 :当需要某个View自动占满剩余空间,或者多个View平分空间时,你会想到使用layout_weight,但如果想按比例使用空间, 你会怎么用呢,又有什么坑呢?

layout_weight是LinearLayout中的一个属性,通常我们用途是

1.给其中一个view设上layout_weight=1,这样这个view就能把剩下的空间都占满.

2.如果是想让多个view占一样的宽(高), 就设上同样的layout_weight=1.这样这几个View就会等分parent的宽(高)

layout_weight的官方解释是, 下面是直译的

标示将LinearLayout中的额外空间分配给与这些View的比重。如果View不应该被拉伸,则指定0。否则,在重量大于0的所有View中,额外的空间将被评估。可能是浮点值,如“1.2”

其实layout_weight还可以用于将空间按比例分配

比如你有3个TextView,你想将这3个TextView按1:2:3的比例使用横向空间,你就可以把这3个View的layout_weight设成1,2,3.如下面的xml

<LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            style="@style/LinearLayoutViewStyle1"
            android:text="123456789" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            style="@style/LinearLayoutViewStyle2"
            android:text="123456789" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            style="@style/LinearLayoutViewStyle3"
            android:text="123456789" />
    LinearLayout>

 实际的效果

宽度比是1:1.25:1.51, 并不是1:2:3,问题出在哪呢?

仔细观察,数字后面的空间好像是1:2:3,仔细一量,确实是1:2:3, 为什么是剩余空间的比是1:2:3呢?

下面我再给出一些例子:

这里给出6个例子,每个都是一行有3个TextView, 每个TextView的layout_weight都如图所示,还有差别就是每个例子的layout_width是不一样的,xml的源代码见附件

其中对于layout_weight是1,2,3的例子,只有b和c是按比例占空间的.

实际上View的宽度公式是:

实际宽度 = 根据layout_width获得的宽度 + 剩下的宽度 * (自己的layout_weight / 所有的layout_weight)

这里剩下的宽度可能是负的哦.

例如:

a由于layout_width是wrap_content,他先把”123456789”所占的空间w1占了,剩下的空间w2=屏幕的宽度- 3*w1, 然后再对w2分成6份,按layout_weight分给3个TextView.

b虽然layout_width是wrap_content,但他的text是空,所以根据layout_width占的空间是0dp,剩下的空间就是屏幕的宽度,然后再按layout_weight分就是1:2:3

c由于layout_width是0dp,所以根据layout_width占的空间是0dp,剩下的空间就是屏幕的宽度,然后再按layout_weight分就是1:2:3

d由于layout_width是match_parent,根据layout_width每个TextView占的空间是屏幕的宽度w,这样剩下的空间w2 = w

  • 3w = -2w,再按layout_weight对w2进行分配,

第一个View的实际分配的宽度tw1 = w + (1/6) * (-2w) = w - 1/3 * w = 2/3 * w

第二个View的实际分配的宽度tw2 = w + (2/6) * (-2w) = w - 2/3 * w = 1/3 * w

第三个View的实际分配的宽度tw3 = w + (3/6) * (-2w) = w - 3/3 * w = 0

所以看到的宽度比就是2:1:0

(注:有点奇葩的是,这个Linearlayout的高度变成“123456789”的纵向9行的高度,但又没任何和内容显示)

e由于layout_width是match_parent,根据layout_width每个TextView占的空间是屏幕的宽度w,这样剩下的空间w2 = w

  • 3w = -2w,再按layout_weight对w2进行分配,

第一个View的实际分配的宽度tw1 = w + (1/3) * (-2w) = w - 2/3 * w = 1/3 * w

第二个View的实际分配的宽度tw2 = w + (1/3) * (-2w) = w - 2/3 * w = 1/3 * w

第三个View的实际分配的宽度tw3 = w + (1/3) * (-2w) = w - 2/3 * w = 1/3 * w

所以看到的宽度比就是1:1:1

f的效果等同于a的效果

结论:

上面可以不记,只要记住下面的要点就够了

和layout_weight搭配的layout_width(或layout_height)一定要用”0dp”,绝对不要用”match_parent”,也不要用”wrap_content”和固定长度

重要的事情说三遍:

和layout_weight搭配的layout_width(或layout_height)一定要用”0dp”

和layout_weight搭配的layout_width(或layout_height)一定要用”0dp”

和layout_weight搭配的layout_width(或layout_height)一定要用”0dp”

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5 Canvas 实现矢量工控风机叶轮旋转

之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果:http://www.hightopo.com...

1928
来自专栏拂晓风起

cocos2d-js 越来越慢的定时器schedule 制作不变慢的定时器

984
来自专栏移动端开发

Swift 实现俄罗斯方块详细思路解析(附完整项目)

    俄罗斯方块,是一款我们小时候都玩过的小游戏,我自己也是看着书上的思路,学着用 Swift 来写这个小游戏,在写这个游戏的过程中,除了一些位置的计算,数据...

1092
来自专栏androidBlog

NestedScrolling 机制深入解析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

763
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

501
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之五——Patterns模型的应用

    Patterns称为模型可能并不直观,说一个场景我们或许就可以更加容易的理解Patterns。在开发中,开发者经常会遇到这样的需求,将某个图片或者某个图...

833
来自专栏我杨某人的青春满是悔恨

教你写个图片轮播

这是一个图片轮播的 Demo,上半部分用 CollectionView 实现,没有无限循环效果,下半部分是用 ScrollView 实现的,自动无限轮播。代码地...

1155
来自专栏web前端教室

面对一个需求,我们怎么开始?

之前在作业区我出过一道题“用JS做一个抛物线下落的球”。这个题就是一个需求,内容是让你做一个抛物线下落的球。 我们把这个需求拆分一下,会发现它里面有以下几个内容...

1775
来自专栏移动端开发

Swift 实现俄罗斯方块详细思路解析(附完整项目)

一:写在开发前     俄罗斯方块,是一款我们小时候都玩过的小游戏,我自己也是看着书上的思路,学着用 Swift 来写这个小游戏,在写这个游戏的过程中,除了一些...

3238
来自专栏IMWeb前端团队

React 渲染机制解析

React渲染过程 我们都知道使用React可以使得网页的性能有很大的提高,本文具体探究它是通过什么样的渲染机制做到的。 在页面一开始打开的时候,React会调...

3056

扫码关注云+社区