Android之时间选择器 PickerView使用

蔚落 2022-02-24 09:18 1087阅读 0赞

### 一.介绍 ###

这是一款仿iOS的PickerView控件，有时间选择器和选项选择器，新版本的详细特性如下：

*  TimePickerView 时间选择器，支持年月日时分，年月日，年月，时分等格式。
 *  OptionsPickerView 选项选择器，支持一，二，三级选项选择，并且可以设置是否联动 。

1.  支持三级联动
2.  设置是否联动
3.  设置循环模式
4.  支持自定义布局。
5.  支持item的分隔线设置。
6.  支持item间距设置。
7.  时间选择器支持起始和终止日期设定。
8.  支持“年，月，日，时，分，秒”，“省，市，区”等选项的单位（label）显示、隐藏和自定义。
9.  支持自定义文字、颜色、文字大小等属性
10. Item的文字长度过长时，文字会自适应缩放到Item的长度，避免显示不完全的问题
11. 支持Dialog 模式。
12. 支持自定义设置容器。
13. 实时回调。

github地址: [https://github.com/Bigkoo/Android-PickerView][https_github.com_Bigkoo_Android-PickerView]

### 二.效果图 ###

![image][]  
![image][image 1]  
![image][image 2]  
![image][image 3]  
![image][image 4]  
![image][image 5]

### 三.开始使用 ###

##### 1.添加Jcenter仓库 Gradle依赖： #####

compile 'com.contrarywind:Android-PickerView:4.1.7'

##### 2.在Activity中添加如下代码： #####

默认的时间选择器

TimePickerView pvTime = new TimePickerView(this, new TimePickerView.OnTimeSelectListener() {
                @Override
                public void onTimeSelect(Date date,View v) {//选中事件回调
                    tvTime.setText(getTime(date));
                }
            })
                 .build();
     pvTime.setDate(Calendar.getInstance());//注：根据需求来决定是否使用该方法（一般是精确到秒的情况），此项可以在弹出选择器的时候重新设置当前时间，避免在初始化之后由于时间已经设定，导致选中时间与当前时间不匹配的问题。
     pvTime.show();

例子 选择出生年月日

private void initTimePicker1() {//选择出生年月日
            //控制时间范围(如果不设置范围，则使用默认时间1900-2100年，此段代码可注释)
            //因为系统Calendar的月份是从0-11的,所以如果是调用Calendar的set方法来设置时间,月份的范围也要是从0-11
            Date curDate = new Date(System.currentTimeMillis());//获取当前时间
            SimpleDateFormat formatter_year = new SimpleDateFormat("yyyy ");
            String year_str = formatter_year.format(curDate);
            int year_int = (int) Double.parseDouble(year_str);
     
     
            SimpleDateFormat formatter_mouth = new SimpleDateFormat("MM ");
            String mouth_str = formatter_mouth.format(curDate);
            int mouth_int = (int) Double.parseDouble(mouth_str);
     
            SimpleDateFormat formatter_day = new SimpleDateFormat("dd ");
            String day_str = formatter_day.format(curDate);
            int day_int = (int) Double.parseDouble(day_str);
     
     
            Calendar selectedDate = Calendar.getInstance();//系统当前时间
            Calendar startDate = Calendar.getInstance();
            startDate.set(1900, 0, 1);
            Calendar endDate = Calendar.getInstance();
            endDate.set(year_int, mouth_int - 1, day_int);
     
            //时间选择器
            pvTime1 = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
                @Override
                public void onTimeSelect(Date date, View v) {//选中事件回调
                    // 这里回调过来的v,就是show()方法里面所添加的 View 参数，如果show的时候没有添加参数，v则为null
                    /*btn_Time.setText(getTime(date));*/
     
                    textview1.setText(getTime(date));
                }
            })
     
                    .setType(new boolean[]{true, true, true, false, false, false}) //年月日时分秒 的显示与否，不设置则默认全部显示
                    .setLabel("年", "月", "日", "", "", "")//默认设置为年月日时分秒
                    .isCenterLabel(false)
                    .setDividerColor(Color.RED)
                     .setTextColorCenter(Color.RED)//设置选中项的颜色
                    .setTextColorOut(Color.BLUE)//设置没有被选中项的颜色
                    .setContentSize(21)
                    .setDate(selectedDate)
                    .setLineSpacingMultiplier(1.2f)
                    .setTextXOffset(-10, 0,10, 0, 0, 0)//设置X轴倾斜角度[ -90 , 90°]
                    .setRangDate(startDate, endDate)
    //                .setBackgroundId(0x00FFFFFF) //设置外部遮罩颜色
                    .setDecorView(null)
                    .build();
        }
     
        private String getTime(Date date) {//可根据需要自行截取数据显示
    //        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
            return format.format(date);
        }

##### 3.自定义布局 #####

private void initCustomOptionPicker() {//条件选择器初始化，自定义布局
        /**
         * @description
         *
         * 注意事项：
         * 自定义布局中，id为 optionspicker 或者 timepicker 的布局以及其子控件必须要有，否则会报空指针。
         * 具体可参考demo 里面的两个自定义layout布局。
         */
        pvCustomOptions = new OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int option2, int options3, View v) {
                //返回的分别是三个级别的选中位置
                String tx = cardItem.get(options1).getPickerViewText();
                btn_CustomOptions.setText(tx);
            }
        })
                .setLayoutRes(R.layout.pickerview_custom_options, new CustomListener() {
                    @Override
                    public void customLayout(View v) {
                        final TextView tvSubmit = (TextView) v.findViewById(R.id.tv_finish);
                        final TextView tvAdd = (TextView) v.findViewById(R.id.tv_add);
                        ImageView ivCancel = (ImageView) v.findViewById(R.id.iv_cancel);
                        tvSubmit.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                pvCustomOptions.returnData();
                                pvCustomOptions.dismiss();
                            }
                        });
     
                        ivCancel.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                pvCustomOptions.dismiss();
                            }
                        });
     
                        tvAdd.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                getCardData();
                                pvCustomOptions.setPicker(cardItem);
                            }
                        });
     
                    }
                })
                .isDialog(true)
                .build();
     
        pvCustomOptions.setPicker(cardItem);//添加数据
     }

##### 4.三级联动 #####

pvOptions = new OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
        @Override
        public void onOptionsSelect(int options1, int options2, int options3, View v) {
            //返回的分别是三个级别的选中位置
            String tx = options1Items.get(options1).getPickerViewText()
                    + options2Items.get(options1).get(options2)
                   /* + options3Items.get(options1).get(options2).get(options3).getPickerViewText()*/;
            btn_Options.setText(tx);
        }
    })
            .setTitleText("城市选择")
            .setContentTextSize(20)//设置滚轮文字大小
            .setDividerColor(Color.LTGRAY)//设置分割线的颜色
            .setSelectOptions(0, 1)//默认选中项
            .setBgColor(Color.BLACK)
            .setTitleBgColor(Color.DKGRAY)
            .setTitleColor(Color.LTGRAY)
            .setCancelColor(Color.YELLOW)
            .setSubmitColor(Color.YELLOW)
            .setTextColorCenter(Color.LTGRAY)
            .isCenterLabel(false) //是否只显示中间选中项的label文字，false则每项item全部都带有label。
            .setLabels("省", "市", "区")
            .setBackgroundId(0x66000000) //设置外部遮罩颜色
            .build();
     
    //pvOptions.setSelectOptions(1,1);
    /*pvOptions.setPicker(options1Items);//一级选择器*/
    pvOptions.setPicker(options1Items, options2Items);//二级选择器
    /*pvOptions.setPicker(options1Items, options2Items,options3Items);//三级选择器*/

### 四.属性介绍 ###

时间选择器的属性大全

.setType(new boolean[]{true, true, true, false, false, false}) //年月日时分秒 的显示与否，不设置则默认全部显示
    .setLabel("年", "月", "日", "", "", "")//默认设置为年月日时分秒
    .setSubmitText("确定")//确定按钮文字
    .setCancelText("取消")//取消按钮文字
    .setTitleText("请选择")//标题
    .setSubCalSize(18)//确定和取消文字大小
    .setTitleSize(20)//标题文字大小
    .setTitleColor(Color.GREEN)//标题文字颜色
    .setSubmitColor(Color.GREEN)//确定按钮文字颜色
    .setCancelColor(Color.GREEN)//取消按钮文字颜色
    .setTitleBgColor(0xFF333333)//标题背景颜色 Night mode
    .setBgColor(0xFF000000)//滚轮背景颜色 Night mode
    .setOutSideCancelable(false)//点击屏幕，点在控件外部范围时，是否取消显示
    .isCyclic(false)//是否循环滚动
    .isCenterLabel(false) //是否只显示中间选中项的label文字，false则每项item全部都带有label。
    .setDividerColor(Color.YELLOW)//设置分割线的颜色
    .setTextColorCenter(Color.RED)//设置选中项的颜色
    .setTextColorOut(Color.BLUE)//设置没有被选中项的颜色
    .setContentSize(21)//滚轮文字大小
    .setDate(selectedDate) 如果不设置的话，默认是系统时间*/
    .setLineSpacingMultiplier(1.2f)//设置两横线之间的间隔倍数
    .setTextXOffset(-10, 0, 10, 0, 0, 0)//设置X轴倾斜角度[ -90 , 90°]
    .setRangDate(startDate, endDate)起始终止年月日设定
    .setBackgroundId(0x00FFFFFF) //设置外部遮罩颜色
    .setDecorView(null)//设置要将pickerview显示到的容器id 必须是viewgroup
    .isDialog(false)//是否显示为对话框样式

[https_github.com_Bigkoo_Android-PickerView]: https://github.com/Bigkoo/Android-PickerView
[image]: https://github.com/Bigkoo/Android-PickerView/raw/master/preview/timepicker.gif
[image 1]: https://github.com/Bigkoo/Android-PickerView/raw/master/preview/timepicker_night.gif
[image 2]: https://github.com/Bigkoo/Android-PickerView/raw/master/preview/lunar.gif
[image 3]: /images/20220224/ea7a8b109fa8411d8f1d69d438a857fa.png
[image 4]: https://github.com/Bigkoo/Android-PickerView/raw/master/preview/JsonData.gif
[image 5]: /images/20220224/c6dae8f5c1804623bb9f17e8e1764a12.png