Introduction and use of Android-PickerView series (1)

Disclaimer: This article is an original article by the blogger, please indicate the source for reprinting: Xiaosong's blog

1. Introduction

Android-PickerView is an iOS-like PickerView control that encapsulates two selectors, time selection and option selection. The detailed features are as follows:

WheelView - basic controls

  • With 3D arc effect.
  • Support text, color, size settings.
  • Support background color setting.
  • Supports item's divider setting.
  • Support item spacing setting.
  • Supports setting whether to cycle.

OptionsPickerView - option picker

  • Support first, second and third level linkage data.
  • Support one, two, three unlinked data.
  • Support custom layout.
  • Support custom title bar.
  • Display, hide and customize the unit (label) that supports options such as "province, city, district".
  • Support dialog mode display.
  • Support for custom settings container.

TimePickerView - Time Picker

  • Supports selecting the range of year, month, and day.
  • Support year, month, day, hour, minute and second display.
  • Supports setting the current default time.
  • Support custom layout.
  • Support custom title bar.
  • Display, hide and customize the unit (label) of options such as "year, month, day, hour, minute, second".
  • Support dialog mode display.
  • Support for custom settings container.

Among them, WheelView can be directly referenced in the XML layout:

<com.bigkoo.pickerview.lib.WheelView
            android:id="@+id/wv_options"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  • 1
  • 2
  • 3
  • 4

TimePickerView - time picker, supports the format of year, month, day, hour, year, month, day, year, month, hour, etc. The effect is as follows:

TimePicker.gif 

OptionsPickerView - option selector, supports first, second and third level option selection, and can set whether to link, the effect is as follows:



OptionsPicker.gif


2. Use


1. Add the Jcenter repository Gradle dependency:

compile 'com.contrarywind:Android-PickerView:3.x'
//注:实际引入请把"3.x"替换成具体版本号,最新版本号请以GitHub上面提供的为准
  • 1
  • 2

  GitHub's official project address

2. Add the following code to your Activity:

//时间选择器
 pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
            @Override
            public void onTimeSelect(Date date,View v) {//选中事件回调
                tvTime.setText(getTime(date));
            }
        })
             .build();
 pvTime.show();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

or

//条件选择器
 pvOptions = new  OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int option2, int options3 ,View v) {
                //返回的分别是三个级别的选中位置
                String tx = options1Items.get(options1).getPickerViewText()
                        + options2Items.get(options1).get(option2)
                        + options3Items.get(options1).get(option2).get(options3).getPickerViewText();
                tvOptions.setText(tx);
            }
        }).build();
 pvOptions.setPicker(options1Items, options2Items, options3Items);
 pvOptions.show(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

  The function can be realized in two simple steps. It's that simple~ If the default style does not meet your taste, please continue to read~


3. Custom style

pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
            @Override
            public void onTimeSelect(Date date,View v) {//选中事件回调
                tvTime.setText(getTime(date));
            }
        })
                .setType(TimePickerView.Type.ALL)//默认全部显示
                .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
                .setRange(calendar.get(Calendar.YEAR) - 20, calendar.get(Calendar.YEAR) + 20)//默认是1900-2100年
                .setDate(new Date())// 默认是系统时间*/
                .setLabel("年","月","日","时","分","秒")
                .build();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
pvOptions = new  OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int option2, int options3 ,View v) {
                //返回的分别是三个级别的选中位置
                String tx = options1Items.get(options1).getPickerViewText()
                        + options2Items.get(options1).get(option2)
                        + options3Items.get(options1).get(option2).get(options3).getPickerViewText();
                tvOptions.setText(tx);
            }
        })
                .setSubmitText("确定")//确定按钮文字
                .setCancelText("取消")//取消按钮文字
                .setTitleText("城市选择")//标题
                .setSubCalSize(18)//确定和取消文字大小
                .setTitleSize(20)//标题文字大小
                .setTitleColor(Color.BLACK)//标题文字颜色
                .setSubmitColor(Color.BLUE)//确定按钮文字颜色
                .setCancelColor(Color.BLUE)//取消按钮文字颜色
                .setTitleBgColor(0xFF333333)//标题背景颜色 Night mode
                .setBgColor(0xFF000000)//滚轮背景颜色 Night mode
                .setContentTextSize(18)//滚轮文字大小
                .setLinkage(false)//设置是否联动,默认true
                .setLabels("省", "市", "区")//设置选择的三级单位
                .setCyclic(false, false, false)//循环与否
                .setSelectOptions(1, 1, 1)  //设置默认选中项
                .setOutSideCancelable(false)//点击外部dismiss default true
                .build();

        pvOptions.setPicker(options1Items, options2Items, options3Items);//添加数据源
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

4. More

  1. If you have any questions about the use of the above, you can refer to the demo code, please click me to view the demo code

  2. 如果还是不能满足你产品经理的需求,那么~ 默哀三秒钟… 然后把源代码下载下来自己做改动吧,源代码基本都写了注释了,我也只能帮到这儿了。Github项目地址:Android-PickerView

  3. 关于方法名和参数的详细说明,请参考Wiki:请戳我查看Wiki文档,欢迎提issue,提建议,Pull Request. 
      

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326394410&siteId=291194637