Android 对Layout_weight属性完全解析以及使用ListView来实现表格



Android 对Layout_weight属性完全解析以及使用ListView来实现表格。

今天主要说的是对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个文本框

 

  1. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=”http://schemas.android.com/tools”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”horizontal” >
  6.     <TextView
  7.         android:layout_width=”wrap_content”
  8.         android:layout_height=”wrap_content”
  9.         android:background=”#0045f5″
  10.         android:gravity=”center”
  11.         android:text=”1″ />
  12.     <TextView
  13.         android:layout_width=”wrap_content”
  14.         android:layout_height=”wrap_content”
  15.         android:background=”#00ff47″
  16.         android:gravity=”center”
  17.         android:text=”2″
  18.         android:layout_weight=”1″/>
  19.     <TextView
  20.         android:layout_width=”wrap_content”
  21.         android:layout_height=”wrap_content”
  22.         android:background=”#ff5600″
  23.         android:gravity=”center”
  24.         android:layout_weight=”1″
  25.         android:text=”3″ />
  26. </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“,然后想让里面的控件按比例占用大小,那么你就大错特错了,为什么呢?我们看看下面的代码

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

你本来想让后面两个TextView平均分配剩余控件,可是下面的效果却并不是你想要的,如下图

 

其实因为3个TextView的宽度都是”wrap_content“,LinearLayout会先按照TextView里面的内容分配好大小,由于第2个TextView内容很多,所以LinearLayout为其分配更多的空间,使得剩余空间变小了,原理和上面的一样,那么我们在实际开发中要怎么设置按比例分配呢。知道原理其实就很简单,比如我们想要3个TextView按照1:2:3的效果

 

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

我们只需要将3个TextView的宽度设置为0dip,首先LinearLayout为3个TextView分配0dip的宽度,剩余空间就是 480 – 3 * 0 = 480dip,然后剩余空间在按照权重分配,所以我们看到的效果就是1:2:3

 

通过上面的讲解,也许你会得出一个结论,权重越大,LinearLayout为其分配的空间就越大,我只能说这个结论下有点早了,我们继续看布局

 

  1. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=”http://schemas.android.com/tools”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”horizontal” >
  6.     <TextView
  7.         android:layout_width=”fill_parent”
  8.         android:layout_height=”wrap_content”
  9.         android:background=”#0045f5″
  10.         android:gravity=”center”
  11.         android:layout_weight=”1″
  12.         android:text=”1″ />
  13.     <TextView
  14.         android:layout_width=”fill_parent”
  15.         android:layout_height=”wrap_content”
  16.         android:background=”#00ff47″
  17.         android:gravity=”center”
  18.         android:text=”2″
  19.         android:layout_weight=”2″/>
  20.     <TextView
  21.         android:layout_width=”fill_parent”
  22.         android:layout_height=”wrap_content”
  23.         android:background=”#ff5600″
  24.         android:gravity=”center”
  25.         android:layout_weight=”2″
  26.         android:text=”3″ />
  27. </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的布局

 

  1. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=”http://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.     <include
  8.         layout=”@layout/list_item”
  9.         android:id=”@+id/table_title”/>
  10.     <ListView
  11.         android:id=”@+id/list”
  12.         android:divider=”#f9b68b”
  13.         android:dividerHeight=”1.0dip”
  14.         android:scrollbars=”none”
  15.         android:background=”@drawable/listview_bg”
  16.         android:cacheColorHint=”@android:color/transparent”
  17.         android:fadingEdge=”none”
  18.         android:layout_width=”fill_parent”
  19.         android:layout_height=”wrap_content” >
  20.     </ListView>
  21. </LinearLayout>

一个线性布局,然后就是表格的title布局,下面就是一个ListView了,很简单的布局,接下来就是ListView每个item的布局

 

 

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

3个TextView的宽度都是0dip,那两个View是中间的分割线,3个TextView的权重比值是2:1:1 ,这样子3个TextView不会因为里面内容的长度而变形

 

 

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

用来存放ListView每个item数据的实体类

 

 

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

ListView的适配器类,代码很简单,我也没有注释也不去讲解,相信大家都看得懂这些代码,这就是一个基本的自己定义的适配器类,最后就是Activity界面代码

 

 

  1. package com.example.listviewtable;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.Activity;
  5. import android.graphics.Color;
  6. import android.os.Bundle;
  7. import android.view.ViewGroup;
  8. import android.widget.ListView;
  9. public class ListTableActivity extends Activity {
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         //设置表格标题的背景颜色
  15.         ViewGroup tableTitle = (ViewGroup) findViewById(R.id.table_title);
  16.         tableTitle.setBackgroundColor(Color.rgb(255, 100, 10));
  17.         List<Person> list = new ArrayList<Person>();
  18.         list.add(new Person(“刘德华”, ”男”, 50));
  19.         list.add(new Person(“刘德华”, ”男”, 50));
  20.         list.add(new Person(“刘德华”, ”男”, 50));
  21.         list.add(new Person(“刘德华”, ”男”, 50));
  22.         list.add(new Person(“刘德华”, ”男”, 50));
  23.         list.add(new Person(“刘德华”, ”男”, 50));
  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.         ListView tableListView = (ListView) findViewById(R.id.list);
  29.         TableAdapter adapter = new TableAdapter(this, list);
  30.         tableListView.setAdapter(adapter);
  31.     }
  32. }

运行程序效果如下:

 

 
通过layout_weight这个属性,我们就轻松实现了表格的功能,通过本文章相信大家对这个属性有了深刻的理解,大家有什么疑问可以在下面留言,我会为大家解答的
项目源码,点击下载