layout_weight属性的那些坑



以前在写android程序的时候，就在layout_weight属性这部分吃过亏

首先看一下Layout_weight属性的作用：它是用来分配属于空间的一个属性，你可以设置他的权重。

看下面代码：

[html] view plain copy print ?

1. <span style="font-size: 14px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <EditText   
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content"  
9.         android:layout_weight="1"  
10.         android:text="Text1"/>  
11.     <EditText   
12.         android:layout_width="fill_parent"  
13.         android:layout_height="wrap_content"  
14.         android:layout_weight="2"  
15.         android:text="Text2"/>  
16.   
17. </LinearLayout></span>  

<span style="font-size: 14px;"><?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" >
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Text1"/>
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Text2"/>

</LinearLayout></span>

显示结果：

很明显最后结果是上面的Text1和下面的Text2以1：2的比例瓜分手机屏幕

但是当我们把Text1和Text2的layout_height设成fill_parent 或者match_parent的话

[html] view plain copy print ?

1. <span style="font-size: 14px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <EditText   
7.         android:layout_width="fill_parent"  
8.         android:layout_height="match_parent"  
9.         android:layout_weight="1"  
10.         android:text="Text1"/>  
11.     <EditText   
12.         android:layout_width="fill_parent"  
13.         android:layout_height="match_parent"  
14.         android:layout_weight="2"  
15.         android:text="Text2"/>  
16.   
17. </LinearLayout></span>  

<span style="font-size: 14px;"><?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" >
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Text1"/>
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:text="Text2"/>

</LinearLayout></span>

显示结果为：

有意思的现象出现了，此时的Text1和Text2是以2：1的比例分布的

很奇怪的现象，其实layout_weight的意思是对剩余的空间进行瓜分

也就是说，这里的两个Text，都是1 * parentHeight

剩余空间就是1 * parentHeight - 2 * parentHeight = -1 * parentHeight

此时的Text1就会变成：1 * parentHeight + (-1 * parentHeight * 1/3) = 2/3 * parentHeight

同理此时的Text2就会变成：1 * parentHeight + (-1 * parentHeight * 2/3) = 1/3 * parentHeight

所以就会得出Text1：Text2的比值为2 : 1，跟我们想象的1：2正好相反

因此，在我们用layout_weight属性的时候，

如果控件的父控件是水平方向，不要设置layout_width为fill_parent或者match_parent，

官方推荐设置控件的layout_width="0dp"(用wrap_content也是可以的)

如果控件的父控件是垂直方向，不要设置layout_height为fill_parent或者match_parent，

官方推荐设置控件的layout_height="0dp"(用wrap_content也是可以的)

那么当设置了layout_weight的控件遇到没设置layout_weight的控件会发生什么呢

[html] view plain copy print ?

1. <span style="font-size: 14px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <EditText   
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content"  
9.         android:text="Text1"/>  
10.     <EditText   
11.         android:layout_width="fill_parent"  
12.         android:layout_height="0dp"  
13.         android:layout_weight="1"  
14.         android:text="Text2"/>  
15.     <EditText   
16.         android:layout_width="fill_parent"  
17.         android:layout_height="wrap_content"  
18.         android:text="Text3"/>  
19.   
20. </LinearLayout></span>  

<span style="font-size: 14px;"><?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" >
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Text1"/>
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Text2"/>
    <EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Text3"/>

</LinearLayout></span>

显示结果：

如图所见，设置有layout_weight属性的控件会按照比例分割剩余空间

如果只有一个设置layout_weight属性的控件，那么它将独占剩余空间

[html] view plain copy print ?

1. <pre snippet_file_name="blog_20140312_3_4767032" code_snippet_id="232432"></pre>  
2. <pre></pre>  
3.       
4.         <div style="padding-top: 20px;">           
5.             <p style="font-size: 12px;">版权声明：本文为博主原创文章，未经博主允许不得转载。</p>  
6.         </div>  

<pre code_snippet_id="232432" snippet_file_name="blog_20140312_3_4767032">

版权声明：本文为博主原创文章，未经博主允许不得转载。