阅读 3807

Android项目总结(二)仿IOS效果的日期选择器和省市县三级联动

离第一篇项目总结《Android 项目总结(1)- 之弧形ViewPager 和弧形HeaderView》过了一周多的时间了,趁今天周末有时间为大家带来第二篇:项目中用到的选择器。

一、需求

在我们的开发过程中,可能会遇到这样的需求:给定用户几个选项或者让用户从某个范围内选择需要的值,而不需要用户自己去手动输入。典型的场景如:电商APP的收货地址,用户选择省市县。填写生日的时候,用户选择年月日,或者其他一些数值得选择等等。正好最近项目中有类似的功能,因此在此总结记录总结一下。

项目中用到的几个场景:

1,年月日的选择

2,省市区三级联动

3,时间选择

4,数值选择

二、选择器PickerView

如果你需要一个时间选择器或者省市县三级联动的控件,随便一google ,出来一大把,但是正真能用好用的不多,今天就为大家推荐一个所用到的开源控件Android-PikerView, 它基本上能满足你项目中所有的选择:年月日时间选择、二级联动、三级联动、在给定列表中选择等。

Github 地址:github.com/Bigkoo/Andr…

有如下功能:

  • 支持三级联动
  • 设置是否联动
  • 设置循环模式
  • 支持自定义布局。
  • 支持item的分隔线设置。
  • 支持item间距设置。
  • 时间选择器支持起始和终止日期设定。
  • 支持“年,月,日,时,分,秒”,“省,市,区”等选项的单位(label)显示、隐藏和自定义。
  • 支持自定义文字、颜色、文字大小等属性
  • Item的文字长度过长时,文字会自适应缩放到Item的长度,避免显示不完全的问题
  • 支持Dialog 模式。
  • 支持自定义设置容器。

PickerView 中有两种选择器:

  • 选择时间和日期的选择器:TimePickerView
  • 选择给定范围或者给定选项的选择器、二级和三级联动的选择器:OptionsPickerView

使用很简单,采用构造器模式,可配置项很多,可以根据自己的需求来配置,如下:

 pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
            @Override
            public void onTimeSelect(Date date,View v) {//选中事件回调
                tvTime.setText(getTime(date));
            }
        })
                .setType(new boolean[]{true, true, true, true, true, true})// 默认全部显示
                .setCancelText("Cancel")//取消按钮文字
                .setSubmitText("Sure")//确认按钮文字
                .setContentSize(18)//滚轮文字大小
                .setTitleSize(20)//标题文字大小
                .setTitleText("Title")//标题文字
                .setOutSideCancelable(false)//点击屏幕,点在控件外部范围时,是否取消显示
                .isCyclic(true)//是否循环滚动
                .setTitleColor(Color.BLACK)//标题文字颜色
                .setSubmitColor(Color.BLUE)//确定按钮文字颜色
                .setCancelColor(Color.BLUE)//取消按钮文字颜色
                .setTitleBgColor(0xFF666666)//标题背景颜色 Night mode
                .setBgColor(0xFF333333)//滚轮背景颜色 Night mode
                .setDate(selectedDate)// 如果不设置的话,默认是系统时间*/
                .setRangDate(startDate,endDate)//起始终止年月日设定
                .setLabel("年","月","日","时","分","秒")//默认设置为年月日时分秒
                .isCenterLabel(false) //是否只显示中间选中项的label文字,false则每项item全部都带有label。
                .isDialog(true)//是否显示为对话框样式
                .build();复制代码

三、项目实践

1,年月日的选择

代码如下:

 TimePickerView pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
            @Override
            public void onTimeSelect(Date date, View v) {
                Calendar calendar = Calendar.getInstance();
                calendar.setTime(date);
                mTextViewYear.setText(calendar.get(Calendar.YEAR) + "");
                mTextViewMonth.setText(calendar.get(Calendar.MONTH) + 1 + "");// 月份比实际的月份少1个月
                mTextViewDay.setText(calendar.get(Calendar.DAY_OF_MONTH) + "");

                mBirthday = DateUtils.getDateString(date);
                Log.e("TAG", "birth:" + mBirthday);
            }

        })
                .isCenterLabel(false)
                .setType(new boolean[]{true, true, true, false, false, false})
                .setDate(selectedDate)
                .setRangDate(startDate, endDate)
                .setTitleText("出生")
                .setBgColor(Color.parseColor("#F6F7F6"))
                .setTitleSize(getResources().getColor(R.color.text_color_333))
                .setSubmitColor(getResources().getColor(R.color.text_color_main))
                .setCancelColor(getResources().getColor(R.color.text_color_999))
                .build();

        pvTime.show();复制代码

效果如下:

year_select
year_select

TimePickerView可以选择开始日期、结束日期和弹出来时候默认选择的日期,很方便。

2 ,省市县三级联动

代码如下:

 private void showPickerView() {// 弹出选择器

        OptionsPickerView pvOptions = new OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int options2, int options3, View v) {
                //返回的分别是三个级别的选中位置
                mProvince = mProvinceBean.options1Items.get(options1).getPickerViewText();
                mCity = mProvinceBean.options2Items.get(options1).get(options2);
                mArea = mProvinceBean.options3Items.get(options1).get(options2).get(options3);

                setProvinceText();

            }
        })

                .setTitleText("城市选择")
                .setDividerColor(Color.GRAY)
                .setTextColorCenter(Color.BLACK) //设置选中项文字颜色
                .setContentTextSize(20)
                .setBgColor(Color.parseColor("#F6F7F6"))
                .setTitleSize(getResources().getColor(R.color.text_color_333))
                .setSubmitColor(getResources().getColor(R.color.text_color_main))
                .setCancelColor(getResources().getColor(R.color.text_color_999))
                .build();

        pvOptions.setPicker(mProvinceBean.options1Items, mProvinceBean.options2Items, mProvinceBean.options3Items);//三级选择器
        pvOptions.show();
    }复制代码

效果如下:

province_select3
province_select3

3,时间选择

代码如下:

 protected void showTimePicker(TimePickerView.OnTimeSelectListener listener) {
        if (mTimePicker != null) {
            mTimePicker.show();
            return;
        }
        Calendar selectedDate = Calendar.getInstance();
        Calendar startDate = Calendar.getInstance();
        Calendar endDate = Calendar.getInstance();
        //正确设置方式 原因:注意事项有说明
        selectedDate.set(1990, 0, 1);
        startDate.set(1949, 0, 1);
        // 获取当前的年、月、日
        endDate.setTimeInMillis(System.currentTimeMillis());
        mTimePicker = new TimePickerView.Builder(this, listener)
                .isCenterLabel(false)
                .setType(new boolean[]{false, false, false, true, true, false})
                .setDate(selectedDate)
                .setRangDate(startDate, endDate)
                .setTitleText("测量时间")
                .setBgColor(Color.parseColor("#F6F7F6"))
                .setTitleSize(getResources().getColor(R.color.text_color_333))
                .setSubmitColor(getResources().getColor(R.color.text_color_main))
                .setCancelColor(getResources().getColor(R.color.text_color_999))
                .build();
        mTimePicker.show();

    }复制代码

效果如下:

time_select
time_select

4, 数值选择

代码如下:

 mOptionsPickerView = createHighBasePicker(title, new OptionsPickerView.OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int options2, int options3, View v) {
                mBsValue = datas.get(options1).bs;
                mItemBloodSugar.setContent(mBsValue + "");
                mStatusView.setBSValue(mBsValue);
            }
        });
        mOptionsPickerView.setPicker(datas);
        mOptionsPickerView.show();


//createHighBasePicker 方法如下:
  protected OptionsPickerView createHighBasePicker(String title, OptionsPickerView.OnOptionsSelectListener listener) {
        OptionsPickerView picker = new OptionsPickerView.Builder(this, listener)
                .setTitleText(title)
                .setBgColor(Color.parseColor("#F6F7F6"))
                .setTitleSize(getResources().getColor(R.color.text_color_333))
                .setSubmitColor(getResources().getColor(R.color.text_color_main))
                .setCancelColor(getResources().getColor(R.color.text_color_999))
                .build();
        return picker;
    }复制代码

效果如下:

value_select
value_select

三、总结

以上就是项目中用到的几种场景,当然了,功能还不止于此,还有一些二级联动和自定义样式的功能没有演示,需要的同学可以去Github 主页看相关介绍,或者去Demo里面查看各种选择器的用法。总的来说是一个很不错的开源项目,接近6k star。有需要的同学快去试一下吧!

更多干货文章,关注公众号:

Android技术杂货铺.jpg
Android技术杂货铺.jpg

文章分类
Android