Android开发之GridView实现弹出式选择器

前段时间，写了一个小项目，里面有个界面如下图所示，之前的版本是用Spinner来做，觉得不够拉轰，所以采用GridView做了一个实现，效果还不错，Mark一下。

弹出单选GridView.png

一、点击那个底部的绿色按钮，弹出一个对话框，对话框里面的内容是一个单选的GridView，关键代码如下：

//add_pay就是底部那个按钮
add_pay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog alertDialog = new AlertDialog.Builder(AddActivity.this)
                        .setView(getChoiceView(2))
                        .create();

                alertDialog.show();
            }
        });

上面的重点是那个getChoiceView(2)，因为我有好几个数据源，所以就用一个int类型参数的type来区分一下，不同的type取不同的数据源展示。

二、getChoiceView方法，主要是加载布局，初始化GridView，然后设置Adapter和点击事件，比较简单，关键代码如下：

   private View getChoiceView(final int type) {

        //R.layout.dialog_choice就是GridView所在的那个布局，下面有介绍
        View view = LayoutInflater.from(AddActivity.this).inflate(R.layout.dialog_choice, null);
        GridView gv = (GridView) view.findViewById(R.id.gv);
        //GridView的数据源，直接从strings.xml中加载过来
        List data; 
        //自定义适配器
        final MyAdapter adapter;
        //判断类型，加载数据源设置Adapter
        if (type == 1) {
            data = Arrays.asList(getResources().getStringArray(R.array.event));
            adapter = new MyAdapter(this, data);
            gv.setAdapter(adapter);
            //设置默认选中
            adapter.changeState(eventSelected);
        } else {
            data = Arrays.asList(getResources().getStringArray(R.array.pay));
            adapter = new MyAdapter(this, data);
            gv.setAdapter(adapter);
            adapter.changeState(paySelected);
        }

        //监听点击事件，点击以后，之前的选中应该变为未选中
        gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                if (type == 1) {
                    eventSelected = position;
                    //将选择的内容设置到底部的按钮上去
                    add_event.setText(eventArray.get(position).toString());
                } else {
                    paySelected = position;
                    add_pay.setText(payArray.get(position).toString());
                }
                alertDialog.dismiss();
                adapter.changeState(position);
            }
        });
        return view;
    }

三、dialog_choice 与 choice_item布局，非常简单

GridView所在的布局如下：

GridView中每个item的布局如下：

四、MyAdapter继承自BaseAdapter，关键是弄一个记录选中与否的ArrayList，默认初始化的时候都是未选中，然后设置一个方法能修改选中项，在getView中根据选中与否，来设置背景色

@Override
public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder = null;
        if (convertView == null) {
            viewHolder = new ViewHolder();
            convertView = mInflater.inflate(R.layout.choice_item, null);
            viewHolder.title = (TextView) convertView.findViewById(R.id.tv_choice);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        if (!"".equals(data.get(position))) {
            viewHolder.title.setText(data.get(position));
        }
        if (list.get(position) == true) {
            viewHolder.title.setBackgroundDrawable(activity.getResources()
                    .getDrawable(R.drawable.choice_item_bg_selected));
        } else {
            viewHolder.title.setBackgroundDrawable(activity.getResources()
                    .getDrawable(R.drawable.choice_item_bg_default));
        }


        return convertView;
}

  /**
     * 修改选中时的状态
     *
     * @param position
     */
public void changeState(int position) {
        if (lastPosition != -1) {
            list.set(lastPosition, false);// 取消上一次的选中状态
        }
        list.set(position, !list.get(position));// 设置这一次的选中状态
        lastPosition = position; // 记录本次选中的位置
        notifyDataSetChanged(); // 通知适配器进行更新
}

最终效果

演示.gif