Android入门之GridView（表格控件）

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

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

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <ImageView
         android:id="@+id/imageview"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:src="@drawable/a0"
         />
     <TextView
         android:id="@+id/textview"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="textView"/>
 </LinearLayout>

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

 public class EachIcon {

     private int imageSrcId;
     private String iconString;

     public EachIcon(int imageSrcId,String iconString)
     {
         super();
         this.imageSrcId = imageSrcId;
         this.iconString = iconString;
     }
     public int getImageSrcId()
     {
         return imageSrcId;
     }

     public void setImageSrcId(int imageSrcId)
     {
         this.imageSrcId = imageSrcId;
     }

     public String getIconString ()
     {
         return iconString;
     }

     public void setIconString(String iconString)
     {
         this.iconString = iconString;
     }
 }

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

 import java.util.ArrayList;
 import java.util.List;
 import android.app.Activity;
 import android.content.Context;
 import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.ImageView;
 import android.widget.TextView;

 public class ImageAdapter extends BaseAdapter {
     private List<EachIcon> eachIconList = new ArrayList();
     private Context context;

     public ImageAdapter(Context context)
     {
         super();
         this.context = context;

         EachIcon e1 = new EachIcon(R.drawable.a0,"图标1");
         EachIcon e2 = new EachIcon(R.drawable.a1,"图标2");
         EachIcon e3 = new EachIcon(R.drawable.a2,"图标3");
         EachIcon e4 = new EachIcon(R.drawable.a3,"图标4");
         EachIcon e5 = new EachIcon(R.drawable.a4,"图标5");
         EachIcon e6 = new EachIcon(R.drawable.a5,"图标6");
         EachIcon e7 = new EachIcon(R.drawable.a6,"图标7");
         EachIcon e8 = new EachIcon(R.drawable.a7,"图标8");
         EachIcon e9 = new EachIcon(R.drawable.a8,"图标9");
         EachIcon e10 = new EachIcon(R.drawable.a9,"图标10");
         EachIcon e11 = new EachIcon(R.drawable.a10,"图标11");
         EachIcon e12 = new EachIcon(R.drawable.a11,"图标12");
         EachIcon e13 = new EachIcon(R.drawable.a12,"图标13");
         EachIcon e14 = new EachIcon(R.drawable.a13,"图标14");
         EachIcon e15 = new EachIcon(R.drawable.a14,"图标15");
         EachIcon e16 = new EachIcon(R.drawable.a15,"图标16");
         EachIcon e17 = new EachIcon(R.drawable.a16,"图标17");

         eachIconList.add(e1);
         eachIconList.add(e2);
         eachIconList.add(e3);
         eachIconList.add(e4);
         eachIconList.add(e5);
         eachIconList.add(e6);
         eachIconList.add(e7);
         eachIconList.add(e8);
         eachIconList.add(e9);
         eachIconList.add(e10);
         eachIconList.add(e11);
         eachIconList.add(e12);
         eachIconList.add(e13);
         eachIconList.add(e14);
         eachIconList.add(e15);
         eachIconList.add(e16);
         eachIconList.add(e17);
     }

     @Override
     public int getCount() {
         // TODO Auto-generated method stub
         return eachIconList.size();
     }

     @Override
     public Object getItem(int arg0) {
         // TODO Auto-generated method stub
         return null;
     }

     @Override
     public long getItemId(int position) {
         // TODO Auto-generated method stub
         return 0;
     }

     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
         // TODO Auto-generated method stub
         Log.v("rub","---------------------------");

         LayoutInflater inflater = ((Activity)context).getLayoutInflater();
         View imgss = inflater.inflate(R.layout.image_text,null);

         ImageView ivimgss = (ImageView)imgss.findViewById(R.id.imageview);
         TextView tvimgss = (TextView)imgss.findViewById(R.id.textview);

         ivimgss.setImageResource(eachIconList.get(position).getImageSrcId());
         tvimgss.setText(eachIconList.get(position).getIconString());
         return imgss;
     }
 }

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

 import android.app.Activity;
 import android.os.Bundle;
 import android.util.Log;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.GridView;
 import android.widget.ListAdapter;
 import android.widget.TextView;

 public class MainActivity extends Activity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         ListAdapter adapter = new ImageAdapter(this);
         GridView gv = (GridView)this.findViewById(R.id.gridview);

         gv.setAdapter(adapter);
         gv.setOnItemClickListener(new OnItemClickListener() {
             @Override
             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                     long arg3) {
                 // TODO Auto-generated method stub
                 Log.v("------------------单击的索引值：", ""+((TextView)arg1.findViewById(R.id.textview))
                                                             .getText().toString()+"索引是："+arg2);
             }
         });
     }
 }

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

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     tools:context=".MainActivity" >

 <GridView
     android:id="@+id/gridview"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:numColumns="4"
     android:horizontalSpacing="5px"
     android:verticalSpacing="5px"
      ></GridView>

 </RelativeLayout>

写下来了以备自己忘记。

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