Android入门之GridView（表格控件）

GridView是一个表格控件，可以在每个单元格中显示自定义的View或者字符串。在这里我们要实现一个图标下方有文字的效果。

1、首先我们应自定义布局文件image_text.xml。代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     
 7     <ImageView 
 8         android:id="@+id/imageview"
 9         android:layout_height="wrap_content"
10         android:layout_width="wrap_content"
11         android:src="@drawable/a0"
12         />
13     <TextView 
14         android:id="@+id/textview"
15         android:layout_height="wrap_content"
16         android:layout_width="wrap_content"
17         android:text="textView"/>    
18 </LinearLayout>

2、写一个实体类用来存放单元格里面每个视图的图片资源和文字：

 1 public class EachIcon {
 2 
 3     private int imageSrcId;
 4     private String iconString;
 5     
 6     public EachIcon(int imageSrcId,String iconString)
 7     {
 8         super();
 9         this.imageSrcId = imageSrcId;
10         this.iconString = iconString;
11     }
12     public int getImageSrcId()
13     {
14         return imageSrcId;
15     }
16     
17     public void setImageSrcId(int imageSrcId)
18     {
19         this.imageSrcId = imageSrcId;
20     }
21     
22     public String getIconString ()
23     {
24         return iconString;
25     }
26     
27     public void setIconString(String iconString)
28     {
29         this.iconString = iconString;
30     }
31 }

3、第三步我们还需要自定义一个适配器，名称为ImageAdapter，代码如下：

 1 import java.util.ArrayList;
 2 import java.util.List;
 3 import android.app.Activity;
 4 import android.content.Context;
 5 import android.util.Log;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 import android.widget.BaseAdapter;
10 import android.widget.ImageView;
11 import android.widget.TextView;
12 
13 public class ImageAdapter extends BaseAdapter {
14     private List<EachIcon> eachIconList = new ArrayList();
15     private Context context;
16     
17     public ImageAdapter(Context context)
18     {
19         super();
20         this.context = context;
21         
22         EachIcon e1 = new EachIcon(R.drawable.a0,"图标1");
23         EachIcon e2 = new EachIcon(R.drawable.a1,"图标2");
24         EachIcon e3 = new EachIcon(R.drawable.a2,"图标3");
25         EachIcon e4 = new EachIcon(R.drawable.a3,"图标4");
26         EachIcon e5 = new EachIcon(R.drawable.a4,"图标5");
27         EachIcon e6 = new EachIcon(R.drawable.a5,"图标6");
28         EachIcon e7 = new EachIcon(R.drawable.a6,"图标7");
29         EachIcon e8 = new EachIcon(R.drawable.a7,"图标8");
30         EachIcon e9 = new EachIcon(R.drawable.a8,"图标9");
31         EachIcon e10 = new EachIcon(R.drawable.a9,"图标10");
32         EachIcon e11 = new EachIcon(R.drawable.a10,"图标11");
33         EachIcon e12 = new EachIcon(R.drawable.a11,"图标12");
34         EachIcon e13 = new EachIcon(R.drawable.a12,"图标13");
35         EachIcon e14 = new EachIcon(R.drawable.a13,"图标14");
36         EachIcon e15 = new EachIcon(R.drawable.a14,"图标15");
37         EachIcon e16 = new EachIcon(R.drawable.a15,"图标16");
38         EachIcon e17 = new EachIcon(R.drawable.a16,"图标17");
39         
40         eachIconList.add(e1);
41         eachIconList.add(e2);
42         eachIconList.add(e3);
43         eachIconList.add(e4);
44         eachIconList.add(e5);
45         eachIconList.add(e6);
46         eachIconList.add(e7);
47         eachIconList.add(e8);
48         eachIconList.add(e9);
49         eachIconList.add(e10);
50         eachIconList.add(e11);
51         eachIconList.add(e12);
52         eachIconList.add(e13);
53         eachIconList.add(e14);
54         eachIconList.add(e15);
55         eachIconList.add(e16);
56         eachIconList.add(e17);        
57     }
58     
59     @Override
60     public int getCount() {
61         // TODO Auto-generated method stub
62         return eachIconList.size();
63     }
64 
65     @Override
66     public Object getItem(int arg0) {
67         // TODO Auto-generated method stub
68         return null;
69     }
70 
71     @Override
72     public long getItemId(int position) {
73         // TODO Auto-generated method stub
74         return 0;
75     }
76 
77     @Override
78     public View getView(int position, View convertView, ViewGroup parent) {
79         // TODO Auto-generated method stub
80         Log.v("rub","---------------------------");
81 
82         LayoutInflater inflater = ((Activity)context).getLayoutInflater();
83         View imgss = inflater.inflate(R.layout.image_text,null);
84         
85         ImageView ivimgss = (ImageView)imgss.findViewById(R.id.imageview);
86         TextView tvimgss = (TextView)imgss.findViewById(R.id.textview);
87         
88         ivimgss.setImageResource(eachIconList.get(position).getImageSrcId());
89         tvimgss.setText(eachIconList.get(position).getIconString());
90         return imgss;
91     }
92 }

4、第四步在Activity里面绑定GridView:

 1 import android.app.Activity;
 2 import android.os.Bundle;
 3 import android.util.Log;
 4 import android.view.View;
 5 import android.widget.AdapterView;
 6 import android.widget.AdapterView.OnItemClickListener;
 7 import android.widget.GridView;
 8 import android.widget.ListAdapter;
 9 import android.widget.TextView;
10 
11 public class MainActivity extends Activity {
12 
13     @Override
14     protected void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.activity_main);
17 
18         ListAdapter adapter = new ImageAdapter(this);
19         GridView gv = (GridView)this.findViewById(R.id.gridview);
20         
21         gv.setAdapter(adapter);
22         gv.setOnItemClickListener(new OnItemClickListener() {
23             @Override
24             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
25                     long arg3) {
26                 // TODO Auto-generated method stub
27                 Log.v("------------------单击的索引值：", ""+((TextView)arg1.findViewById(R.id.textview))
28                                                             .getText().toString()+"索引是："+arg2);
29             }
30         });
31     }
32 }

这样一个自定义的视图加文字描述的GridView(表格控件)就完成了。对了，还有主布局文件：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context=".MainActivity" >
10 
11 <GridView
12     android:id="@+id/gridview"
13     android:layout_height="wrap_content"
14     android:layout_width="wrap_content"
15     android:numColumns="4"
16     android:horizontalSpacing="5px"
17     android:verticalSpacing="5px"   
18      ></GridView>
19 
20 </RelativeLayout>

写下来了以备自己忘记。

下载地址：http://files.cnblogs.com/Jett/gridview.rar