Android开发中GridView的使用

大家都知道，在android开发中ListView是一种十分常用的组件，但是当需要将一个个的item进行行列排列时，则需要用GridView，这两者的使用方式非常相似，大概可以分为以下四步：1.布局；2.准备数据源；3.新建适配器；4.加载适配器。下面进行详细介绍。

一，布局。

1，主布局。

xml version="1.0" encoding="utf-8"?>
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="30dp"
    tools:context="com.example.eyevision.mytest2.GridVeiw.MyGridViewActivity">

            android:id="@+id/mGridView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:columnWidth="90dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:verticalSpacing="2.0px"

        android:horizontalSpacing="2.0px >

GirdView的一些属性：

android:numColumns="3" --------列数设置为3列
android:columnWidth="90dp"，----------每列的宽度，也就是Item的宽度
android:stretchMode="columnWidth"------缩放与列宽大小同步
android:verticalSpacing="2.0px"----------垂直边距
android:horizontalSpacing="2.0px"-------水平边距

2.网格的item布局。

xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="10dp"
    >


            android:src="@drawable/ic_launcher"
        android:id="@+id/image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        />

            android:id="@+id/text"
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:text="文字"
        />

二，准备数据源。

这里为了方便，使用了九个同样的图片。图片下面的文字为1-9.

private int[] icon = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
                      R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
                      R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher};
private String[] iconName = {"1", "2", "3", "4", "5","6","7","8","9"};
private List, Object>> data_list;

三，新建适配器。

simpleAdapter = new SimpleAdapter(this,
        data_list,
        R.layout.item_gridview,
        new String[]{"ItemImage", "ItemText"},
        new int[]{R.id.image, R.id.text});

四，加载适配器。

mGridView.setAdapter(simpleAdapter);

以上就是GridView的简单使用。

对于item的点击事件，也非常简单，只需

mGridView.setOnItemClickListener(this);

然后实现onItemClick方法即可。

另外，进一步探索，当使用比较复杂的情况下，比如点击item后改变item的内容，这时可以通过重写adapter来实现。下面用一个例子来演示，效果为当点击item时，所在item的图片用其他图片更换，文字用其他文字更换。新建一个mGridViewAdapter，继承自BaseAdapter，并实现几个必要的方法。其中getView方法是我们重写的重点。

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = LayoutInflater.from(context).inflate(R.layout.item_gridview, null);
    }
    ImageView imageView = (ImageView) convertView.findViewById(R.id.image);
    TextView textView = (TextView) convertView.findViewById(R.id.text);

    Map, Object> map = listItem.get(position);
    imageView.setImageResource((Integer) map.get("ItemImage"));
    textView.setText(map.get("ItemText") + "");

    if (clickItem == position) {
        imageView.setImageResource(icon[position]);//将图片更换

        textView.setText(iconName[position]);//将文字更换

  } return convertView ;}

MainActivity.java

package com.example.eyevision.mytest2.GridVeiw;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import com.example.eyevision.mytest2.R;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MyGridViewActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
    private mGridViewAdapter adapter;

    private SimpleAdapter simpleAdapter;
    private GridView mGridView;

    private int[] icon = {R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg,
            R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg,
            R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg,};

    private String[] iconName = {"1", "2", "3", "4", "5", "6", "7", "8", "9"};
    private List, Object>> data_list;

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

    private void init() {
        mGridView = (GridView) findViewById(R.id.mGridView);
        data_list = initList();
//        simpleAdapter = new SimpleAdapter(this,
//                data_list,
//                R.layout.item_gridview,
//                new String[]{"ItemImage", "ItemText"},
//                new int[]{R.id.image, R.id.text});

        adapter = new mGridViewAdapter(this, data_list);
        adapter.setSelection(0);
        mGridView.setAdapter(adapter);

        mGridView.setOnItemClickListener(this);
    }

    public List, Object>> initList() {
        List, Object>> list = new ArrayList, Object>>();
        for (int i = 0; i < icon.length; i++) {
            Map, Object> map = new HashMap, Object>();
            map.put("ItemImage", icon[i]);
            map.put("ItemText", iconName[i]);
            list.add(map);
        }
        return list;
    }

    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        adapter.setSelection(position);
        adapter.notifyDataSetChanged();
        Toast.makeText(this, position + "", Toast.LENGTH_LONG).show();
    }
}

adapter

package com.example.eyevision.mytest2.GridVeiw;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.eyevision.mytest2.R;

import java.util.List;
import java.util.Map;

/**
 * Created by eyevision on 2016/2/16.
 */
public class mGridViewAdapter extends BaseAdapter {
    private Context context;
    private List, Object>> listItem;
    private int clickItem = -1;

    private int[] icon = {R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher};
    private String[] iconName = {"a", "b", "c", "d", "e", "f", "g", "h", "i"};

    public mGridViewAdapter(Context context, List, Object>> listItem) {
        this.context = context;
        this.listItem = listItem;
    }

    public void setSelection(int position) {
        this.clickItem = position;
    }

    @Override
    public int getCount() {
        return listItem.size();
    }

    @Override
    public Object getItem(int position) {
        return listItem.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.item_gridview, null);
        }
        ImageView imageView = (ImageView) convertView.findViewById(R.id.image);
        TextView textView = (TextView) convertView.findViewById(R.id.text);

        Map, Object> map = listItem.get(position);
        imageView.setImageResource((Integer) map.get("ItemImage"));
        textView.setText(map.get("ItemText") + "");

        if (clickItem == position) {
            imageView.setImageResource(icon[position]);
            textView.setText(iconName[position]);
        }
        return convertView;
    }
}