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属性然后在利用它来实现一个表格效果
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这个属性,我们就轻松实现了表格的功能,通过本文章相信大家对这个属性有了深刻的理解。

(0)

相关推荐

  • Android中在GridView网格视图上实现item拖拽交换的方法

    GridView基础 新建一个HelloGridView的工程 修改main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width=&q

  • 13问13答全面学习Android View绘制

    本文通过13问13答学习Android View绘制,供大家参考,具体内容如下 1.View的绘制流程分几步,从哪开始?哪个过程结束以后能看到view? 答:从ViewRoot的performTraversals开始,经过measure,layout,draw 三个流程.draw流程结束以后就可以在屏幕上看到view了. 2.view的测量宽高和实际宽高有区别吗? 答:基本上百分之99的情况下都是可以认为没有区别的.有两种情况,有区别.第一种 就是有的时候会因为某些原因 view会多次测量,那第

  • Android App界面的ListView布局实战演练

    一.继承listActivity.使用arrayAdapter 使用ListView和arrayAdapter布局,是ListView布局中最为简单的一种,首先我们会建立一个组件用来显示数据,例如main.xml <?xml version="1.0" encoding="utf-8"?> <!-- 主界面本身就是一个显示组件 --> <TextView xmlns:android="http://schemas.androi

  • Android自定义控件开发实战之实现ListView下拉刷新实例代码

    这篇博客为大家介绍一个android常见的功能--ListView下拉刷新: 首先下拉未松手时候手机显示这样的界面: 下面的代码是自定的扎样的控件: <span style="font-family: comic sans ms,sans-serif; font-size: 16px;">package com.dhsr.smartID.view; import android.content.Context; import android.util.AttributeSe

  • 从源码解析Android中View的容器ViewGroup

    这回我们是深入到ViewGroup内部\,了解ViewGroup的工作,同时会阐述更多有关于View的相关知识.以便为以后能灵活的使用自定义空间打更近一步的基础.希望有志同道合的朋友一起来探讨,深入Android内部,深入理解Android. 一.ViewGroup是什么?        一个ViewGroup是一个可以包含子View的容器,是布局文件和View容器的基类.在这个类里定义了ViewGroup.LayoutParams类,这个类是布局参数的子类. 其实ViewGroup也就是Vie

  • Android中View自定义组合控件的基本编写方法

    有很多情况下,我们只要运用好Android给我提供好的控件,经过布局巧妙的结合在一起,就是一个新的控件,我称之为"自定义组合控件". 那么,这种自定义组合控件在什么情况下用呢?或者大家在做项目时候会发现,某些布局会被重复的利用,同一个布局的XML代码块会被重复的复制黏贴多次,这样会造成代码结构混乱不说,代码量也会增大,各种控件都需要在Java代码中被申明和处理相应的逻辑,工作量着实不小,所以,必须要找到一个合理的"偷懒"的方式,开动脑经去怎么简化以上说的不必要的麻烦

  • Android App开发中使用RecyclerView实现Gallery画廊的实例

    什么是RecyclerView         RecyclerView是Android 5.0 materials design中的组件之一,相应的还有CardView.Palette等.看名字我们就能看出一点端倪,没错,它主要的特点就是复用.我们知道,Listview中的Adapter中可以实现ViewHolder的复用.RecyclerView提供了一个耦合度更低的方式来复用ViewHolder,并且可以轻松的实现ListView.GridView以及瀑布流的效果. RecyclerVie

  • 详解Android中实现ListView左右滑动删除条目的方法

    使用Scroller实现绚丽的ListView左右滑动删除Item效果 这里来给大家带来使用Scroller的小例子,同时也能用来帮助初步解除的读者更加熟悉的掌握Scroller的使用,掌握好了Scroller的使用我们就能实现很多滑动的效果.例如侧滑菜单,launcher,ListView的下拉刷新等等效果,我今天实现的是ListView的item的左右滑动删除item的效果,现在很多朋友看到这个效果应该是在Android的通知栏下拉中看到这个滑动删除的效果吧,我看到这个效果是在我之前的三星手

  • 详解Android App中使用VideoView来实现视频播放的方法

    通过VideoView播放视频的步骤: 1.在界面布局文件中定义VideoView组件,或在程序中创建VideoView组件 2.调用VideoView的如下两个方法来加载指定的视频 (1)setVidePath(String path):加载path文件代表的视频 (2)setVideoURI(Uri uri):加载uri所对应的视频 3.调用VideoView的start().stop().psuse()方法来控制视频的播放 VideoView通过与MediaController类结合使用,

  • Android App开发中RecyclerView控件的基本使用教程

    概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView.GridView. 那么有了ListView.GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecor

随机推荐