311      技術社區[雲棲]

Android 對Layout_weight屬性完全解析以及使用ListView來實現表格

android:layout_weight是指LinearLayout先給裏麵的控件分配完大小之後剩餘空間的權重，也許你暫時還是摸不到頭腦，不過沒有關係，下麵我通過例子來解釋layout_weight到底是什麼意思，先看下麵的布局文件，一個LinearLayout,裏麵3個文本框

[html] view plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <TextView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:background="#0045f5"  
11.         android:gravity="center"  
12.         android:text="1" />  
13.   
14.     <TextView  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:background="#00ff47"  
18.         android:gravity="center"  
19.         android:text="2"   
20.         android:layout_weight="1"/>  
21.   
22.     <TextView  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="wrap_content"  
25.         android:background="#ff5600"  
26.         android:gravity="center"  
27.         android:layout_weight="1"  
28.         android:text="3" />  
29.   
30. </LinearLayout>  

為什麼效果是這個樣子呢，首先3個文本框的寬度都是“wrap_content”，根據視圖內部內容自動擴展，LinearLayout就先給3個TextView分配空間適當的空間大小，假設為每個TextView分配10dip的寬度，屏幕的寬度為480dip, 那麼LinearLayout的剩餘空間就是 480 - 3*10 = 450dip，由於第一個TextView沒有設置layout_weight，所以它的寬度就是10dip,而後麵兩個TextView設置layout_weight都是1，所以後麵兩個TextView就平均分配LinearLayout的剩餘空間，即為 450 / 2  = 225dip，所以後麵兩個TextView的寬度為10 + 225 = 235dip

如果我們實際開發中，你設置裏麵控件的寬度為”wrap_content“，然後想讓裏麵的控件按比例占用大小，那麼你就大錯特錯了，為什麼呢？我們看看下麵的代碼

[html] view plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <TextView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:background="#0045f5"  
11.         android:gravity="center"  
12.         android:text="1" />  
13.   
14.     <TextView  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:background="#00ff47"  
18.         android:gravity="center"  
19.         android:text="2222222222222222222"   
20.         android:layout_weight="1"/>  
21.   
22.     <TextView  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="wrap_content"  
25.         android:background="#ff5600"  
26.         android:gravity="center"  
27.         android:layout_weight="1"  
28.         android:text="3" />  
29. </LinearLayout>  

你本來想讓後麵兩個TextView平均分配剩餘控件，可是下麵的效果卻並不是你想要的，如下圖

其實因為3個TextView的寬度都是”wrap_content“，LinearLayout會先按照TextView裏麵的內容分配好大小，由於第2個TextView內容很多，所以LinearLayout為其分配更多的空間，使得剩餘空間變小了，原理和上麵的一樣，那麼我們在實際開發中要怎麼設置按比例分配呢。知道原理其實就很簡單，比如我們想要3個TextView按照1:2:3的效果

[html] view plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <TextView  
8.         android:layout_width="0dip"  
9.         android:layout_height="wrap_content"  
10.         android:background="#0045f5"  
11.         android:gravity="center"  
12.         android:layout_weight="1"  
13.         android:text="1" />  
14.   
15.     <TextView  
16.         android:layout_width="0dip"  
17.         android:layout_height="wrap_content"  
18.         android:background="#00ff47"  
19.         android:gravity="center"  
20.         android:text="2222222222222222222"   
21.         android:layout_weight="2"/>  
22.   
23.     <TextView  
24.         android:layout_width="0dip"  
25.         android:layout_height="wrap_content"  
26.         android:background="#ff5600"  
27.         android:gravity="center"  
28.         android:layout_weight="3"  
29.         android:text="3" />  
30. </LinearLayout>  

我們隻需要將3個TextView的寬度設置為0dip,首先LinearLayout為3個TextView分配0dip的寬度，剩餘空間就是 480 - 3 * 0 = 480dip，然後剩餘空間在按照權重分配，所以我們看到的效果就是1:2:3

通過上麵的講解，也許你會得出一個結論，權重越大，LinearLayout為其分配的空間就越大，我隻能說這個結論下有點早了，我們繼續看布局

[html] view plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <TextView  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:background="#0045f5"  
11.         android:gravity="center"  
12.         android:layout_weight="1"  
13.         android:text="1" />  
14.   
15.     <TextView  
16.         android:layout_width="fill_parent"  
17.         android:layout_height="wrap_content"  
18.         android:background="#00ff47"  
19.         android:gravity="center"  
20.         android:text="2"   
21.         android:layout_weight="2"/>  
22.   
23.     <TextView  
24.         android:layout_width="fill_parent"  
25.         android:layout_height="wrap_content"  
26.         android:background="#ff5600"  
27.         android:gravity="center"  
28.         android:layout_weight="2"  
29.         android:text="3" />  
30. </LinearLayout>  

也許你會很納悶，怎麼不是你想要的1:2:2的效果，我來為你解決疑惑吧，原理跟上麵的還是一樣的，因為我們這裏為每個TextView設置的寬度為”fill_parent",即為充滿整個LinearLayout，假如屏幕依然為480dip， 首先LinearLayout為3個TextView分配的寬度為480dip，屏幕剩餘寬度為 480 - 3* 480 = -960dip,然後3個TextView按照權重分配剩餘空間，第一個TextView分配寬度為 480 + (-960) * (1/5) = 288dip,後麵兩個TextView就為480 + (-960) * (2/5) = 96dip，比例為3:1:1

通過上麵的例子和分析，你是不是對Layout_weight屬性理解很透徹了呢，如果我們想要按照權重比例來分配LinearLayout,我們需要將其寬度設置為0dip，如果我們將其寬度設置為“fill_parent"的時候，其控件所占的比例不是權重的比例，我們需要自行計算比例

接下來我們就通過Layout_weight用ListView來實現表格，我們先看Activity的布局

[html] view plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:orientation="vertical"  
4.     android:layout_margin="10dip"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent" >  
7.       
8.     <include   
9.         layout="@layout/list_item"  
10.         android:id="@+id/table_title"/>  
11.   
12.     <ListView  
13.         android:id="@+id/list"  
14.         android:divider="#f9b68b"  
15.         android:dividerHeight="1.0dip"  
16.         android:scrollbars="none"  
17.         android:background="@drawable/listview_bg"  
18.         android:cacheColorHint="@android:color/transparent"  
19.         android:fadingEdge="none"  
20.         android:layout_width="fill_parent"  
21.         android:layout_height="wrap_content" >  
22.     </ListView>  
23.   
24. </LinearLayout>  

[html] view plaincopy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:orientation="horizontal"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="wrap_content" >  
6.   
7.     <TextView  
8.         android:id="@+id/text_name"  
9.         android:layout_width="0dip"  
10.         android:layout_height="wrap_content"  
11.         android:layout_weight="2"  
12.         android:gravity="center"  
13.         android:paddingBottom="10dip"  
14.         android:paddingTop="10dip"  
15.         android:text="姓名" />  
16.       
17.     <View   
18.         android:layout_width="1.5dip"  
19.         android:layout_height="fill_parent"  
20.         android:background="#f9b68b"/>  
21.   
22.     <TextView  
23.         android:id="@+id/text_sex"  
24.         android:layout_width="0dip"  
25.         android:layout_height="wrap_content"  
26.         android:layout_weight="1"  
27.         android:paddingBottom="10dip"  
28.         android:paddingTop="10dip"  
29.         android:gravity="center"  
30.         android:text="性別" />  
31.       
32.      <View   
33.         android:layout_width="1.5dip"  
34.         android:layout_height="fill_parent"  
35.         android:background="#f9b68b"/>  
36.   
37.     <TextView  
38.         android:id="@+id/text_age"  
39.         android:layout_width="0dip"  
40.         android:layout_height="wrap_content"  
41.         android:layout_weight="1"  
42.         android:paddingBottom="10dip"  
43.         android:paddingTop="10dip"  
44.         android:gravity="center"  
45.         android:text="年齡" />  
46.   
47. </LinearLayout>  

[java] view plaincopy

1. package com.example.listviewtable;  
2.   
3. public class Person {  
4.     private String name;  
5.     private String sex;  
6.     private int age;  
7.       
8.     public Person() {  
9.         super();  
10.     }  
11.       
12.     public Person(String name, String sex, int age) {  
13.         super();  
14.         this.name = name;  
15.         this.sex = sex;  
16.         this.age = age;  
17.     }  
18.     public String getName() {  
19.         return name;  
20.     }  
21.     public void setName(String name) {  
22.         this.name = name;  
23.     }  
24.     public String getSex() {  
25.         return sex;  
26.     }  
27.     public void setSex(String sex) {  
28.         this.sex = sex;  
29.     }  
30.     public int getAge() {  
31.         return age;  
32.     }  
33.     public void setAge(int age) {  
34.         this.age = age;  
35.     }  
36.       
37.       
38. }  

[java] view plaincopy

1. package com.example.listviewtable;  
2.   
3. import java.util.List;  
4.   
5. import android.content.Context;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.BaseAdapter;  
10. import android.widget.TextView;  
11.   
12. public class TableAdapter extends BaseAdapter {  
13.     private List<Person> list;  
14.     private LayoutInflater inflater;  
15.       
16.     public TableAdapter(Context context, List<Person> list){  
17.         this.list = list;  
18.         inflater = LayoutInflater.from(context);  
19.     }  
20.   
21.     @Override  
22.     public int getCount() {  
23.         return list.size();  
24.     }  
25.   
26.     @Override  
27.     public Object getItem(int position) {  
28.         return list.get(position);  
29.     }  
30.   
31.     @Override  
32.     public long getItemId(int position) {  
33.         return position;  
34.     }  
35.   
36.     @Override  
37.     public View getView(int position, View convertView, ViewGroup parent) {  
38.         Person person = (Person) this.getItem(position);  
39.         ViewHolder viewHolder;  
40.         if(convertView == null){  
41.             viewHolder = new ViewHolder();  
42.             convertView = inflater.inflate(R.layout.list_item, null);  
43.             viewHolder.mTextName = (TextView) convertView.findViewById(R.id.text_name);  
44.             viewHolder.mTextSex = (TextView) convertView.findViewById(R.id.text_sex);  
45.             viewHolder.mTextAge = (TextView) convertView.findViewById(R.id.text_age);  
46.             convertView.setTag(viewHolder);  
47.         }else{  
48.             viewHolder = (ViewHolder) convertView.getTag();  
49.         }  
50.           
51.         viewHolder.mTextName.setText(person.getName());  
52.         viewHolder.mTextSex.setText(person.getSex());  
53.         viewHolder.mTextAge.setText(person.getAge() + "歲");  
54.           
55.           
56.         return convertView;  
57.     }  
58.       
59.     public static class ViewHolder{  
60.         public TextView mTextName;  
61.         public TextView mTextSex;  
62.         public TextView mTextAge;  
63.           
64.     }  
65.   
66. }  

[java] view plaincopy

1. package com.example.listviewtable;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.app.Activity;  
7. import android.graphics.Color;  
8. import android.os.Bundle;  
9. import android.view.ViewGroup;  
10. import android.widget.ListView;  
11.   
12. public class ListTableActivity extends Activity {  
13.   
14.     @Override  
15.     protected void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.activity_main);  
18.           
19.         //設置表格標題的背景顏色  
20.         ViewGroup tableTitle = (ViewGroup) findViewById(R.id.table_title);  
21.         tableTitle.setBackgroundColor(Color.rgb(255, 100, 10));  
22.           
23.         List<Person> list = new ArrayList<Person>();  
24.         list.add(new Person("劉德華", "男", 50));  
25.         list.add(new Person("劉德華", "男", 50));  
26.         list.add(new Person("劉德華", "男", 50));  
27.         list.add(new Person("劉德華", "男", 50));  
28.         list.add(new Person("劉德華", "男", 50));  
29.         list.add(new Person("劉德華", "男", 50));  
30.         list.add(new Person("劉德華", "男", 50));  
31.         list.add(new Person("劉德華", "男", 50));  
32.         list.add(new Person("劉德華", "男", 50));  
33.         list.add(new Person("劉德華", "男", 50));  
34.           
35.         ListView tableListView = (ListView) findViewById(R.id.list);  
36.         TableAdapter adapter = new TableAdapter(this, list);  
37.         tableListView.setAdapter(adapter);  
38.     }  
39.   
40.   
41. }  

通過layout_weight這個屬性，我們就輕鬆實現了表格的功能

最後更新：2017-04-03 12:55:58

  上一篇： 移動APP創業思緒之一：綠色生活

  下一篇： Catalyst 優化邏輯執行計劃規則