支持多选的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控件
支持多选的Spinner控件的更多相关文章
- CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09)
事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便支持wpf的开发,同时,框架仍保留最低.net framework2.0 ...
- Spinner控件
首先在XML文件中声明一个Spinner控件: <Spinner android:id="@+id/spinnerId" android:layout_width=" ...
- Android spinner控件
spinner控件是Android中下拉控件,现在介绍它两种用法.第一种,从资源文件中获取下拉值:第二种,从代码中获取下拉值. 第一种,首先要在资源文件中把值写好: <?xml version= ...
- jasonTree多选多级树控件
jasonTree1.0 jasonTree多选多级树控件(名字是自己取),用于友好的展示树形结构的数据,并可以多选,传统的做法是在一个select的下拉框中显示一个可折叠的树结构,公司的需求人员这种 ...
- ProgressBar、RatingBar和Spinner控件
1.ProgressBar.SeekBar与RatingBar控件 ProgressBar控件,也就是我们通常的进度条控件,可以显示加载的进度等.SeekBar控件,滑块控件,可以根据用户的需要动态为 ...
- 大约Android PopupWindow有用Spinner控件点击APP Crash案例整理!
场景异常,如下面: android.view.WindowManager$BadTokenException: Unable to add window -- token android.view.V ...
- CYQ.Data 支持WPF相关的数据控件绑定.Net获取iis版本
CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09) 事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便 ...
- 支持Angular 2的表格控件
前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...
- android 学习 Spinner控件的使用
今晚看了下spinner控件的使用,结合博客大神的教程,一个小demo 一,SpinnerActivity private Spinner spinner; private ArrayAdapter& ...
随机推荐
- 【cs229-Lecture15】奇异值分解
PCA的实现一般有两种,一种是用特征值分解去实现的,一种是用奇异值分解去实现的. 内容: PCA (主成份分析)是一种直接的降维方法,通过求解特征值与特征向量,并选取特征值较大的一些特征向量来达到降 ...
- sql: 查找约束
主键约束 SELECT tab.name AS [表名], idx.name AS [主键名称], col.name AS [主键列名] FROM sys.indexes idx ...
- 【转】在Eclipse里查看Java字节码
要理解 Java 字节码,比较推荐的方法是自己尝试编写源码对照字节码学习.其中阅读 Java 字节码的工具必不可少.虽然javap可以以可读的形式展示出.class 文件中字节码,但每次改动源码都需调 ...
- [前端]分享一个Bootstrap可视化布局的网站
如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...
- HTTP请求响应报文&&相关状态码&&GET_POST请求方法 总结
HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行 请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GE ...
- [Perl]抓取个人的所有闪存+格式化保存为文本
以下代码保存为utf8文本格式 环境:ActivePerl v5.16 built for MSWin32-x86 两个要调整的地方: for my $i (17..45) { 这里改成自己对应的页 ...
- 面向对象的JavaScript(2):类
在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScript ...
- UnityShader快速上手指南(一)
简介 引言 其实网上有很多shader教程,但是大概看了下,也不知是网上各位大神已经脱离了代码层面的高度还是啥原因.貌似没有找到从代码方面作为入门讲解的,导致了shader对于苦逼程序员入门有一定要求 ...
- 设计模式--原型(Prototype)模式
写这些也许有人认为“为了模式而模式”.Insus.NET所想到的,每个大师成为大师之前,也许都得这样做. 走路,从小就开始学,直至现在,谁还不是为了走路而走路?一直重复着...... 很多人没有分享自 ...
- jQquery.validate自定义规则的使用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...