Android 利用ListView製作帶豎線的多彩表格

/********************************************************************************************
 * author：conowen@大鐘                                                                                                                          
 * E-mail：[email protected]                                                                                                             
 * http://blog.csdn.net/conowen                                                                                                              
 * 注：本文爲原創，僅作爲學習交流使用，轉載請標明作者及出處。      

 ********************************************************************************************/

1、listview與GridView

其實Android本身是有表格控件（GridView）的，但是GridView的每一列的寬度被限定爲一樣寬，有時設計表格時，列寬不可能爲同一寬度，所有可以用ListView控件去實現表格。

2、設計思路：

listview的每一列都是由一個textview去實現，表格的豎線可以通過view控件來繪製。listview每一列的顏色相互不同可以通過複寫Adapter的類，然後複寫getview方法具體去實現。

 

3、先看一下效果圖：

 

4、數據庫操作部分可以看我之前的博文：http://blog.csdn.net/conowen/article/details/7306545

本文主要在於豎線的繪製與getview方法的複寫。

代碼的目錄結構如下圖所示：

 

 

豎線的繪製：

在ListView的佈局文件中，每隔一個TextView，就增加一個<View>控件。就是繪製一條豎線的意思。可以設置表格豎線的長度，寬度，顏色等等。

 

顏色的交互：

首先要知道listview的工作原理，每次得到一個item，listview都會通過getview來繪製一個item，在getview方法中，可以設置這個item的各種屬性，如顏色，佈局等等。

1	public View getView(final int position, View convertView, ViewGroup parent){

2

3	//第一個參數position爲listview的item序號，每個item的序號都是不同的。

4

5	//第二個參數convertView爲View的緩存，當listview的item過多時，拖動會遮住一部分item，被遮住的item的view就是convertView保存着。

6

7	// 第三個參數parent表示是一個ViewGroup（view組）

8

9

}

5、詳細代碼：

01	/*author:conowen

02	* date:2012.4.2

03	* GridActivity

04

*/

05	package com.conowen.grid;

06

07	import android.app.Activity;

08	import android.database.Cursor;

09	import android.database.sqlite.SQLiteDatabase;

10	import android.os.Bundle;

11	import android.widget.ListAdapter;

12	import android.widget.ListView;

13

14	public class GridActivity extends Activity {

15

16	SQLiteDatabase sqldb;

17	public String DB_NAME = "DB.sqlite";

18	public String DB_TABLE = "num";

19	public int DB_VERSION = 1;

20	final DataHelper helper = new DataHelper(this, DB_NAME, null, DB_VERSION);

21	// DbHelper類在DbHelper.java文件裏面創建的

22	ListView lv;

23

24

@Override

25	public void onCreate(Bundle savedInstanceState) {

26	// TODO Auto-generated method stub

27	super.onCreate(savedInstanceState);

28	setContentView(R.layout.main);

29	sqldb = helper.getWritableDatabase();

30	lv = (ListView) findViewById(R.id.lv);

31	updatelistview();

32

}

33

34	// 更新listview

35	public void updatelistview() {

36

37

//

38	Cursor cr = sqldb.query("JobChecker", null, null, null, null, null,

39

null);

40

41	String id = cr.getColumnName(0);// 獲取第1列

42	String job = cr.getColumnName(2);// 獲取第3列

43	String address = cr.getColumnName(4);// 獲取第5列

44	String student = cr.getColumnName(5);// 獲取第6列

45	String[] ColumnNames = { id, job, address, student };

46

47	ListAdapter adapter = new MySimpleCursorAdapter(this,

48	R.layout.listviewlayout, cr, ColumnNames, new int[] { R.id.id,

49	R.id.job, R.id.addr, R.id.student });

50	// layout爲listView的佈局文件，包括三個TextView，用來顯示三個列名所對應的值

51	// ColumnNames爲數據庫的表的列名

52	// 最後一個參數是int[]類型的，爲view類型的id，用來顯示ColumnNames列名所對應的值。view的類型爲TextView

53	lv.setAdapter(adapter);

54

55

}

56

57

@Override

58	protected void onDestroy() {// 關閉數據庫

59	// TODO Auto-generated method stub

60	super.onDestroy();

61	if (helper != null) {

62	helper.close();

63

}

64

}

65

66

}

01	/*author:conowen

02	* date:2012.4.2

03	* MySimpleCursorAdapter

04

*/

05	package com.conowen.grid;

06

07	import android.content.Context;

08	import android.database.Cursor;

09	import android.graphics.Color;

10	import android.view.View;

11	import android.view.ViewGroup;

12	import android.widget.SimpleCursorAdapter;

13

14	public class MySimpleCursorAdapter extends SimpleCursorAdapter {

15

16	public MySimpleCursorAdapter(Context context, int layout, Cursor c,

17	String[] from, int[] to) {

18	super(context, layout, c, from, to);

19	// TODO Auto-generated constructor stub

20

21

}

22

23

@Override

24	public View getView(final int position, View convertView, ViewGroup parent) {

25	// TODO Auto-generated method stub

26	// listview每次得到一個item，都要view去繪製，通過getView方法得到view

27	// position爲item的序號

28	View view = null;

29	if (convertView != null) {

30	view = convertView;

31	// 使用緩存的view,節約內存

32	// 當listview的item過多時，拖動會遮住一部分item，被遮住的item的view就是convertView保存着。

33	// 當滾動條回到之前被遮住的item時，直接使用convertView，而不必再去new view()

34

35

} else {

36	view = super.getView(position, convertView, parent);

37

38

}

39

40	int[] colors = { Color.WHITE, Color.rgb(219, 238, 244) };//RGB顏色

41

42	view.setBackgroundColor(colors[position % 2]);// 每隔item之間顏色不同

43

44	return super.getView(position, view, parent);

45

}

46

47

}

01	/*author:conowen

02	* date:2012.4.2

03	* DataHelper

04

*/

05	package com.conowen.grid;

06

07	import android.content.Context;

08	import android.database.sqlite.SQLiteDatabase;

09	import android.database.sqlite.SQLiteDatabase.CursorFactory;

10	import android.database.sqlite.SQLiteOpenHelper;

11

12	public class DataHelper extends SQLiteOpenHelper {

13

14

@Override

15	public synchronized void close() {

16	// TODO Auto-generated method stub

17	super.close();

18

}

19

20	public DataHelper(Context context, String name, CursorFactory factory,

21	int version) {

22	super(context, name, factory, version);

23	// TODO Auto-generated constructor stub

24

25

}

26

27

@Override

28	public void onCreate(SQLiteDatabase db) {

29	// TODO Auto-generated method stub

30

31	String sql = "CREATE  TABLE JobChecker (_id INTEGER PRIMARY KEY , department VARCHAR, job VARCHAR,teacher VARCHAR,address VARCHAR,student VARCHAR,isworking VARCHAR)";

32	db.execSQL(sql);

33

34

}

35

36

@Override

37	public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

38	// TODO Auto-generated method stub

39

40

}

41

42

}

main.xml

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent"

05	android:orientation="vertical" >

06

07	<LinearLayout

08	xmlns:android="http://schemas.android.com/apk/res/android"

09	android:layout_width="fill_parent"

10	android:layout_height="wrap_content"

11	android:orientation="horizontal" >

12

13

<TextView

14	android:layout_width="40dip"

15	android:layout_height="30dp"

16	android:text="序號"

17	android:textSize="20sp" />

18

19

<TextView

20	android:id="@+id/job"

21	android:layout_width="200dip"

22	android:layout_height="30dp"

23	android:text="崗位名稱"

24	android:textSize="20sp" />

25

26

<TextView

27	android:id="@+id/addr"

28	android:layout_width="150dip"

29	android:layout_height="30dp"

30	android:text="詳細地點"

31	android:textSize="20sp" />

32

33

<TextView

34	android:id="@+id/student"

35	android:layout_width="100dip"

36	android:layout_height="30dp"

37	android:text="工作學生"

38	android:textSize="20sp" />

39

40

<TextView

41	android:id="@+id/isworking"

42	android:layout_width="80dip"

43	android:layout_height="30dp"

44	android:text="備註"

45	android:textSize="20sp" />

46	</LinearLayout>

47

48

<ListView

49	android:id="@+id/lv"

50	android:layout_width="fill_parent"

51	android:layout_height="wrap_content" >

52	</ListView>

53

54	</LinearLayout>

listviewlayout.xml

01	<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

02	android:layout_width="fill_parent"

03	android:layout_height="fill_parent"

04	android:orientation="horizontal" >

05

06

<View

07	android:layout_width="0.5px"

08	android:layout_height="fill_parent"

09	android:background="#B8B8B8"

10	android:visibility="visible" />

11

12

<TextView

13	android:id="@+id/id"

14	android:layout_width="40dip"

15	android:layout_height="55dip"

16	android:textColor="#CD3700"

17	android:textSize="20sp" />

18

19

<View

20	android:layout_width="0.5px"

21	android:layout_height="fill_parent"

22	android:background="#B8B8B8"

23	android:visibility="visible" />

24

25

<TextView

26	android:id="@+id/job"

27	android:layout_width="200dip"

28	android:layout_height="wrap_content"

29	android:textColor="#000000"

30	android:textSize="17sp" />

31

32

<View

33	android:layout_width="0.5px"

34	android:layout_height="fill_parent"

35	android:background="#B8B8B8"

36	android:visibility="visible" />

37

38

<TextView

39	android:id="@+id/addr"

40	android:layout_width="150dip"

41	android:layout_height="wrap_content"

42	android:textColor="#000000"

43	android:textSize="17sp" />

44

45

<View

46	android:layout_width="0.5px"

47	android:layout_height="fill_parent"

48	android:background="#B8B8B8"

49	android:visibility="visible" />

50

51

<TextView

52	android:id="@+id/student"

53	android:layout_width="100dip"

54	android:layout_height="wrap_content"

55	android:textColor="#000000"

56	android:textSize="20sp" />

57

58

<View

59	android:layout_width="0.5px"

60	android:layout_height="fill_parent"

61	android:background="#B8B8B8"

62	android:visibility="visible" />

63

64

65

66

67	</LinearLayout>