Android GridViewd 简单代码实现

背景

新项目的一个界面需要用到九宫格界面，每个Item包含一张图片，下面是对应的文字描述，给每个Item设置点击监听器，当点击时跳转到相应的界面。于是想到使用Android 原生控件GridView来实现。

代码结构

1. MyActivity.java

主Activity，给GridView设置数据源（图片和文字描述），生成Adapter，并将其设置给GridView。监听点击GridView的事件响应（页面跳转）。

public class MyActivity extends Activity implements AdapterView.OnItemClickListener {
    private GridView gvOperatingTable;
    private GridAdapter  mGridAdapter;
    private ArrayList<GridContentItem> mList = new ArrayList<>();
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_operating_table);
        mContext = this;
        initGridItemData();                     //设置Grid Item数据
        gvOperatingTable = (GridView) findViewById(R.id.gv_operating_table);
        mGridAdapter = new GridAdapter(mContext, mList);
        gvOperatingTable.setAdapter(mGridAdapter);
        gvOperatingTable.setOnItemClickListener(this);
    }



    /**
     * descripyion:初始化GridView Item参数：图片，描述，以及跳转的Activity
     * param  null
     * return  null
     */
    private void initGridItemData() {
        mList.clear();
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "发电参数配置", MainActivity.class));
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "网络配置", MainActivity.class));
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "管理系统配置", MainActivity.class));
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "设备维护", MainActivity.class));
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "日志管理", MainActivity.class));
        mList.add(new GridContentItem(R.drawable.ic_alarm_major, "设备信息", MainActivity.class));
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Intent mIntent = new Intent();
        GridContentItem item = (GridContentItem) gvOperatingTable.getItemAtPosition(position);
        Class<?> activityCls = item.getActivityClass();         //获取跳转的界面类
        mIntent.setClass(mContext, activityCls);
        startActivity(mIntent);
    }
}

2. GridAdapter.java

实现GridView使用的Adapter

/**
 * Description: add adapter for Operating Table
 */
public class GridAdapter extends BaseAdapter{
    private Context mContext;

    /** 存储item内容，图片id、名称、响应activity */
    private ArrayList<GridContentItem> mList;
    private LayoutInflater inflater;

    public  OperatingTableGridAdapter(Context context, ArrayList<GridContentItem> list){
        mContext = context;
        mList = list;
        inflater = LayoutInflater.from(context);
    }

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

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

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

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        ViewHolder holder = null;

        if(view == null){
            view = inflater.inflate(R.layout.operating_table_item, null);
            holder = new ViewHolder();
            holder.logo = (ImageView) view.findViewById(R.id.iv_item_image);
            holder.name = (TextView)view.findViewById(R.id.tv_item_desc);
            view.setTag(holder);
        } else{
            holder = (ViewHolder)view.getTag();
        }

        //设置每个Item的宽度和高度
        AbsListView.LayoutParams params = new AbsListView.LayoutParams(
                android.view.ViewGroup.LayoutParams.MATCH_PARENT,  ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(params);
        GridContentItem item = mList.get(position);     //获取到该Item实例

        //设置Item图片和名字
        holder.logo.setImageResource(item.getItemImgId());
        holder.name.setText(item.getItemName());

        return view;
    }

    private static class ViewHolder{
        /** 图标 */
        ImageView logo;
        /** 名称 */
        TextView name;
    }
}

3. GridContentItem

实现对于数据源（图片和文字，跳转的界面类）的封装

/**
 * Description: add adapter for Operating Table
 */
public class GridAdapter extends BaseAdapter{
    private Context mContext;

    /** 存储item内容，图片id、名称、响应activity */
    private ArrayList<GridContentItem> mList;
    private LayoutInflater inflater;

    public  OperatingTableGridAdapter(Context context, ArrayList<GridContentItem> list){
        mContext = context;
        mList = list;
        inflater = LayoutInflater.from(context);
    }

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

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

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

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        ViewHolder holder = null;

        if(view == null){
            view = inflater.inflate(R.layout.my_gridview_item, null);
            holder = new ViewHolder();
            holder.logo = (ImageView) view.findViewById(R.id.iv_item_image);
            holder.name = (TextView)view.findViewById(R.id.tv_item_desc);
            view.setTag(holder);
        } else{
            holder = (ViewHolder)view.getTag();
        }

        //设置每个Item的宽度和高度
        AbsListView.LayoutParams params = new AbsListView.LayoutParams(
                android.view.ViewGroup.LayoutParams.MATCH_PARENT,  ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(params);
        GridContentItem item = mList.get(position);     //获取到该Item实例

        //设置Item图片和名字
        holder.logo.setImageResource(item.getItemImgId());
        holder.name.setText(item.getItemName());

        return view;
    }

    private static class ViewHolder{
        /** 图标 */
        ImageView logo;
        /** 名称 */
        TextView name;
    }
}

4.  my_gridview_item.xml

每个GridView Item的布局

<?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:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="10dp">

    <ImageView
        android:id="@+id/iv_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="70dp"
        android:src="@drawable/bg_item_empty" />

    <TextView
        android:id="@+id/tv_item_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="70dp"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:singleLine="false"
        android:text="hello"
        android:textColor="#222222"
        android:textSize="30sp" />

</LinearLayout>

Demo展示