Android提高第十五篇之ListView自适应实现表格

Android提高第十五篇之ListView自适应实现表格

说说如何用ListView实现自适应的表格。GridView比ListView更容易实现自适应的表格，但是GridView每个格单元的大小固定，而ListView实现的表格可以自定义每个格单元的大小，但因此实现自适应表格也会复杂些(格单元大小不一)。另外，GridView实现的表格可以定位在具体某个格单元，而ListView实现的表格则只能定位在表格行。因此还是那句老话：根据具体的使用环境而选择GridView 或者 ListView实现表格。先贴出本文程序运行的效果图：

本文实现的ListView表格，可以每个格单元大小不一，文本(TextView)或图片(ImageView)做格单元的数据，不需要预先定义XML实现样式(自适应的根本目标)。由于ListView置于HorizontalScrollView中，因此对于列比较多/列数据比较长的数据表也能很好地适应其宽度。main.xml源码如下：

1. <?xml version="1.0" encoding="utf-8"?>  
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   
3.     android:orientation="vertical" android:layout_width="fill_parent"  
   
4.     android:layout_height="fill_parent">  
   
5.     <HorizontalScrollView android:id="@+id/HorizontalScrollView01"  
   
6.         android:layout_height="fill_parent" android:layout_width="fill_parent">  
   
7.         <ListView android:id="@+id/ListView01" android:layout_height="wrap_content"  
   
8.             android:layout_width="wrap_content"></ListView>  
   
9.     </HorizontalScrollView>  
   
10. </LinearLayout>

复制代码

主类testMyListView.java的源码如下：

1. package com.testMyListView;
   
2. import java.util.ArrayList;
   
3. import com.testMyListView.TableAdapter.TableCell;
   
4. import com.testMyListView.TableAdapter.TableRow;
   
5. import android.app.Activity;
   
6. import android.os.Bundle;
   
7. import android.view.View;
   
8. import android.widget.AdapterView;
   
9. import android.widget.ListView;
   
10. import android.widget.LinearLayout.LayoutParams;
    
11. import android.widget.Toast;
    
12. /**
    
13. * @author hellogv
    
14. */
    
15. public class testMyListView extends Activity {
    
16.         /** Called when the activity is first created. */
    
17.         ListView lv;
    
18.         @Override
    
19.         public void onCreate(Bundle savedInstanceState) {
    
20.                 super.onCreate(savedInstanceState);
    
21.                 setContentView(R.layout.main);
    
22.                 this.setTitle("ListView自适应实现表格---hellogv");
    
23.                 lv = (ListView) this.findViewById(R.id.ListView01);
    
24.                 ArrayList[table]
    
25. table = new ArrayList[table]
    
26. ();
    
27.                 TableCell[] titles = new TableCell[5];// 每行5个单元
    
28.                 int width = this.getWindowManager().getDefaultDisplay().getWidth()/titles.length;
    
29.                 // 定义标题
    
30.                 for (int i = 0; i < titles.length; i++) {
    
31.                         titles[i] = new TableCell("标题" + String.valueOf(i), 
    
32.                                                                         width + 8 * i,
    
33.                                                                         LayoutParams.FILL_PARENT, 
    
34.                                                                         TableCell.STRING);
    
35.                 }
    
36.                 table.add(new TableRow(titles));
    
37.                 // 每行的数据
    
38.                 TableCell[] cells = new TableCell[5];// 每行5个单元
    
39.                 for (int i = 0; i < cells.length - 1; i++) {
    
40.                         cells[i] = new TableCell("No." + String.valueOf(i),
    
41.                                                                         titles[i].width, 
    
42.                                                                         LayoutParams.FILL_PARENT, 
    
43.                                                                         TableCell.STRING);
    
44.                 }
    
45.                 cells[cells.length - 1] = new TableCell(R.drawable.icon,
    
46.                                                                                                 titles[cells.length - 1].width, 
    
47.                                                                                                 LayoutParams.WRAP_CONTENT,
    
48.                                                                                                 TableCell.IMAGE);
    
49.                 // 把表格的行添加到表格
    
50.                 for (int i = 0; i < 12; i++)
    
51.                         table.add(new TableRow(cells));
    
52.                 TableAdapter tableAdapter = new TableAdapter(this, table);
    
53.                 lv.setAdapter(tableAdapter);
    
54.                 lv.setOnItemClickListener(new ItemClickEvent());
    
55.         }
    
56.         class ItemClickEvent implements AdapterView.OnItemClickListener {
    
57.                 @Override
    
58.                 public void onItemClick(AdapterView arg0, View arg1, int arg2,
    
59.                                 long arg3) {
    
60.                         Toast.makeText(testMyListView.this, "选中第"+String.valueOf(arg2)+"行", 500).show();
    
61.                 }
    
62.         }
    
63. }

复制代码

ListView自适应实现Table的类TableAdapter.java代码如下：PS：TableCell是格单元的类，TableRow是表格行的类，TableRowView是实现表格行的组件。实现步骤：TableCell --> TableRow（TableRowView）-->ListView

1. package com.testMyListView;
   
2. import java.util.List;
   
3. import android.content.Context;
   
4. import android.graphics.Color;
   
5. import android.view.Gravity;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. import android.widget.BaseAdapter;
   
9. import android.widget.ImageView;
   
10. import android.widget.LinearLayout;
    
11. import android.widget.TextView;
    
12. public class TableAdapter extends BaseAdapter {
    
13.         private Context context;
    
14.         private List[table]
    
15. table;
    
16.         public TableAdapter(Context context, List[table]
    
17. table) {
    
18.                 this.context = context;
    
19.                 this.table = table;
    
20.         }
    
21.         @Override
    
22.         public int getCount() {
    
23.                 return table.size();
    
24.         }
    
25.         @Override
    
26.         public long getItemId(int position) {
    
27.                 return position;
    
28.         }
    
29.         public TableRow getItem(int position) {
    
30.                 return table.get(position);
    
31.         }
    
32.         public View getView(int position, View convertView, ViewGroup parent) {
    
33.                 TableRow tableRow = table.get(position);
    
34.                 return new TableRowView(this.context, tableRow);
    
35.         }
    
36.         /**
    
37.          * TableRowView 实现表格行的样式
    
38.          * @author hellogv
    
39.          */
    
40.         class TableRowView extends LinearLayout {
    
41.                 public TableRowView(Context context, TableRow tableRow) {
    
42.                         super(context);
    
43.                         
    
44.                         this.setOrientation(LinearLayout.HORIZONTAL);
    
45.                         for (int i = 0; i < tableRow.getSize(); i++) {//逐个格单元添加到行
    
46.                                 TableCell tableCell = tableRow.getCellValue(i);
    
47.                                 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
    
48.                                                 tableCell.width, tableCell.height);//按照格单元指定的大小设置空间
    
49.                                 layoutParams.setMargins(0, 0, 1, 1);//预留空隙制造边框
    
50.                                 if (tableCell.type == TableCell.STRING) {//如果格单元是文本内容
    
51.                                         TextView textCell = new TextView(context);
    
52.                                         textCell.setLines(1);
    
53.                                         textCell.setGravity(Gravity.CENTER);
    
54.                                         textCell.setBackgroundColor(Color.BLACK);//背景黑色
    
55.                                         textCell.setText(String.valueOf(tableCell.value));
    
56.                                         addView(textCell, layoutParams);
    
57.                                 } else if (tableCell.type == TableCell.IMAGE) {//如果格单元是图像内容
    
58.                                         ImageView imgCell = new ImageView(context);
    
59.                                         imgCell.setBackgroundColor(Color.BLACK);//背景黑色
    
60.                                         imgCell.setImageResource((Integer) tableCell.value);
    
61.                                         addView(imgCell, layoutParams);
    
62.                                 }
    
63.                         }
    
64.                         this.setBackgroundColor(Color.WHITE);//背景白色，利用空隙来实现边框
    
65.                 }
    
66.         }
    
67.         /**
    
68.          * TableRow 实现表格的行
    
69.          * @author hellogv
    
70.          */
    
71.         static public class TableRow {
    
72.                 private TableCell[] cell;
    
73.                 public TableRow(TableCell[] cell) {
    
74.                         this.cell = cell;
    
75.                 }
    
76.                 public int getSize() {
    
77.                         return cell.length;
    
78.                 }
    
79.                 public TableCell getCellValue(int index) {
    
80.                         if (index >= cell.length)
    
81.                                 return null;
    
82.                         return cell[index];
    
83.                 }
    
84.         }
    
85.         /**
    
86.          * TableCell 实现表格的格单元
    
87.          * @author hellogv
    
88.          */
    
89.         static public class TableCell {
    
90.                 static public final int STRING = 0;
    
91.                 static public final int IMAGE = 1;
    
92.                 public Object value;
    
93.                 public int width;
    
94.                 public int height;
    
95.                 private int type;
    
96.                 public TableCell(Object value, int width, int height, int type) {
    
97.                         this.value = value;
    
98.                         this.width = width;
    
99.                         this.height = height;
    
100.                         this.type = type;
     
101.                 }
     
102.         }
     
103. }

复制代码