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