Android开发中GridView的使用

来源：互联网发布：linux进程调度算法编辑：程序博客网时间：2024/05/19 14:51

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

一，布局。

1，主布局。

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

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"?><LinearLayout 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"    >    <ImageView        android:src="@drawable/ic_launcher"        android:id="@+id/image"        android:layout_width="60dp"        android:layout_height="60dp"        />    <TextView        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="文字"        /></LinearLayout>

二，准备数据源。

这里为了方便，使用了九个同样的图片。图片下面的文字为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<Map<String, 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方法是我们重写的重点。

@Overridepublic 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<String, 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<Map<String, 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<Map<String, Object>> initList() {        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();        for (int i = 0; i < icon.length; i++) {            Map<String, Object> map = new HashMap<String, 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<Map<String, 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<Map<String, 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<String, 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;    }}

0 0