背景

新項目的一個界面需要用到九宮格界面，每個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 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 mList;
    private LayoutInflater inflater;

    public  OperatingTableGridAdapter(Context context, ArrayList 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 mList;
    private LayoutInflater inflater;

    public  OperatingTableGridAdapter(Context context, ArrayList 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的布局  

       

Demo展示