概述

当我们要做单选功能的时候,我们会很自然的想到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控件

支持多选的Spinner控件的更多相关文章

  1. CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09)

    事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便支持wpf的开发,同时,框架仍保留最低.net framework2.0 ...

  2. Spinner控件

    首先在XML文件中声明一个Spinner控件: <Spinner android:id="@+id/spinnerId" android:layout_width=" ...

  3. Android spinner控件

    spinner控件是Android中下拉控件,现在介绍它两种用法.第一种,从资源文件中获取下拉值:第二种,从代码中获取下拉值. 第一种,首先要在资源文件中把值写好: <?xml version= ...

  4. jasonTree多选多级树控件

    jasonTree1.0 jasonTree多选多级树控件(名字是自己取),用于友好的展示树形结构的数据,并可以多选,传统的做法是在一个select的下拉框中显示一个可折叠的树结构,公司的需求人员这种 ...

  5. ProgressBar、RatingBar和Spinner控件

    1.ProgressBar.SeekBar与RatingBar控件 ProgressBar控件,也就是我们通常的进度条控件,可以显示加载的进度等.SeekBar控件,滑块控件,可以根据用户的需要动态为 ...

  6. 大约Android PopupWindow有用Spinner控件点击APP Crash案例整理!

    场景异常,如下面: android.view.WindowManager$BadTokenException: Unable to add window -- token android.view.V ...

  7. CYQ.Data 支持WPF相关的数据控件绑定.Net获取iis版本

    CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09) 事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便 ...

  8. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  9. android 学习 Spinner控件的使用

    今晚看了下spinner控件的使用,结合博客大神的教程,一个小demo 一,SpinnerActivity private Spinner spinner; private ArrayAdapter& ...

随机推荐

  1. 【cs229-Lecture15】奇异值分解

    PCA的实现一般有两种,一种是用特征值分解去实现的,一种是用奇异值分解去实现的. 内容: PCA  (主成份分析)是一种直接的降维方法,通过求解特征值与特征向量,并选取特征值较大的一些特征向量来达到降 ...

  2. sql: 查找约束

    主键约束 SELECT   tab.name AS [表名],   idx.name AS [主键名称],   col.name AS [主键列名] FROM   sys.indexes idx    ...

  3. 【转】在Eclipse里查看Java字节码

    要理解 Java 字节码,比较推荐的方法是自己尝试编写源码对照字节码学习.其中阅读 Java 字节码的工具必不可少.虽然javap可以以可读的形式展示出.class 文件中字节码,但每次改动源码都需调 ...

  4. [前端]分享一个Bootstrap可视化布局的网站

    如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...

  5. HTTP请求响应报文&&相关状态码&&GET_POST请求方法 总结

    HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行   请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GE ...

  6. [Perl]抓取个人的所有闪存+格式化保存为文本

    以下代码保存为utf8文本格式 环境:ActivePerl v5.16 built for MSWin32-x86 两个要调整的地方: for my $i (17..45) {  这里改成自己对应的页 ...

  7. 面向对象的JavaScript(2):类

    在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScript ...

  8. UnityShader快速上手指南(一)

    简介 引言 其实网上有很多shader教程,但是大概看了下,也不知是网上各位大神已经脱离了代码层面的高度还是啥原因.貌似没有找到从代码方面作为入门讲解的,导致了shader对于苦逼程序员入门有一定要求 ...

  9. 设计模式--原型(Prototype)模式

    写这些也许有人认为“为了模式而模式”.Insus.NET所想到的,每个大师成为大师之前,也许都得这样做. 走路,从小就开始学,直至现在,谁还不是为了走路而走路?一直重复着...... 很多人没有分享自 ...

  10. jQquery.validate自定义规则的使用案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...