Android选择列表CheckListView
我之前做过一个封装，也发过一篇文章，https://www.jianshu.com/p/7e81f4f02a2c
但是在我之后的开发时我又不断的去为这个封装组件添加新东西， 关键是添加多了就变得臃肿，再加上我当时犯了一个很大的错误，我对这个组件进行扩展时我没有写注释也没有写文档，导致我现在每次看这个组件内部的代码都要研究一段时间，所以我决定防止之前的那个组件加上对面向对象进一步的了解进行重新的封装。
不多说，先上gayhub地址，节约时间就随便先写了两个demo
https://github.com/994866755/handsomeYe.KylinCheckListView
一.展示页面
1.设计布局
首先做的是先设计我们要展示怎么样子的页面，按我的做法会先画个简单的图。
还是分左右两种情况，这样我可以设计成Item使用LinearLayout来通过来按顺序addView，这个顺序可以定义一个showLacation参数来决定。
2.展示的思路
展示的思路我想按我之前封装的那个一样，我觉得那个思路很好。就是内部封装写好adapter和viewholder，图中内部的方块用个viewmodel来代替，这个viewmodel由外界传入，就相当于普通RecyclerView的viewholder
3.开发基本页面
先不考虑单选/多选的逻辑操作，先不考虑与外部的关联，先不考虑组件的扩展，而是现在组件内部把页面给跑起来。
public class KylinCheckListView extends FrameLayout{
// 单选与多选
public static final int RADIO = 0;
public static final int MULTISELECT = 1;
// 显示左/显示右
public static final int CHECKLEFT = 0;
public static final int CHECKRIGHT = 1;
// 列表控件
protected RecyclerView mRecyclerView;
// 显示位置
protected int showLacation = CHECKLEFT;
// 子布局
protected Class<?> itemClass;
// 数据
protected List<String> datalist = new ArrayList<>();
// 适配器
protected KylinCheckListAdapter mAdapter;
public KylinCheckListView(Context context) {
super(context);
create();
}
public KylinCheckListView(Context context, AttributeSet attrs) {
super(context, attrs);
// todo 在xml中添加自定义参数
create();
}
public KylinCheckListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public KylinCheckListView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
/**
* 初始化操作
*/
protected void create(){
initView();
initAdapter();
}
/**
* 初始化View
*/
protected void initView(){
mRecyclerView = initList();
this.addView(mRecyclerView);
}
/**
* 初始化RecyclerView
*/
protected RecyclerView initList(){
RecyclerView recyclerView = new RecyclerView(getContext());
FrameLayout.LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
recyclerView.setLayoutParams(lp);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));// todo 可设置传入参数 布局
recyclerView.addItemDecoration(new BerItemDecoration(1)); // todo 可设置传入参数 间距
return recyclerView;
}
/**
* 初始化Adapter
*/
protected void initAdapter(){
mAdapter = new KylinCheckListAdapter();
}
/**
* 设置数据
*/
public void setDataToView(List<String> datalist){
this.datalist = datalist;
mRecyclerView.setAdapter(mAdapter);
}
// todo 添加删除列表数据等操作
/**
* get or set
*/
//返回列表
public RecyclerView getRecyclerView() {
return mRecyclerView;
}
// 设置Item的布局类
public void setItemClass(Class<?> itemClass) {
this.itemClass = itemClass;
}
/**
* RecycerView 的 Adapter
*/
public class KylinCheckListAdapter extends RecyclerView.Adapter<KylinCheckListViewHolder>{
@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}
@Override
public KylinCheckListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LinearLayout itemLayout = initChildLayout();
KylinCheckListViewHolder viewHolder = new KylinCheckListViewHolder(itemLayout);
return viewHolder;
}
protected LinearLayout initChildLayout(){
LinearLayout itemLayout = new LinearLayout(getContext());
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// todo 可以在此设置padding等操作
itemLayout.setLayoutParams(lp);
itemLayout.setOrientation(LinearLayout.HORIZONTAL);
itemLayout.setBackgroundResource(R.color.app_blue);
return itemLayout;
}
@Override
public void onBindViewHolder(KylinCheckListViewHolder holder, int position) {
holder.setPosition(position);
holder.setData(datalist.get(position));
}
@Override
public int getItemCount() {
return datalist.size();
}
}
/**
* RecycerView 的 ViewHolder
*/
public class KylinCheckListViewHolder extends RecyclerView.ViewHolder{
protected CheckBox mCheckBox;
protected String data;
protected int position;
protected CheckViewModel mViewModel;
public KylinCheckListViewHolder(View itemView) {
super(itemView);
initView();
}
private void initView(){
mCheckBox = initCheckBox();
mViewModel = initViewModel();
if (itemView instanceof LinearLayout){
LinearLayout llContent = (LinearLayout) itemView;
// 没有核心布局的话没必要线束布局
if (mViewModel != null){
View contentChild = mViewModel.getContentView();
ViewGroup.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
contentChild.setLayoutParams(lp);
if (showLacation == CHECKLEFT){
llContent.addView(mCheckBox);
llContent.addView(contentChild);
}else if (showLacation == CHECKRIGHT){
llContent.addView(contentChild);
llContent.addView(mCheckBox);
}
}
}
}
private CheckBox initCheckBox(){
CheckBox checkBox = new CheckBox(getContext());
LinearLayout.LayoutParams cbLp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
checkBox.setLayoutParams(cbLp);
return checkBox;
}
private CheckViewModel initViewModel(){
try {
// todo 添加Bundle情况的反射
Class[] paramTypes = new Class[]{Context.class};
Object[] params = new Object[]{getContext()};
Constructor con = itemClass.getConstructor(paramTypes);
mViewModel = (CheckViewModel) con.newInstance(params);
return mViewModel;
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InstantiationException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
return null;
}
public void setData(String data){
this.data = data;
if (mViewModel != null){
mViewModel.setData(data);
}
}
public void setPosition(int position) {
this.position = position;
}
}
}
按照这样写法（当然写代码的中间调整了很多细节），可以得到结果
这样确实能得到一个我想要的结果，默认情况下选框在左，核心布局由外部传入通过反射来实现。
看看代码中的一些细节
（1）内部类没有使用静态内部类是因为我想让内部类直接能拿到外部类的变量，如果用静态内部类的话要定义然后传进去，参数有点多，我不想这样做。
（2）核心布局是由外部传入一个Class类让进行反射得到对象，我以前是写通过类名得到，但是传类名的话要把包名也写上，太啰嗦了，这里就改成传class对象。
其它也没什么，到这步代码也不难看懂。
二.添加数据
1.设计数据结构
页面能正常展示之后可以开始设计数据结构了。我打算把数据结构设计成像之前封装的那样，就是先写个基类结构来保存选框的选择状态。
public class CheckListEntity {
public boolean isCheck = false;
}
然后在之前的代码中用泛型来代替写死的String类型
public class KylinCheckListView<T extends CheckListEntity> extends FrameLayout{
传进这个组件的列表的数据类型强制要求继承CheckListEntity类
2.isCheck 关联选框
更改viewholder中的seyData()方法
public void setData(T data){
this.data = data;
// 设置Item数据
if (mViewModel != null){
mViewModel.setData(data);
}
// 设置选框状态
if (mCheckBox != null){
mCheckBox.setChecked(data.isCheck);
}
}
更改viewholder中的initCheckBox()方法，添加点击选框的事件
private CheckBox initCheckBox(){
CheckBox checkBox = new CheckBox(getContext());
LinearLayout.LayoutParams cbLp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
checkBox.setLayoutParams(cbLp);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
data.isCheck = isChecked;
// todo 单选情况下的逻辑
}
});
return checkBox;
}
这样就能正常的关联view和data。但是我想再多说个我开发过程中的心得。
怎么知道数据已经关联？我个人是使用Debug来观察数据的走向，所以我想说的是，像我开发这个组件，功能很多，代码最后算起来也有几百上千行，这种情况下首先你要明确你一个开发的流程，想好再动手，然后这种情况肯定大量的用到Debug，所以不熟悉的肯定要弄懂，最后就是todo注释，可以看到我代码中有些地方先写了todo
三.选框的逻辑操作
数据已经不用关心了，我们把数据丢给相对的CheckViewModel来做，之后怎么处理展示页面中Item的数据，是CheckViewModel的事，而CheckListView内部也已经通过isChecked拿到它只关心的选框展示，所以已经拿到数据后开始做选框的逻辑操作。
1.单选情况
单选情况需要点击另一个选框，之前的选框选项就会被取消。
我之前有个加了todo的地方，可以看到我现在就能很快的找到在哪块地方写这个单选的逻辑。
选着优秀的算法来开发逻辑
要做这个逻辑，可能很多人会想就是，点击之后，用个for循环，把选中的position的data的isChecked变成true，然后其它变成false，再刷新列表。是不是，肯定很多人会有这种想法。虽然这种做法也行，而且我觉得对性能基本没影响，但是我有强迫症，我看到if啊，看到for啊，我就浑身不舒服。所以我打算用空间换取时间的做法：
定义一个变量来保存正在选中的选框的position，之后的做法就不用我说了吧。
在事件中设置逻辑
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (showType == RADIO){
// 单选情况
Observable.just(position).subscribe(radioCheckAct);
}else {
//多选情况
data.isCheck = isChecked;
//todo 多选情况下的其它操作
}
}
});
用观察者
private Action1<Integer> radioCheckAct = new Action1<Integer>() {
@Override
public void call(Integer integer) {
// 判断边界
if (integer >= datalist.size()){
return;
}
// 重复选的话别浪费时间去刷新
if (integer == radioIndex){
return;
}
if (radioIndex != -1){
datalist.get(radioIndex).isCheck = false;
}
datalist.get(integer).isCheck = true;
radioIndex = integer;
updataAdapter();
}
};
private void updataAdapter(){
mAdapter.notifyDataSetChanged();
}
运行后发现报错Cannot call this method while RecyclerView is computing a layout or scrolling。
读不懂是什么意思，然后上网查，发现很多解决方法。这里再说说我的一个开发心得，防虫和抓虫。
比如说我在网上找这个BUG，很多文章都是告诉你怎么怎么解决啊，直接贴代码给你啊，其实我很不喜欢这种文章，我就真的是很坦白说了，我不喜欢这种文章。
当我还是一个萌新时，我会直接抄解决的代码下来，正常就不管，还是不正常就找其他方法。这其实是一个防虫的过程，就算成功运行，你也只是防止了这个BUG发生，但是它可以通过其它环境或者方式再次使你的程序出BUG，这是一种不安全的方式，所以我很不建议就是直接抄别人的代码。你必须要找到这个错误在哪，这就是抓虫，就算你花很多时间你也要去抓。
其实道理很简单，你发现一只蚊子，你给自己喷花露水（防虫），还是拍死它（抓虫）。
回来讲讲这个BUG，我找了很多文章都没有详细说这个BUG是什么情况，我只能慢慢Debug去找，发现了最终的问题。
如果我调用 notifyDataSetChanged（）的话，会更新列表，但是列表设置数据时执行了mCheckBox.setChecked(data.isCheck); 而状态一变就会去调用那个监听的方法，就会notifyDataSetChanged（），也就是说在notifyDataSetChanged（）的过程中执行notifyDataSetChanged（），所以就会报这个错误。
那我就不应该用setOnCheckedChangeListener监听，改用setOnClickListener来监听
checkBox.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (showType == RADIO){
// 单选情况
Observable.just(position).subscribe(radioCheckAct);
}else {
//todo 多选情况下的其它操作
}
}
});
这样就能正常实现效果
2.多选情况
和单选一样，也是使用Rx来做
// 多选情况下的观察者
private Action1<Integer> multCheckAct = new Action1<Integer>() {
@Override
public void call(Integer integer) {
// 判断边界
if (integer >= datalist.size()){
return;
}
datalist.get(integer).isCheck = !(datalist.get(integer).isCheck);
updataAdapter(); // todo 优化成局部刷新
}
};
3.返回选择结果
既然是封装，必然需要返回所选取的选项的结果。
这里我打算先定义一个接口来定义这个View的和外界对接的行为。
public interface KylinCheckListImpl {
/**
* 单选的结果
*/
int radioResult();
/**
* 多选的结果
*/
List<Integer> multResults();
/**
* 多选时已选择的数量 (可以用这个数量来判断是否全选)
*/
int multCount();
/**
* 全选/全不选
*/
void multAllCheck(boolean state);
/**
* 单选
*/
void radioCheck(int position);
/**
* 设置选择
*/
void check(int position);
/**
* 懒更新
*/
void lazyUpdate();
}
暂时先就想到这么多View和外界交互的行为，让KylinCheckListView实现这个就接口，然后重写接口中的方法。
上面定义的radioCheck(int position)和check(int position)区别在于一个马上更新，一个不会马上更新
还有写这个接口有什么用，如果你有新的交互方法要扩展，直接在接口里面定义。
4.写接口中的方法
（1）radioResult
public int radioResult() {
return radioIndex;
}
之前我说过radioIndex是记录单选的坐标，所以这里直接返回这个就是单选的结果，-1代码没选。
（2）multResults
返回多选的结果比较麻烦，我需要返回一个数组
public List<Integer> multResults() {
List<Integer> resultList = new ArrayList<>();
for (int i = 0; i < datalist.size(); i++) {
if (datalist.get(i).isCheck) {
resultList.add(i);
}
}
return resultList;
}
（3）multCount
public int multCount() {
int count = 0;
for (int i = 0; i < datalist.size(); i++) {
if (datalist.get(i).isCheck) {
count++;
}
}
return count;
}
一般我们可以拿到这个多选时的数量和总数量对比，判断是否全选，但是想想，如果我要做一个每选择一次都要判断是否全选的话，就会没选一次都进行一次循环，这虽然对体验没什么影响，但我有强迫症，我肯定不容许每次都浪费时间去重复循环，所以我想了一个新的办法来判断是否全选。
（4）isMultAll
新添加的方法，用于判断是否全选
public int isMultAll(int count,int position){
if (count < 1){
return 0;
}
if (position >= datalist.size()){
return count;
}
if (datalist.get(position).isCheck){
return count++;
}else {
return count--;
}
}
可以看到我传入两个参数，第一个表示目前总选择的数量，第二个表示当前点击的选项的下标。
我是这样想的，如果做每点一次都判断多选的话，我可以在一开始先用multCount获取到总选中的数量，然后再对每次选中的进行判断，如果当次选中的选项的isCheck是true，那就加1，相反减1，然后返回，这样就不用每次都做循环。至于行不行，等我全部写完试试就知道了。
（5）multAllCheck
根据传入的boolean值来设置全选或者全不选
public void multAllCheck(boolean state) {
for (int i = 0; i < datalist.size(); i++) {
datalist.get(i).isCheck = state;
}
mAdapter.notifyDataSetChanged();
}
（6）radioCheck
public void radioCheck(int position) {
if (position < datalist.size()){
datalist.get(position).isCheck = true;
mAdapter.notifyDataSetChanged();
}
}
（7）check 和 lazyUpdate
这两个就是把radioCheck的设置和更新给分开
好了，这样就把一些和外界常用的交互给做完了，现在试试效果。是我直接用debug来试
单选radioCheck，出了点问题，改一下
public void radioCheck(int position) {
Observable.just(position).subscribe(radioCheckAct);
}
然后发现多选的isMultAll还是出问题，后来想想这种做法也不对，违反了迪米特原则，改一下。
我把count定义在内部，由我来做操作，而不是将它暴露给用户去使用。
public boolean isMultAll(){
return multCount == datalist.size();
}
到这里就做到了一些常用的与外界的关联逻辑
四.设置事件
我这暂时只用到了选中时的事件，之后扩展也不难，所以这里就先写选中的事件。
public interface KylinOnCheckListener {
void kylinCheckChange(int position,boolean isChecked);
}
两个观察者内部加监听的操作
// 单选情况下的观察者
private Action1<Integer> radioCheckAct = new Action1<Integer>() {
@Override
public void call(Integer integer) {
// 判断边界
if (integer >= datalist.size()){
return;
}
// 重复选的话别浪费时间去刷新
if (integer == radioIndex){
return;
}
if (radioIndex != -1){
datalist.get(radioIndex).isCheck = false;
}
datalist.get(integer).isCheck = true;
radioIndex = integer;
updataAdapter();
if (kylinOnCheckListener != null){
kylinOnCheckListener.kylinCheckChange(radioIndex,true);
}
}
};
// 多选情况下的观察者
private Action1<Integer> multCheckAct = new Action1<Integer>() {
@Override
public void call(Integer integer) {
// 判断边界
if (integer >= datalist.size()){
return;
}
datalist.get(integer).isCheck = !(datalist.get(integer).isCheck);
if (datalist.get(integer).isCheck){
multCount++;
}else {
multCount--;
}
updataAdapter(); // todo 优化成局部刷新
if (kylinOnCheckListener != null){
kylinOnCheckListener.kylinCheckChange(radioIndex,datalist.get(integer).isCheck);
}
}
};
五.View属性扩展
之前做了那个搜索框组件发现用attrs的话那个尺寸有问题，我这里打算测试一下自定义view中的getDimension得到的结果是什么
首先结果肯定是一个float类型的没错
（1）直接写默认值不加单位
type.getDimension(R.styleable.KylinCheckListViewStyle_cb_margin_left,16);
得到结果： 16.0
（2）传dp
type.getDimension(R.styleable.KylinCheckListViewStyle_cb_margin_left, DimensionUtils.dip2px(getContext(),16));
得到结果： 48.0
DimensionUtils.dip2px(getContext(),16)的结果： 48.0
（3）在xml中传px
app:cb_margin_left = "16px"
得到结果： 16.0
（4）在xml中传dp
app:cb_margin_left = "16dp"
得到结果：48.0
看了下结果，没毛病啊，但是为什么我之前那个搜索的就这么怪，先不管了，这里没毛病的话先直接弄。
添加常用的属性
<!-- 选框样式 -->
<declare-styleable name="KylinCheckListViewStyle">
<!-- checkbox的margin -->
<attr name="cb_margin_left" format="dimension"/>
<attr name="cb_margin_right" format="dimension"/>
<attr name="cb_margin_top" format="dimension"/>
<attr name="cb_margin_bottom" format="dimension"/>
<!-- checkbox的背景-->
<attr name="cb_backgroup" format="reference"/>
<!-- item的背景-->
<attr name="item_backgroup" format="reference"/>
<!-- item的gravity-->
<attr name="item_gravity" format="integer"/>
<!-- recyclerview的分割线-->
<attr name="item_decoration" format="dimension"/>
</declare-styleable>
我目前就写这么多，实在没时间加太多。
六.添加数据的操作
发现还没有做完啊，还要添加数据的增删。
/**
* 添加数据
*/
public void addData(List<T> datas){
datalist.addAll(datas);
updataAdapter();
}
/**
* 添加数据
*/
public void addData(T data){
datalist.add(data);
updataAdapter();
}
/**
* 删除
*/
public void removeData(int position){
datalist.remove(position);
updataAdapter();
}
把datalist设置个get方法，增强扩展。
七.总结
全部代码在gayhub，这里就不重复贴了，抓紧时间直接做个总结。
1.不要重复造轮子
我这里重写封装已经封装过的组件是一个错误的做法，主要以前做扩展的时候没有整理，导致多次扩展后原来的组件变得有点乱，所以要讲第二点
2.扩展时要进行整理和更新文档
3.开发前先想清楚要做成什么样子，想清楚开发的步骤
4.碰到BUG时，尽量抓虫而不是防虫
框架扩展
在实际项目中碰到问题对框架进行扩展，但是这里写得太多内容，就分出去写一篇新的文章来讲所扩展的内容。
