实现单选及多选的选择对话框

作者: ditclear | 来源:发表于2016-11-22 19:42 被阅读1484次

先看效果图：

pick.png

思路:

使用DialogFragment、RecyclerView、CheckBox

准备：

圆角Drawable，checkbox Drawable，checkButtonDrawable，字体颜色 Drawable

开发的时候应先把所需要的所有UI准备好之后再进行开发，而不是边开发边找ui图或者编写xml文件

开始Code:

1. 整体布局文件

<?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:orientation="vertical"
              android:padding="10dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize">

        <TextView
            android:id="@+id/tip_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>

        <TextView
            android:id="@+id/title_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Title"/>
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </android.support.v7.widget.RecyclerView>

    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>

    <TextView
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/blue_button_background"
        android:padding="10dp"
        android:text="确定"/>
</LinearLayout>

Tips: 用Space可以用来占位

2.PickerDialog

  /**
   * 新建一个dialog
   *
   * @param maxSelected 最大可选数
   * @param title       标题
   * @param list        数据源
   * @return
   */
  public static PickerDialog newInstance(int maxSelected, String title, ArrayList<? extends IContent> list) {
      Bundle args = new Bundle();
      args.putInt(MAX_NUM, maxSelected);
      args.putString(TITLE, title);
      args.putParcelableArrayList(SOURCE, list);
      PickerDialog fragment = new PickerDialog();
      fragment.setArguments(args);
      return fragment;
  }

IContent是一个接口，有一个getDesc()方法用于显示单位的名称，由于需要将其序列化，所以IContent 需要继承自Parcelable接口。

public interface IContent extends Parcelable{

    String getDesc();

}

然后给RecyclerView设置一下adapter,布局方式以及间隔就好了

·····
·····
·····
·····
·····
·····
·····
·····
·····
·····
·····
吗？当然不是囖!重点才刚开始，精髓都在adapter里

3.PickerAdapter

public class PickerAdapter<T extends IContent> extends 
RecyclerView.Adapter<PickerAdapter.ItemHolder> {

···
public PickerAdapter(int maxSelected, List<T> list, Context context) {
        this.maxSelected = maxSelected;
        mList = list;
        this.context = context;
    }

    @Override
    public ItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(context).inflate(R.layout.item_picker, null, false);
        return new ItemHolder(v);
    }

    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {
        ···
  }

  static class ItemHolder extends RecyclerView.ViewHolder {
        CheckBox cbx;

        public ItemHolder(View itemView) {
            super(itemView);
            cbx = (CheckBox) itemView.findViewById(R.id.checkbox);
        }
    }

}

item_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/checkbox"
          android:layout_width="match_parent"
          android:layout_height="100dp"
          android:layout_gravity="center"
          android:background="@drawable/selector_item_bg"
          android:button="@drawable/selector_check_button"
          android:gravity="right|center_vertical"
          android:paddingRight="10dp"
          android:textColor="@drawable/selector_text"/>

经过上面的步骤一个简单的adapter就写好了，但是有经验的开发一眼就知道上面的代码有复用所带来的显示问题。

由于ListView/RecyclerView的复用机制,如果我们对第一个Item中的CheckBox进行了选中操作，那么当你向上滑动的时候会发现下面的Item中的CheckBox会自动选中了。相信不少人都曾经遇到过这样的问题，通过goole或者stackoverflow,知道不能用view去保存item视图的状态，于是选择去使用数据来控制，这样确实可以基本解决这个问题。

但是如果我们每个数据都再加上一个布尔值用于记录的话，这代价就有点略大了。为什么呢？一是费时二是费力三是完全没必要。其实Android为我们提供了一种完美的数据结构来解决这个问题：SparseBooleanArray ←_←

相信不少看过android内存优化、性能优化的同学都知道这个东西，然后这些文章都只告诉你使用SparseArray替代HashMap，然后会写一堆关于存储结构的东西，告诉你这个更适合android。当时我就比较疑惑问什么SparseArray默认的key都是Integer类型的。那么，现在的代码就是这样了：

    ···
    private SparseBooleanArray mCheckStates = new SparseBooleanArray();
    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {

        holder.cbx.setTag(position);
        holder.cbx.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                int pos = (int) buttonView.getTag();
                if (isChecked) {
                    mCheckStates.put(pos, true);
                    //do something
                } else {
                    mCheckStates.delete(pos);
                    //do something
                }
            }
        });
        holder.cbx.setText(mList.get(position).getDesc());
        holder.cbx.setChecked(mCheckStates.get(position, false));
    }
    ···

就这些代码就解决了复用的问题，而且完全不必去给数据项新增一个布尔字段，到这里是不是就恍然大悟了

到了这一步后，我们就开始实现单选模式

实现单选

单选比较简单，点击之后关闭dialog然后通过一个回调将选中的值传回去就可以了,当然我们需要先判断一下是否已经有选中了的值，如果有选中了的值了，那么久先将其置为未选中状态，那么怎么知道是否有选中的值呢？SparseArray又立功了

    ···
    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {

        holder.cbx.setTag(position);
        holder.cbx.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                int pos = (int) buttonView.getTag();
                if (isChecked) {
                    if (maxSelected == 1 && maxSelected == mCheckStates.size()) {
                        int pre = mCheckStates.keyAt(0);
                        mCheckStates.clear();
                        notifyItemChanged(pre);
                    } 
                    mCheckStates.put(pos, true);
                    //do something
                    if (mOnSelectChangeListener != null) {
                        mOnSelectChangeListener.onSelect(pos, mCheckStates.size());
                    }

                } else {
                    mCheckStates.delete(pos);
                    //do something else
                    if (mOnSelectChangeListener != null) {
                        mOnSelectChangeListener.unSelect(pos);
                    }
                }
            }
        });
        holder.cbx.setText(mList.get(position).getDesc());
        holder.cbx.setChecked(mCheckStates.get(position, false));
    }

    public interface OnSelectChangeListener {

        void onSelect(int pos, int selectedSize);

        void unSelect(int pos);
    }
    ···

实际效果：
[图片上传失败...(image-e4ebf6-1521086193167)]

实现多选

多选分为2种

1.有限制选择个数

由于当选择到最大可选数时，即使把checkbox设为disable也无法控制选中状态，所以需要在代码里置为未选中状态setChecked(!isChecked),但是由于setChecked也会调用onCheckedChanged方法，导致引起死循环，所以需要加锁进行控制

    if (mCheckStates.size() == maxSelected) {
       //不然cbx改变状态.
       lockState = true;
       buttonView.setChecked(!isChecked);
       lockState = false;
       Toast.makeText(context, "最多可选" + maxSelected + "个", Toast.LENGTH_SHORT).show();
       return;
   }

实际效果：
[图片上传失败...(image-588799-1521086193168)]
2.无限制选择个数

无限制就不需要做什么额外的操作，默认就是无限制的，只需要返回选中的数据集就👌了.
实际效果：
[图片上传失败...(image-8c6eba-1521086193168)]

接着获取选中的集合

public ArrayList<T> getSelectedItems() {
        selectItems.clear();
        for (int i = 0; i < mCheckStates.size(); i++) {
            if (mCheckStates.valueAt(i)) {
                selectItems.add(mList.get(mCheckStates.keyAt(i)));
            }
        }
        return selectItems;
}

最后

在PickerDialog中写一个回调接口，将选中的数据集传递回去，就大功告成了

    /**
     * 选择后的回调，返回选中的list集合
     * * @param <T>
     */
    public interface OnSelectedListener <T extends IContent> {
        void onSelected(List<T> contents);
    }

扩展：

在屏幕旋转时保存选中的数据
复写onSaveInstanceState和onViewStateRestored函数，当改变屏幕方向时会调用这两个方法

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        //保存数据
        //···
        outState.putInt(SELECTED_NUM, hasSelectedNum);
        outState.putString(SELECTED_POS_SET, adapter.getSelectedPos());
    }

    @Override
    public void onViewStateRestored(@Nullable Bundle savedInstanceState) {
        super.onViewStateRestored(savedInstanceState);
        //可以在这里设置格数，横屏有3格，竖屏两格
        Configuration newConfig = getActivity().getResources().getConfiguration();
        if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
            layoutManager.setSpanCount(2);
        } else {
            layoutManager.setSpanCount(3);
        }
        recyclerView.setLayoutManager(layoutManager);

        if (savedInstanceState == null) {
            return;
        }
        //恢复数据
        //···
        hasSelectedNum = savedInstanceState.getInt(SELECTED_NUM, 0);
        selectedPos = savedInstanceState.getString(SELECTED_POS_SET);
        tipsTv.setText(String.format(getString(R.string.has_selected), String.valueOf(hasSelectedNum)));
        if (adapter != null) {
            adapter.setSelectedPosSet(getSelectedPos());
            adapter.setList(mList);
        }

最后的最后

项目地址:https://github.com/vienan/PickerDialog

更新:

2018-3-15：
为了避免列表中checkbox的复用问题，除了以上的方法还可以使用DataBinding技术去改变对应对象的值，不过最好的方法还是避免在列表中使用checkbox或RadioButton等等的东西，使用StateListDrawable来代替他们，效果一样，但省去了复用的麻烦，也不必处理前面👆两者的事件

实现单选及多选的选择对话框

思路:

准备：

开始Code:

1. 整体布局文件

2.PickerDialog

3.PickerAdapter

实现单选

实现多选

1.有限制选择个数

最后

扩展：

最后的最后

项目地址:https://github.com/vienan/PickerDialog

更新:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读