Android ListView实现Table行列效果

先来看运行效果:


就两个类，放上去运行就可以看到效果。

TableView.java

package com.iaiai;

import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

/**
 * 
 * <p>
 * Title: MainActivity.java
 * </p>
 * <p>
 * E-Mail: [e-mail]
 * </p>
 * <p>
 * QQ: 176291935
 * </p>
 * <p>
 * Http: iaiai.iteye.com
 * </p>
 * <p>
 * Create time: 2011-11-9
 * </p>
 * 
 * @author 丸子
 * @version 0.0.1
 */
public class TableView extends LinearLayout {

	private static LayoutParams FILL_FILL_LAYOUTPARAMS = new LayoutParams(
			LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT, 1);
	private static LayoutParams WAP_WAP_LAYOUTPARAMS = new LayoutParams(
			LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

	private static Paint BLACK_PAINT = new Paint();
	private static Paint WHITE_PAINT = new Paint();
	static {
		WHITE_PAINT.setColor(Color.WHITE);
		BLACK_PAINT.setColor(Color.BLACK);
	}

	private CAdapter cAdapter;

	/** 标题空间. */
	private LinearLayout titleLayout;
	private String[] title;

	private ListView listView;
	/** 数据. */
	private List<String[]> data;

	/** 列宽数据. */
	private int[] itemWidth;

	/** 当前选中行. */
	private int selectedPosition = -1;
	/** 自动列宽列. */
	private int autoWidthIndex = -1;

	private AdapterView.OnItemClickListener onItemClickListener;

	/** 行背景颜色. */
	private int[] rowsBackgroundColor;
	/** 选中行背景颜色. */
	private int selectedBackgroundColor = Color.argb(200, 224, 243, 250);
	/** 标题背景颜色. */
	private int titleBackgroundColor;
	/** 标题字体颜色. */
	private int titleTextColor = Color.argb(255, 100, 100, 100);
	/** 内容字体颜色. */
	private int contentTextColor = Color.argb(255, 100, 100, 100);
	/** 标题字体大小. */
	private float titleTextSize = 0;
	/** 内容字体大小. */
	private float contentTextSize = 0;

	/**
	 * 初始化带标题ListView
	 * 
	 * @param context
	 *            父级上下文
	 * @param title
	 *            标题数组
	 * @param data
	 *            内容列表
	 */
	public TableView(Context context, String[] title, List<String[]> data) {
		super(context);

		this.title = title;
		this.data = data;

		// 设定纵向布局
		setOrientation(VERTICAL);
		// 设定背景为白色
		setBackgroundColor(Color.WHITE);

		// 预先设定好每列的宽
		this.itemWidth = new int[title.length];
		autoWidthIndex = this.itemWidth.length - 1;
		// 计算列宽
		calcColumnWidth();

		// 添加title位置
		titleLayout = new LinearLayout(getContext());
		titleLayout.setBackgroundColor(Color.parseColor("#CCCCCC"));
		addView(titleLayout);
		// 绘制标题面板
		drawTitleLayout();

		// 添加listview
		listView = new ListView(getContext());
		listView.setPadding(0, 2, 0, 0);
		cAdapter = new CAdapter();
		listView.setAdapter(cAdapter);
		listView.setCacheColorHint(0);
		listView.setLayoutParams(FILL_FILL_LAYOUTPARAMS);
		listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				if (onItemClickListener != null)
					onItemClickListener.onItemClick(parent, view, position, id);
				setSelectedPosition(position);
				selectedPosition = position;
				cAdapter.notifyDataSetChanged();
			}
		});
		addView(listView);
	}

	/**
	 * 整体有改变时，刷新显示
	 */
	public void definedSetChanged() {
		calcColumnWidth();
		drawTitleLayout();
		cAdapter.notifyDataSetChanged();
	}

	/**
	 * 设置选中时的监听器
	 * 
	 * @param onItemClickListener
	 */
	public void setOnItemClickListener(
			AdapterView.OnItemClickListener onItemClickListener) {
		this.onItemClickListener = onItemClickListener;
	}

	/**
	 * 设置行背景颜色, 多个颜色可以作为间隔色
	 * 
	 * @param color
	 *            行背景颜色，可以为多个
	 */
	public void setItemBackgroundColor(int... color) {
		rowsBackgroundColor = color;
	}

	/**
	 * 数据总数
	 */
	public int getCount() {
		if (data == null)
			return 0;
		return data.size();
	}

	/**
	 * 当前选中数据
	 * 
	 * @param position
	 * @return
	 */
	public String[] getItem(int position) {
		if (data == null)
			return null;
		return data.get(position);
	}

	/**
	 * 设置当前选中位置
	 * 
	 * @return
	 */
	public void setSelectedPosition(int selectedPosition) {
		this.selectedPosition = selectedPosition;
	}

	/**
	 * 当前选中位置
	 * 
	 * @return
	 */
	public int getSelectedPosition() {
		return selectedPosition;
	}

	/**
	 * 设置被选中时的背景色
	 * 
	 * @param color
	 */
	public void setSelectedBackgroundColor(int color) {
		selectedBackgroundColor = color;
	}

	/**
	 * 设置标题背景色.
	 * 
	 * @param color
	 */
	public void setTitleBackgroundColor(int color) {
		titleBackgroundColor = color;
		titleLayout.setBackgroundColor(titleBackgroundColor);
	}

	/**
	 * 设置标题文字颜色
	 * 
	 * @param color
	 */
	public void setTitleTextColor(int color) {
		titleTextColor = color;
		for (int i = 0; i < titleLayout.getChildCount(); i++) {
			((TextView) titleLayout.getChildAt(i)).setTextColor(titleTextColor);
		}
	}

	/**
	 * 设置内容文字颜色
	 * 
	 * @param color
	 */
	public void setContentTextColor(int color) {
		contentTextColor = color;
	}

	/**
	 * 设置标题字体大小
	 * 
	 * @param szie
	 */
	public void setTitleTextSize(float szie) {
		titleTextSize = szie;
	}

	/**
	 * 设置内容字体大小
	 * 
	 * @param szie
	 */
	public void setContentTextSize(float szie) {
		contentTextSize = szie;
	}

	/**
	 * 
	 * 设定哪列自动列宽 从0开始计算
	 * 
	 * @param index
	 */
	public void setAutoColumnWidth(int index) {
		autoWidthIndex = index;
		for (int i = 0; i < titleLayout.getChildCount(); i++) {
			TextView tv = ((TextView) titleLayout.getChildAt(i));
			if (i == autoWidthIndex)
				tv.setLayoutParams(FILL_FILL_LAYOUTPARAMS);
			else {
				tv.setLayoutParams(WAP_WAP_LAYOUTPARAMS);
				tv.setWidth(itemWidth[i]);
			}
		}
	}

	/**
	 * 绘制标题
	 */
	private void drawTitleLayout() {
		titleLayout.removeAllViews();
		for (int i = 0; i < title.length; i++) {
			TextView tv = new CTextView(titleLayout.getContext());
			tv.setTextColor(titleTextColor);
			tv.setGravity(Gravity.CENTER);
			tv.setText(title[i]);
			if (titleTextSize > 0) {
				tv.setTextSize(titleTextSize);
			}
			tv.setPadding(5, 0, 5, 0);
			if (i == autoWidthIndex)
				tv.setLayoutParams(TableView.FILL_FILL_LAYOUTPARAMS);
			else {
				tv.setWidth(itemWidth[i]);
			}
			titleLayout.addView(tv);
		}
	}

	/**
	 * 计算列宽
	 * 
	 * @return 是否有改动
	 */
	private boolean calcColumnWidth() {
		boolean result = false;

		float textSize = new TextView(getContext()).getTextSize();

		// 计算标题列宽
		for (int i = 0; i < itemWidth.length; i++) {
			int w = (int) TableView.GetPixelByText(
					(titleTextSize > 0) ? titleTextSize : textSize, title[i]);
			if (itemWidth[i] < w) {
				itemWidth[i] = w;
				result = true;
			}
		}

		// 计算内容列宽
		if (contentTextSize > 0) {
			textSize = contentTextSize;
		}
		for (int i = 0; i < data.size(); i++) {
			for (int j = 0; j < itemWidth.length && j < data.get(i).length; j++) {
				int w = (int) TableView
						.GetPixelByText(textSize, data.get(i)[j]);
				if (itemWidth[j] < w) {
					itemWidth[j] = w;
					result = true;
				}
			}
		}
		return result;
	}

	/**
	 * 计算字符串所占像素
	 * 
	 * @param textSize
	 *            字体大小
	 * @param text
	 *            字符串
	 * @return 字符串所占像素
	 */
	private static int GetPixelByText(float textSize, String text) {
		Paint mTextPaint = new Paint();
		mTextPaint.setTextSize(textSize); // 指定字体大小
		mTextPaint.setFakeBoldText(true); // 粗体
		mTextPaint.setAntiAlias(true); // 非锯齿效果

		return (int) (mTextPaint.measureText(text) + textSize);
	}

	/**
	 * 主要用的Adapter
	 * 
	 * @author Cdisk
	 * 
	 */
	class CAdapter extends BaseAdapter {

		/*
		 * (non-Javadoc)
		 * 
		 * @see android.widget.Adapter#getCount()
		 */
		@Override
		public int getCount() {
			if (data == null)
				return 0;
			return data.size();
		}

		/*
		 * (non-Javadoc)
		 * 
		 * @see android.widget.Adapter#getItem(int)
		 */
		@Override
		public Object getItem(int position) {
			if (data == null)
				return null;
			return data.get(position);
		}

		/*
		 * (non-Javadoc)
		 * 
		 * @see android.widget.Adapter#getItemId(int)
		 */
		@Override
		public long getItemId(int position) {
			return 0;
		}

		/*
		 * (non-Javadoc)
		 * 
		 * @see android.widget.Adapter#getView(int, android.view.View,
		 * android.view.ViewGroup)
		 */
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			// 初始化主layout
			LinearLayout contextLayout = new LinearLayout(
					TableView.this.getContext());

			String[] dataItem = data.get(position);

			if (getSelectedPosition() == position) { // 为当前选中行
				contextLayout.setBackgroundColor(selectedBackgroundColor);
			} else if (rowsBackgroundColor != null
					&& rowsBackgroundColor.length > 0) {
				contextLayout.setBackgroundColor(rowsBackgroundColor[position
						% rowsBackgroundColor.length]);
			}

			for (int i = 0; i < title.length; i++) {
				TextView tv = new CTextView(contextLayout.getContext());
				tv.setTextColor(contentTextColor);
				tv.setGravity(Gravity.CENTER);
				if (i < dataItem.length) {
					tv.setText(dataItem[i]);
				}
				if (i == autoWidthIndex)
					tv.setLayoutParams(TableView.FILL_FILL_LAYOUTPARAMS);
				else {
					tv.setWidth(itemWidth[i]);
				}
				if (contentTextSize > 0) {
					tv.setTextSize(contentTextSize);
				}
				contextLayout.addView(tv);
			}

			return contextLayout;
		}

	}

	/**
	 * 重写的TextView
	 * 
	 * @author Cdisk
	 */
	class CTextView extends TextView {

		@Override
		protected void onDraw(Canvas canvas) {
			super.onDraw(canvas);
			// Top
			canvas.drawLine(0, 0, this.getWidth() - 1, 0, WHITE_PAINT);
			// Left
			canvas.drawLine(0, 0, 0, this.getHeight() - 1, WHITE_PAINT);
			// Right
			canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1,
					this.getHeight() - 1, BLACK_PAINT);
			// Buttom
			canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1,
					this.getHeight() - 1, BLACK_PAINT);
		}

		public CTextView(Context context) {
			super(context);
		}
	}

}

MainActivity.java

package com.iaiai;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;

/**
 * 
 * <p>
 * Title: MainActivity.java
 * </p>
 * <p>
 * E-Mail: [e-mail]
 * </p>
 * <p>
 * QQ: 176291935
 * </p>
 * <p>
 * Http: iaiai.iteye.com
 * </p>
 * <p>
 * Create time: 2011-11-9
 * </p>
 * 
 * @author 丸子
 * @version 0.0.1
 */
public class MainActivity extends Activity {

	TableView listView;
	List<String[]> list = new ArrayList<String[]>();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		makeData();

		String[] title = new String[] { "ID", "标题2", "标题3", "标题4", "标题5" };

		listView = new TableView(this, title, list);
		listView.setTitleTextColor(Color.GREEN);
		listView.setTitleBackgroundColor(Color.RED);
		// listView.setAutoColumnWidth(3);
		// listView.setItemBackgroundColor(Color.GREEN, Color.WHITE);
		listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				String[] item = listView.getItem(position);
				item[2] = "12312312312";
				listView.definedSetChanged();
			}
		});

		// listView.definedSetChanged();

		setContentView(listView);
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.app.Activity#onCreateOptionsMenu(android.view.Menu)
	 */
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		menu.add(0, 0, 0, "测试修改选中行");
		return true;
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.app.Activity#onOptionsItemSelected(android.view.MenuItem)
	 */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case 0:
			listView.setSelectedPosition(32);
			break;
		}
		return true;
	}

	private void makeData() {
		list.add(new String[] { "1", "数据1.2", "数据1.3", "数据1.4" });
		list.add(new String[] { "2", "数据2.2", "数据2.3", "数据2.4", "数据2.5" });
		list.add(new String[] { "3", "数据3.2", "数据3.3", "数据3.4" });
		list.add(new String[] { "4", "数据4.2", "数据4.3", "数据4.4" });
		list.add(new String[] { "5", "数据5.2", "数据5.3", "数据5.4", "数据5.5" });
		list.add(new String[] { "6", "数据6.2", "数据6.3", "数据6.4" });
		list.add(new String[] { "7", "数据7.2", "数据7.3", "数据7.4", "数据7.5",
				"数据7.6" });
		list.add(new String[] { "8", "数据8.2", "数据8.3", "数据8.4" });
		list.add(new String[] { "9", "数据9.2", "数据9.3", "数据9.4" });
		list.add(new String[] { "10", "数据10.2", "数据10.3", "数据10.4", "数据10.5",
				"数据10.6", "数据10.7" });
		list.add(new String[] { "11", "数据11.2", "数据11.3", "数据11.4", "数据11.5" });
		list.add(new String[] { "12", "数据12.2", "数据12.3", "数据12.4", "数据12.5" });
		list.add(new String[] { "13", "数据13.2", "数据13.3", "数据13.4", "数据13.5" });
		list.add(new String[] { "14", "数据14.2", "数据14.3", "数据14.4", "数据14.5" });
		list.add(new String[] { "15", "数据15.2", "数据15.3", "数据15.4", "数据15.5" });
		list.add(new String[] { "16", "数据16.2", "数据16.3", "数据16.4", "数据16.5" });
		list.add(new String[] { "17", "数据17.2", "数据17.3", "数据17.4", "数据17.5" });
		list.add(new String[] { "18", "数据18.2", "数据18.3", "数据18.4", "数据18.5" });
		list.add(new String[] { "19", "数据19.2", "数据19.3", "数据19.4", "数据19.5" });
		list.add(new String[] { "20", "数据20.2", "数据20.3", "数据20.4", "数据20.5" });
		list.add(new String[] { "21", "数据21.2", "数据21.3", "数据21.4", "数据21.5" });
		list.add(new String[] { "22", "数据22.2", "数据22.3", "数据22.4", "数据22.5" });
		list.add(new String[] { "23", "数据23.2", "数据23.3", "数据23.4", "数据23.5" });
		list.add(new String[] { "24", "数据24.2", "数据24.3", "数据24.4", "数据24.5" });
		list.add(new String[] { "25", "数据25.2", "数据25.3", "数据25.4", "数据25.5" });
		list.add(new String[] { "26", "数据26.2" });
		list.add(new String[] { "27", "数据27.2", "数据27.3", "数据27.4", "数据27.5" });
		list.add(new String[] { "28", "数据28.2", "数据28.3", "数据28.4", "数据28.5" });
		list.add(new String[] { "29", "数据29.2", "数据29.3", "数据29.4", "数据29.5" });
		list.add(new String[] { "30", "数据12.2", "数据12.3", "数据12.4", "数据12.5" });
		list.add(new String[] { "31", "数据13.2", "数据13.3", "数据13.4", "数据13.5" });
		list.add(new String[] { "32", "数据14.2", "数据14.3", "数据14.4", "数据14.5" });
		list.add(new String[] { "33", "数据15.2", "数据15.3", "数据15.4", "数据15.5" });
		list.add(new String[] { "34", "数据16.2", "数据16.3", "数据16.4", "数据16.5" });
		list.add(new String[] { "35", "数据17.2", "数据17.3", "数据17.4", "数据17.5" });
		list.add(new String[] { "36", "数据18.2", "数据18.3" });
		list.add(new String[] { "37", "数据19.2", "数据19.3", "数据19.4", "数据19.5" });
		list.add(new String[] { "38", "数据20.2", "数据20.3", "数据20.4", "数据20.5" });
		list.add(new String[] { "39", "数据21.2", "数据21.3", "数据21.4", "数据21.5" });
		list.add(new String[] { "40", "数据22.2", "数据22.3", "数据22.4", "数据22.5" });
		list.add(new String[] { "41", "数据23.2", "数据23.3", "数据23.4", "数据23.5" });
		list.add(new String[] { "42", "数据24.2", "数据24.3", "数据24.4", "数据24.5" });
		list.add(new String[] { "43", "数据25.2", "数据25.3", "数据25.4", "数据25.5" });
		list.add(new String[] { "44", "数据26.2", "数据26.3", "数据26.4", "数据26.5" });
		list.add(new String[] { "45", "数据27.2", "数据27.3", "数据27.4", "数据27.5" });
		list.add(new String[] { "46", "数据28.2", "数据28.3", "数据28.4", "数据28.5" });
		list.add(new String[] { "47", "数据29.2", "数据29.3", "数据29.4", "数据29.5" });
	}

}

我把整个功能写成了一个类，在需要用的时候只需要new出这个类就可以直接使用了
该类目前的所有方法:

/** 初始化带标题ListView. */
CListView(Context, String[], List<String[]>)
/** 整体有改变时，刷新显示. */
definedSetChanged()
/** 设置选中时的监听器. */
setOnItemClickListener(OnItemClickListener)
/** 设置行背景颜色, 多个颜色可以作为间隔色. */
setItemBackgroundColor(int...)
/** 数据总数. */
getCount()
/** 当前选中数据. */
getItem(int)
/** 设置当前选中位置. */
setSelectedPosition(int)
/** 当前选中位置. */
getSelectedPosition()
/** 设置被选中时的背景色. */
setSelectedBackgroundColor(int)
/** 设置标题背景色. */
setTitleBackgroundColor(int)
/** 设置标题文字颜色. */
setTitleTextColor(int)
/** 设置内容文字颜色. */
setContentTextColor(int)
/** 设置标题字体大小. */
setTitleTextSize(float)
/** 设置内容字体大小. */
setContentTextSize(float)
/** 设定哪列自动列宽 从0开始计算. */
setAutoColumnWidth(int)

评论

2 楼 edwar12345 2011-12-07  

大哥，对不起，我犯错误了，知错必改。
错在：
  我之前写的Listview都是一行一个数据。。对多个数据里会发生什么事情经验不足。
我本以为从XML里获取界面，然后利用ViewHolder会不会让getView少执行。。

因为你的方法，如果14行数据，getview起码执行88次。我还以为viewHolder会起点作用，结果用google原始方法，getView竟然执行了几百次，晕死。。

你的方法，如果2行数据，getView会执行8次。。我以为google的原始viewholder这种被誉为列表优化的方法能给点力，结果 2行数据，竟然执行了 18次。。

现在，我才知道自己经验缺乏。。一行5个数据，会造成getview多次执行的。。因为要不停地更新界面，以调整大小。。

  以上我的所言都是缺乏经验，没有实践不知难。。 看来，耗时是难以避免的。。所以，才有 google， baidu 一次 才显示 20个 ， 必须滚动到最下面，触发显示下一批的现象。。
学习了。。

1 楼 edwar12345 2011-12-07  

要点总结一下，以利后人：

主要思想：

1,咋一看还以为用了TableLayout,其实完全没有利用。
纯ListView,TextView,LinearLayout

2,获取所有数据里面长度最长的做为宽度。如果一次倒导入100个-1万个数据，就要循环1万次。因为宽度最终由最大的一个定义，故而也实现了类似table的等距

3,利用Paint,给TextView画边框--->也实现了类似table的效果。。为什么不用Shape呢，里面的stoke专门画边框的。。

优点：

摒弃了传统的教条思想-为了实现table就必须用table。善于发现创新

缺点：

1,从构造器看，只有一个单一的代码构造器，缺陷比较大，因为只能从代码实现，无法跟其它组件整合。。缺少从xml膨胀的构造器。

2,从上面第二点，可以看出，循环那么多次，才能得出最终的宽度。。想想1个例循环1万次，10个列就是10万次。。大量时间浪费了。。

3,AdatperView 设计的比较死，getView里也套了一个循环，以模拟实际中的一条条添加。但不支持动态增加。。对于那种超市购物，一个个增加的那种，必须修改。

总之， 如果代码可以经过再改进，解决耗时太长这个问题，则不失为好方法。。