Chinaunix首页 | 论坛 | 博客

牛头gmobi.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

raul.liu

  • 博客访问： 335397
  • 博文数量： 102
  • 博客积分： 3140
  • 博客等级： 中校
  • 技术积分： 680
  • 用 户 组： 普通用户
  • 注册时间： 2008-12-28 11:44
个人简介

开阔未来

文章分类

全部博文（102）

文章存档

2015年（10）

2014年（1）

2013年（1）

2012年（4）

2011年（8）

2010年（24）

2009年（51）

2008年（3）

我的朋友
最近访客
推荐博文
相关博文
Android 对Layout_weight属性完全解析以及使用ListView来实现表格

分类： Android平台

2015-01-23 09:05:35

http://blog.csdn.net/xiaanming/article/details/13630837

转载请注明出处：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个文本框

[html] view plaincopy
  1. <LinearLayout xmlns:android=""  
  2.     xmlns: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=""  
  2.     xmlns: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=""  
  2.     xmlns: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=""  
  2.     xmlns: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=""  
  2.     xmlns: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>  
一个线性布局，然后就是表格的title布局，下面就是一个ListView了，很简单的布局，接下来就是ListView每个item的布局
[html] view plaincopy
  1. xml version="1.0" encoding="UTF-8"?>  
  2. <LinearLayout xmlns: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>  
3个TextView的宽度都是0dip，那两个View是中间的分割线，3个TextView的权重比值是2:1:1 ，这样子3个TextView不会因为里面内容的长度而变形
[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. }  
用来存放ListView每个item数据的实体类
[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 list;  
  14.     private LayoutInflater inflater;  
  15.       
  16.     public TableAdapter(Context context, List 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. }  
ListView的适配器类，代码很简单，我也没有注释也不去讲解，相信大家都看得懂这些代码，这就是一个基本的自己定义的适配器类，最后就是Activity界面代码

[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 list = new ArrayList();  
  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这个属性，我们就轻松实现了表格的功能，通过本文章相信大家对这个属性有了深刻的理解，大家有什么疑问可以在下面留言，我会为大家解答的
阅读(348) | 评论(0) | 转发(0) |
0

上一篇：Android Performance Case Study

下一篇：Android初始化的时候获取加载的布局的宽高(续)--RelativeLayout

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6