支持多选的Spinner控件
概述
当我们要做单选功能的时候,我们会很自然的想到Spinner,它可以在一个集合中选择一个我们需要的值。但是有时候我们需要在一个集合中选择多个值,这个时候Spinner就不能满足需求。此时可以根据自己的需要来实现类似于Spinner效果的多选控件。
效果图
实现分析
需要实现的效果是点击一个文本后弹出一个多选列表,在点击之后选择、取消选择,点击确定之后设置文本。这个文本框就用TextView,让它支持点击。点击之后弹出一个dialog就可以了,至于选择效果可以在ListView的Adapter里进行逻辑处理。下面开始具体步骤:
1、首先需要用TextView来显示选择信息,在上面说明了,就继承TextView,在弹出对话框的时候需要一个标题,我们也传进来。然后就是要显示的数据集,因为考虑到可能显示的样式会和需要的值不一样,这里我们就自己定义一个类给它一个Name和Value属性。
此外还有被选择的数据集,就用Set来存放。定义需要的属性,生成相应的get和set方法。
public class MultiSpinner extends TextView implements View.OnClickListener,DialogInterface.OnClickListener{
private ListView listView;
private Context context;
private String title;
private List<SimpleSpinnerOption> dataList;
private Adapter adapter;
private Set<Object> checkedSet;
private int selectCount=-1;
private boolean isEmpty(){
return dataList==null?true:dataList.isEmpty();
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public void setCheckedSet(Set<Object> checkedSet) {
this.checkedSet = checkedSet;
showSelectedContent();
}
public List<SimpleSpinnerOption> getDataList() {
return dataList;
}
public int getSelectCount() {
return selectCount;
}
public void setSelectCount(int selectCount) {
this.selectCount = selectCount;
}
public void setDataList(List<SimpleSpinnerOption> dataList) {
this.dataList = dataList;
if (adapter==null){
adapter=new Adapter(dataList);
this.listView.setAdapter(adapter);
}else {
adapter.setList(dataList);
adapter.notifyDataSetChanged();
}
}
public MultiSpinner(Context context) {
super(context, null);
}
public MultiSpinner(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
this.setOnClickListener(this);
listView=new ListView(context);
listView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
adapter = new Adapter(null);
this.listView.setAdapter(adapter);
}
public MultiSpinner(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
数据类型SimpleSpinnerOption的代码如下:
public class SimpleSpinnerOption {
private String name;
private Object value;
public SimpleSpinnerOption(){
this.name="";
this.value="";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Object getValue() {
return value;
}
public void setValue(Object value) {
this.value = value;
}
}
在上面的代码中,我们在初始化的时候为该控件本身设置了监听事件,由于此时还不知道数据源,所以为ListView设置了一个空的数据集。而在setDataList方法中拿到数据源并设置给listView中用于显示。为了显示出来,我们在控件本身的onClick事件中做显示工作,代码如下:
@Override
public void onClick(View view) {
ViewGroup parent=(ViewGroup)listView.getParent();
if(parent!=null){
parent.removeView(listView);
}
if (dataList==null){
Log.d("MultiSpinner","no data to show");
}
adapter.setCheckedSet(checkedSet);
new AlertDialog.Builder(context)
.setTitle(title)
.setPositiveButton("确定",this)
.setNegativeButton("取消",this)
.setView(listView).show();
}
我们在onClick中弹出一个对话框让listview能够进行显示。并且设置了相应的点击事件。由于如果之前已经选择过了,再次点击控件,应该能把选择的效果还原出来。所以用adapter.setCheckedSet(checkedSet)来把已经选择的数据传入adapter中进行处理。
接下来看一下Adapter适配器的代码:
class Adapter extends BaseAdapter implements OnClickListener {
private List<SimpleSpinnerOption> list;
private Set<Object> checkedSet;
public Adapter(List<SimpleSpinnerOption> list){
this.list=list;
checkedSet=new HashSet<Object>();
}
public void setList(List<SimpleSpinnerOption> list) {
this.list = list;
}
public Set<Object> getCheckedSet(){
return this.checkedSet;
}
public void setCheckedSet(Set<Object> checkedSet) {
this.checkedSet=new HashSet<Object>();
if(checkedSet!=null){
this.checkedSet.addAll(checkedSet);
}
}
@Override
public int getCount() {
return list==null?0:list.size();
}
@Override
public Object getItem(int position) {
return list==null?null:list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
SimpleSpinnerOption mul=(SimpleSpinnerOption)this.getItem(position);
Wrapper wrapper=null;
if(convertView==null){
convertView = LayoutInflater.from(MultiSpinner.this.getContext()).inflate(R.layout.multi_spinner_item,null);
wrapper=new Wrapper();
wrapper.textView=(TextView)convertView.findViewById(R.id.textView);
wrapper.checkBox=(CheckBox)convertView.findViewById(R.id.checkBox);
wrapper.checkBox.setOnClickListener(this);
convertView.setTag(wrapper);
}
wrapper=(Wrapper)convertView.getTag();
wrapper.textView.setText(mul.getName());
if(checkedSet!=null){
if(checkedSet.contains(mul.getValue())){
wrapper.checkBox.setChecked(true);
}else{
wrapper.checkBox.setChecked(false);
}
}
wrapper.checkBox.setTag(position);
return convertView;
}
@Override
public void onClick(View v) {
CheckBox checkBox=(CheckBox)v;
Integer position=(Integer)checkBox.getTag();
if(position==null){
return;
}
SimpleSpinnerOption op=(SimpleSpinnerOption)getItem(position);
if(checkBox.isChecked()){
int maxCount= MultiSpinner.this.getSelectCount();
if(maxCount>-1&&checkedSet.size()>=maxCount){
checkBox.setChecked(false);
Toast.makeText(MultiSpinner.this.getContext(), String.format("最多只能选择 %s 个", selectCount), Toast.LENGTH_SHORT).show();
return;
}
checkedSet.add(op.getValue());
}else{
checkedSet.remove(op.getValue());
}
}
class Wrapper{
public TextView textView;
public CheckBox checkBox;
}
}
在适配器的item布局里,用一个textview来显示文字,用checkbox来显示选中状态。在getView中判断是否已经选择修改checkbox的状态。同时在checkbox的点击事件中进行选择值checkedSet的修改。
最后是我们点击确定取消按钮的逻辑:
@Override
public void onClick(DialogInterface dialogInterface, int i) {
switch (i){
case -1:
this.checkedSet=adapter.getCheckedSet();
showSelectedContent();
break;
}
}
private void showSelectedContent(){
StringBuilder sb=new StringBuilder();
for(SimpleSpinnerOption option:getCheckedOptions()){
sb.append(option.getName()).append(",");
}
if(sb.length()>0){
sb.setLength(sb.length()-1);
}
setText(sb.toString());
}
代码很简单,就是拿到数据集之后进行一下展示,你也可以根据自己想要的展示方式进行修改。
使用就在代码中找到控件同时设置一下数据集就ok了。在需要拿选择数据的时候调用multiSpinner.getCheckedOptions()做自己的处理。
multiSpinner = (MultiSpinner) findViewById(R.id.mulSpinner);
multiSpinner.setTitle("月份选择");
ArrayList multiSpinnerList=new ArrayList();
for(int i=0;i<12;i++){
SimpleSpinnerOption option=new SimpleSpinnerOption();
option.setName((i+1)+" 月");
option.setValue(i+1);
multiSpinnerList.add(option);
}
multiSpinner.setDataList(multiSpinnerList);
到这里就实现了一个可以多选的类似于的spinner控件啦!
源码下载请戳:自定义实现多选的Spinner控件