先看效果图：
思路:
使用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来代替他们，效果一样，但省去了复用的麻烦，也不必处理前面👆两者的事件
