layout_weight 小白的理解之我的地盘听我的!(一)

前端之家收集整理的这篇文章主要介绍了layout_weight 小白的理解之我的地盘听我的!(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

"weight"顾名思义是权重的意思,layout_weight 用于给一个线性布局中的诸多视图的重要度赋值。所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大的视图就占据多大的屏幕空 间。若赋一个高于零的值,则将父视图中的可用空间分割,分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体 layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定。

ok,看下面的例子然后看效果就明白了:

<?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="vertical" >

  <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#123456"
    android:gravity="center"
    android:text="TextView1"
    android:textColor="#ffffff" />

  <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#234567"
    android:gravity="center"
    android:text="TextView2"
    android:textColor="#ffffff" />

  <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#345678"
    android:gravity="center"
    android:text="TextView3"
    android:textColor="#ffffff" />

</LinearLayout>
运行后的效果


大家看上面代码:只有TextView2使用了layout_weight属性,并赋值为了1,而TextView1和TextView3没有设置layout_weight这个属性,根据API,可知,他们默认是0。

下面我就来讲,layout_weight这个属性的真正的意思:Android系统先按照你设置的3个TextView高度layout_height值wrap_content,给你分配好他们3个的高度,然后会把剩下来的屏幕空间全部赋给TextView2,因为只有他的权重值是1,这也是为什么TextView2占了那么大的一块空间。

好了,咱们再看以下代码

<?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="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#123456"
        android:gravity="center"
        android:text="weight = 1"
        android:textColor="#ffffff" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#234567"
        android:gravity="center"
        android:text="weight = 2"
        android:textColor="#ffffff" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:background="#345678"
        android:gravity="center"
        android:text="weight = 3"
        android:textColor="#ffffff" />

</LinearLayout>
三个文本框的都是 layout_height=wrap_content 时,会得到以下效果


他们的比例会是layout_weight分别是1:2:3;可以清楚的看到他们的所占空间比例大约也是1:2:3。

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

好了,奇怪的来了!而当layout_height=“fill_parent”时,如果分别给三个TextView设置他们的layout_weight为1、2、2的话,就会出现下面的效果:(代码就不写了,直接改改参数就好了,注意第三个的权重是2)


他们的比例会是layout_weight分别是1:2:2;可以清楚的看到他们的所占空间比例大约也是3:1:1。

你会发现1的权重小,反而分的多了,这是为什么呢???

真正的原因是Layout_height="fill_parent"的原因造成的。依照上面理解我们来分析:

系统先给3个textview分配他们所要的高度fill_parent,也就是说每一都是填满他的父控件,这里就是屏幕的高度,那么这时候的剩余空间=1个parent_height-3个parent_height,

所以等于-2个parent_height (parent_height指的是屏幕高度 )

那么第一个TextView的实际所占高度应该=fill_parent的宽度,即parent_height + 他所占剩余空间的权重比列1/5 * 剩余空间大小(-2 parent_height)=3/5parent_height;

同理第二个TextView的实际所占高度=parent_height + 2/5*(-2parent_height)=1/5parent_height;

第三个TextView的实际所占高度=parent_height + 2/5*(-2parent_height)=1/5parent_height;所以就是3:1:1的比列显示了。

好了,再做一个实验,将第三了TextView的权重设为3,为什么我不先做这个实验呢,因为做了这个实验你会奔溃的,看效果图:

TextView3没有了,哈哈,你确实没有看错,这也是我这个实验后做的原因。同样的,你按照咱们的算法算一下:

剩余空间=1个parent_height-3个parent_height=-2个parent_height (parent_height指的是屏幕宽度 );

那么第一个TextView的实际所占高度=fill_parent的高度,即parent_height + 他所占剩余空间的权重比列1/6 * 剩余空间大小(-2 parent_height)=2/3parent_height;

同理第二个TextView的实际所占高度=parent_height + 2/6*(-2parent_height)=1/3parent_height;

第三个TextView的实际所占高度=parent_height + 3/6*(-2parent_height)=0parent_height;所以就是2:1:0的比列显示了。第三个就直接没有空间了。

原文链接:https://www.f2er.com/xml/298204.html

猜你在找的XML相关文章