Android中自定义ViewGroup实现表格展示学员信息

前一段时间有个Android刚入门的朋友想实现一个表格 来展示信息，下面我们通过扩展ViewGroup 来实现一个简单的。

本文通过扩展Android ViewGroup实现表格 可用于课程信息，学生信息视图展示，实现表格方式可以用布局拼凑 也可以自定义ViewGroup方式实现。

最终效果如下：

首先创建基本模型和Activity

public class Student {

	/**
	 * 
	 */
	public Student() {
		// TODO Auto-generated constructor stub
	}
	
	public String stuId;
	public String stuName;
	public String stuFrom;
	public String stuRoom;
	public String stuClass;
	public String stuDate;

}

public class StudentInfoActivity extends Activity {


	public StudentInfoActivity() {
		
	}
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_student);
		StudentInfoView courseInfoView = (StudentInfoView) findViewById(R.id.myview);
		ArrayList<Student> list = new ArrayList<Student>();
		addList(list);
		courseInfoView.addChildViews(list);
		
	}

	private void addList(ArrayList<Student> list) {
		Student c = new Student();
		c.stuId = "stu1001";
		c.stuName = "张帆";
		c.stuFrom = "浙江";
		c.stuDate = "2014-10-09";
		c.stuRoom = "NO2105";
		c.stuClass ="一年级1班";
		list.add(c);
		
		c = new Student();
		c.stuId = "stu1002";
		c.stuName = "汪清";
		c.stuFrom = "湖北";
		c.stuDate = "2014-11-11";
		c.stuRoom = "NO2012";
		c.stuClass ="一年级1班";
		list.add(c);
		
		c = new Student();
		c.stuId = "stu1003";
		c.stuName = "李密";
		c.stuFrom = "东北";
		c.stuDate = "2014-11-10";
		c.stuRoom = "NO1901";
		c.stuClass ="一年级2班";
		list.add(c);
		
		c = new Student();
		c.stuId = "stu1004";
		c.stuName = "李坤";
		c.stuFrom = "北京";
		c.stuDate = "2014-11-12";
		c.stuRoom = "NO1204";
		c.stuClass ="一年级3班";
		list.add(c);
	}

	
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#ffffff"
    >
    <TextView 
        android:id="@+id/title"
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学员基本信息"
        android:textSize="18sp"
        android:textColor="#000000"
        android:layout_centerHorizontal="true"
        />
    <com.birds.mobile.course.StudentInfoView
        android:id="@+id/myview"
        android:layout_below="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    </com.birds.mobile.course.StudentInfoView>
    
</RelativeLayout>

下面重点介绍扩展的ViewGroup类，StudentInfoView.java

每个格子里面都是一个TextView用于显示文本，一行为一个Student信息，包括6个字段 所以这里有6列。

     int itemWidth = 0;
     int itemHeight = 0;
     @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    	int w = getDefaultSize(0, widthMeasureSpec);
    	int h = getDefaultSize(0, heightMeasureSpec);
    	int m = w/colcount;
    	itemWidth = m;
    	itemHeight = m/4;
    	int itemSpecWidth = MeasureSpec.makeMeasureSpec(itemWidth, MeasureSpec.EXACTLY);
    	int itemSpecHeigh = MeasureSpec.makeMeasureSpec(itemHeight, MeasureSpec.EXACTLY);
    	Log.d("","get item width:" + itemSpecWidth + ";" + w + ";" + h);
    	Log.d("","h:" + itemHeight + " width:" + m);
    	measureChildren(itemSpecWidth, itemSpecHeigh);
    	setMeasuredDimension(w, h);
    }

public int colcount = 6; //六列

高度我们取宽度的1/4，可以自己调整，我们把宽度和高度通过整个ViewGroup的宽度计算 ，这里刚好是屏幕的宽度 fill_parent

	protected void onLayout(boolean changed, int l, int t, int r, int b) {
			int childCount = getChildCount();
			for (int i = 0 ; i < childCount ; i++) {
				View child = getChildAt(i);
				int row = i % colcount;//第几行
				int col = i / colcount;//第几列
			    int w1 = child.getMeasuredWidth();
			    int padding = itemWidth - w1;
			    if (padding >= 5) {
			    	padding = 5; //这里是为了让每个TextView 都有个左间距，大家可以自己计算 放到中间需要计算文本内容字的宽度
			    }
				int left = row * itemWidth + padding;
				int top = col * child.getMeasuredHeight();
				int right = left + itemWidth;
				int bottom = top + child.getMeasuredHeight();
				child.layout(left, top, right, bottom);
			}
	}

数据方法。

	public void addChildViews(ArrayList<Student> list) {
		if (list == null) 
			return;
		for (Student c : list) {
			addView(createItemView(c.stuId));
			addView(createItemView(c.stuName));
			addView(createItemView(c.stuFrom));
			addView(createItemView(c.stuDate));
			addView(createItemView(c.stuRoom));
			addView(createItemView(c.stuClass));
		}
		courseList = list;
		int totalRow = (courseList.size() / colcount) * colcount;
		Log.d("","totalRow:" + totalRow);
	}
	
	private ViewGroup createItemView(String text){
		ViewGroup v = (ViewGroup) LayoutInflater.from(getContext()).inflate(R.layout.item_view, null);
		((TextView)v.findViewById(R.id.text)).setText(text);
		return v;
	}

item_view布局内容

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView 
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" 
        android:textSize = "16sp"
        android:textColor="#00CD00"
        />
</RelativeLayout>

好，现在数据基本能显示到ui上，只是还没画线。我门需要复写dispatchDraw 方法进行Canvas绘画

	protected void dispatchDraw(Canvas canvas) {
		super.dispatchDraw(canvas);
		Log.d("", "width:" + itemWidth + " heigh:" + itemHeight);
		//画水平线
		int totalRow = courseList.size();
     	for (int i = 0 ; i <= totalRow; i++) {
     		int startY = i * itemHeight;
     		int stopY = startY;
     		canvas.drawLine(0, startY, itemWidth * colcount, stopY, linePaint);
     	}
     	//画垂直线
     	for (int i = 0 ; i <= colcount; i++) {
     		int startX = i*itemWidth;
     		int stopX  = i*itemWidth;
     		int startY = 0;	
     		int stopY = itemHeight * totalRow;
     		canvas.drawLine(startX, startY, stopX, stopY, linePaint);
     	}	
        
	}

画线就是计算的过程，通过每个item的宽和高，下面是线的属性代码。

	private Paint linePaint;
	
	private void init(){
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setColor(Color.GRAY);
        linePaint.setStrokeWidth(0.5f);
	}

表格上并未显示表头 其实这个也能画出来，或者用布局拼凑也是可以的。

今天就到这里，有问题请指出，谢谢。