当前位置: 代码迷 >> Android >> Android ListView兑现Table行列效果
  详细解决方案

Android ListView兑现Table行列效果

热度:28   发布时间:2016-05-01 17:26:20.0
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: [email protected] * </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: [email protected] * </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)
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里也套了一个循环,以模拟实际中的一条条添加。但不支持动态增加。。对于那种超市购物,一个个增加的那种,必须修改。

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



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个 , 必须滚动到最下面,触发显示下一批的现象。。
学习了。。
  相关解决方案