«

LinearLayout layout_weight解析

时间:2024-3-2 19:22     作者:韩俊     分类: Android



LinearLayout是Android布局中经常使用的一种布局,layout_weight属性经在Linearlayout布局中常使用,至于layout_weight的宽度是怎样计算出来的,只有了解了其中的原理,才能真正了解layout_weight的宽度到底是怎么样确定的。

以下是Linearlayout的layout_weight计算原理(只针对orientation为horizontal讲解vertical的原理相同)。

layout_weight的宽度计算主要分为两种:

1、子View 的宽度都为wrap_contet 类型

三个LinearLayoutLA、LB、LC的都是 layout_width="wrap_content" 时,weight取值分别为1、2、3,会得到以下效果:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:background="#FF000000" >

<LinearLayout

android:id="@+id/LA"

android:orientation="horizontal"

android:background="#ffff0000"

android:textColor="@android:color/white"

android:layout_width="wrap_content"

android:layout_height="100px"

android:layout_weight="1"/>

<LinearLayout

android:id="@+id/LB"

android:orientation="horizontal"

android:background="#ffcccccc"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="2">

<TextView

android:background="#ffcccccc"

android:layout_width="300px"

android:layout_height="100px"

android:text="2"

android:textColor="@android:color/black"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout

android:id="@+id/LC"

android:orientation="horizontal"

android:background="#ffddaacc"

android:textColor="@android:color/black"

android:layout_width="wrap_content"

android:layout_height="100px"

android:layout_weight="3" />

</LinearLayout>

系统先给3个LinearLayout分配他们的宽度值wrap_content(宽度足以包含他们的内容1,2,3即可),然后会把剩下来的屏幕空间按照1:2:3的比列分配给3个LinearLayout,所以就出现了上面的图像。

计算原理:LB中有一个TextView宽度为300px,所以会先给LB分300px,然后把剩下的宽度按比例分给LA、LB、LC

LA的宽度 = (1080 - 300) / (1 +2 +3) * 1

LB的宽度 = (1080 - 300) / (1 +2 +3) * 2 + 300

LC的宽度 = (1080 - 300) / (1 +2 +3) * 3

:如果子View设有padding或者margin,先把padding或者margin去掉,然后按照上述的逻辑进行计算

如:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:background="#FF000000" >

<LinearLayout

android:id="@+id/LA"

android:orientation="horizontal"

android:background="#ffff0000"

android:textColor="@android:color/white"

android:layout_marginLeft="180px"

android:layout_width="wrap_content"

android:layout_height="100px"

android:layout_weight="1"/>

<LinearLayout

android:id="@+id/LB"

android:orientation="horizontal"

android:background="#ffcccccc"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="2">

<TextView

android:background="#ffcccccc"

android:layout_width="300px"

android:layout_height="100px"

android:text="2"

android:textColor="@android:color/black"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout

android:id="@+id/LC"

android:orientation="horizontal"

android:background="#ffddaacc"

android:textColor="@android:color/black"

android:layout_width="wrap_content"

android:layout_height="100px"

android:layout_weight="3" />

</LinearLayout>

计算原理:LA设置了marginLeft180px, LB中有一个TextView宽度为300px,所以会先把LA的marginLeft去掉,其次给LB分300px,然后把剩下的宽度按比例分给LA、LB、LC

LA的宽度 = (1080 - 180 - 300) / (1 +2 +3) * 1 = 100 ,marginLeft为180

LB的宽度 = (1080 - 180 - 300) / (1 +2 +3) * 2 + 300 = 500

LC的宽度 = (1080 - 180 - 300) / (1 +2 +3) * 3 = 300

同理:padding也是同样的计算方法

2、子View 的宽度都为fill_parent 类型

在使用fill_parent时,实际发现权重小,反而分的越多,这是为什么呢???网上很多人说是当layout_width= "fill_parent" 时,weight值越小权重越大,优先级越高,但并不清除其中的具体计算规则。

三个LinearLayoutLA、LB、LC的都是 layout_width="fill_content" 时,weight取值分别为1、2、3,会得到以下效果:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:background="#FF000000" >

<LinearLayout

android:id="@+id/LA"

android:orientation="horizontal"

android:background="#ffff0000"

android:textColor="@android:color/white"

android:layout_width="fill_parent"

android:layout_height="100px"

android:layout_weight="1"/>

<LinearLayout

android:id="@+id/LB"

android:orientation="horizontal"

android:background="#ffcccccc"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="2">

<TextView

android:background="#ffcccccc"

android:layout_width="300px"

android:layout_height="100px"

android:text="2"

android:textColor="@android:color/black"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout

android:id="@+id/LC"

android:orientation="horizontal"

android:background="#ffddaacc"

android:textColor="@android:color/black"

android:layout_width="fill_parent"

android:layout_height="100px"

android:layout_weight="3" />

</LinearLayout>


计算原理如下:

系统先给3个View分配他们所要的宽度fill_parent,也就是说每一都是填满他的父控件,这里就是屏幕的宽度

那么这时候的剩余空间=1个parent_width-3个parent_width=-2个parent_width (parent_width指的是屏幕宽度 )

LA的实际所占宽度

LA Width = fill_parent的宽度 + 他所占剩余空间的权重比列

即:LA Width = parent_width + 1/6 * ( -2 parent_width) = 2/3 parent_width

LB的实际所占宽度

LB Width = parent_width + 2/6*(-2parent_width) = 1/3parent_width;

LC的实际所占宽度 LC Width = parent_width + 3/6*(-2parent_width) = 0

所以就是2:1:0的比列显示了。

这样你也就会明白为什么当你把三个Layout_weight设置为1、2、3的话,会出现上面的效果了:

:如果子View设有padding或者margin,然后按照上述的逻辑进行计算,然后再把padding或者margin从分得的宽度中去掉

如:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:background="#FF000000" >

<LinearLayout

android:id="@+id/LA"

android:orientation="horizontal"

android:background="#ffff0000"

android:textColor="@android:color/white"

android:layout_marginLeft="180px"

android:layout_width="fill_parent"

android:layout_height="100px"

android:layout_weight="1"/>

<LinearLayout

android:id="@+id/LB"

android:orientation="horizontal"

android:background="#ffcccccc"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="2">

<TextView

android:background="#ffcccccc"

android:layout_width="300px"

android:layout_height="100px"

android:text="2"

android:textColor="@android:color/black"

android:textSize="30sp" />

</LinearLayout>

<LinearLayout

android:id="@+id/LC"

android:orientation="horizontal"

android:background="#ffddaacc"

android:textColor="@android:color/black"

android:layout_width="fill_parent"

android:layout_height="100px"

android:layout_weight="3" />

</LinearLayout>

3、总结

layout_weight并不是view的最终宽度(或者高度)的百分比,而是根据一定的规则进行计算出来的,在进行界面布局的时候一定要注意这一点。

另外:一些自定义的View中使用layout_weight可能达到的效果和上面讲述的不相同,因为自定义的VIew可能修改了View的onLayout和onMeasure函数,导致界面元素宽度计算有问题

部分内容参考以下网站 http://mobile.51cto.com/abased-375428.htm

        <p>版权声明:本文为博主原创文章,未经博主允许不得转载。</p>

标签: android

热门推荐