Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android應用中通過Layout_weight屬性用ListView實現表格

Android應用中通過Layout_weight屬性用ListView實現表格

編輯：關於Android編程

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

201645162758268.jpg (298×97)

為什麼效果是這個樣子呢，首先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平均分配剩余控件，可是下面的效果卻並不是你想要的，如下圖

201645162835339.jpg (296×110)

其實因為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>

201645162903431.jpg (294×119)

我們只需要將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>

201645162926638.jpg (296×98)

也許你會很納悶，怎麼不是你想要的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); 
  } 
 
 
}

運行程序效果如下：

201645163024613.png (480×854)

通過layout_weight這個屬性，我們就輕松實現了表格的功能，通過本文章相信大家對這個屬性有了深刻的理解。

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
深入Android Browser配置管理的詳解 Android實現為Notification加上一個進度條的方法 android 模擬器 hardWare 屬性 Android小知識庫 在 Android 上使用 RxNetty android中特殊應用跟系統特殊功能協助配合通訊問題
Android微信支付和支付寶支付服務端操作放到客戶端

前言現在的APP大部分需要接入支付功能，而支付的主流就是微信支付和支付寶
Android事件分發機制源碼分析之View篇

對於Android事件分發機制，我們在開發的過程中，肯定曾經遇到在最外層
android高分段進階攻略（5）android指南針

前段時間，有一位網友發私信給我（@伍歌），問我做過磁場傳感器可以做過指南
Android的activity學習筆記

一、什麼是activity　    Act
閱讀排行版
Copyright © Android教程網 All Rights Reserved