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