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

轉載請註明出處：http://blog.csdn.net/xiaanming/article/details/13630837

今天主要說的是對Layout_weight屬性的完全解析，以及利用Layout_weight這個屬性使用ListView來實現表格的效果，我們都知道Android裏面專門有一個TableLayout來實現表格的，說實話，我平常開發中用TableLayout還是比較少的，幾乎沒有用到，我們完全可以用LinearLayout和RelativeLayout來代替TableLayout的使用，自己開發中主要使用LinearLayout，RelativeLayout這兩種佈局，不過剛開始我還是偏愛於RelativeLayout，因爲在RelativeLayout裏面我們可以直接拖拽控件來佈局，比較方便，現在對這兩種佈局偏愛各半吧，LinearLayout裏面有一個屬性android:layout_weight比較重要，我們在開發中常常使用它來調節界面效果，也行很多人還不瞭解這個屬性的使用，不過沒關係，我首先先帶大家理解android:layout_weight屬性然後在利用它來實現一個表格效果

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:layout_weight="1"
        android:text="3" />

</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“，然後想讓裏面的控件按比例佔用大小，那麼你就大錯特錯了，爲什麼呢？我們看看下面的代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:layout_weight="1"
        android:text="3" />
</LinearLayout>

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:layout_weight="1"
        android:text="1" />

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222"
        android:layout_weight="2"/>

    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:layout_weight="3"
        android:text="3" />
</LinearLayout>

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:layout_weight="1"
        android:text="1" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2"
        android:layout_weight="2"/>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:layout_weight="2"
        android:text="3" />
</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的佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_margin="10dip"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <include
        layout="@layout/list_item"
        android:id="@+id/table_title"/>

    <ListView
        android:id="@+id/list"
        android:divider="#f9b68b"
        android:dividerHeight="1.0dip"
        android:scrollbars="none"
        android:background="@drawable/listview_bg"
        android:cacheColorHint="@android:color/transparent"
        android:fadingEdge="none"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

一個線性佈局，然後就是表格的title佈局，下面就是一個ListView了，很簡單的佈局，接下來就是ListView每個item的佈局

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/text_name"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="center"
        android:paddingBottom="10dip"
        android:paddingTop="10dip"
        android:text="姓名" />

    <View
        android:layout_width="1.5dip"
        android:layout_height="fill_parent"
        android:background="#f9b68b"/>

    <TextView
        android:id="@+id/text_sex"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingBottom="10dip"
        android:paddingTop="10dip"
        android:gravity="center"
        android:text="性別" />

     <View
        android:layout_width="1.5dip"
        android:layout_height="fill_parent"
        android:background="#f9b68b"/>

    <TextView
        android:id="@+id/text_age"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingBottom="10dip"
        android:paddingTop="10dip"
        android:gravity="center"
        android:text="年齡" />

</LinearLayout>

3個TextView的寬度都是0dip，那兩個View是中間的分割線，3個TextView的權重比值是2:1:1 ，這樣子3個TextView不會因爲裏面內容的長度而變形

package com.example.listviewtable;

public class Person {
    private String name;
    private String sex;
    private int age;

    public Person() {
        super();
    }

    public Person(String name, String sex, int age) {
        super();
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }


}

用來存放ListView每個item數據的實體類

package com.example.listviewtable;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class TableAdapter extends BaseAdapter {
    private List<Person> list;
    private LayoutInflater inflater;

    public TableAdapter(Context context, List<Person> list){
        this.list = list;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Person person = (Person) this.getItem(position);
        ViewHolder viewHolder;
        if(convertView == null){
            viewHolder = new ViewHolder();
            convertView = inflater.inflate(R.layout.list_item, null);
            viewHolder.mTextName = (TextView) convertView.findViewById(R.id.text_name);
            viewHolder.mTextSex = (TextView) convertView.findViewById(R.id.text_sex);
            viewHolder.mTextAge = (TextView) convertView.findViewById(R.id.text_age);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.mTextName.setText(person.getName());
        viewHolder.mTextSex.setText(person.getSex());
        viewHolder.mTextAge.setText(person.getAge() + "歲");


        return convertView;
    }

    public static class ViewHolder{
        public TextView mTextName;
        public TextView mTextSex;
        public TextView mTextAge;

    }

}

ListView的適配器類，代碼很簡單，我也沒有註釋也不去講解，相信大家都看得懂這些代碼，這就是一個基本的自己定義的適配器類，最後就是Activity界面代碼

package com.example.listviewtable;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.ListView;

public class ListTableActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //設置表格標題的背景顏色
        ViewGroup tableTitle = (ViewGroup) findViewById(R.id.table_title);
        tableTitle.setBackgroundColor(Color.rgb(255, 100, 10));

        List<Person> list = new ArrayList<Person>();
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));
        list.add(new Person("劉德華", "男", 50));

        ListView tableListView = (ListView) findViewById(R.id.list);
        TableAdapter adapter = new TableAdapter(this, list);
        tableListView.setAdapter(adapter);
    }


}

運行程序效果如下：

通過layout_weight這個屬性，我們就輕鬆實現了表格的功能，通過本文章相信大家對這個屬性有了深刻的理解，大家有什麼疑問可以在下面留言，我會爲大家解答的
項目源碼，點擊下載