https://github.com/Bigkoo/Android-PickerView
This is an iOS-like PickerView control with a time selector and an option selector. The detailed features of the new version are as follows:
——TimePickerView time picker, supports year, month, day, hour, year, month, day, year, month, hour, and other formats.
——OptionsPickerView option selector, supports one, two and three levels of option selection, and can set whether to link.
- Support three levels of linkage
- Set whether to link
- Set loop mode
- Support custom layout.
- Support item divider setting.
- Support item spacing setting.
- The time selector supports the start and end date setting.
- Support "year, month, day, hour, minute, second", "province, city, district" and other options of unit (label) display, hide and customize.
- Support custom text, color, text size and other attributes
- When the item text length is too long, the text will be adaptively scaled to the item length to avoid the problem of incomplete display
- Support Dialog mode.
- Support custom setting container.
- Real-time callback.
If you are interested in studying the implementation mechanism of the 3D scroll wheel effect, you can read this blog if you want to study the source code thoroughly:
Source code analysis of Android-PickerView series (two)
Precautions for use
- Note: When we set the starting position of the time, we need to pay special attention to the setting of the month
- Reason: The month in the Calendar component starts from 0, that is, 0-11 represents 1-12 months
- Wrong use case: startDate.set(2013,1,1); endDate.set(2020,12,1);
- Correct use case: startDate.set(2013,0,1); endDate.set(2020,11,1);
V4.1.9 version update instructions (2019-10-20)
- Fix: The problem of occasionally crossing the boundary on lunar day.
- Optimization: Display the default capitalization problem in both Chinese and English.
- New: The maximum number of visible items provides API for developers to set. (setItemVisibleCount())
- Newly added: The scroll wheel has a gradient of transparency from the middle to both sides, and provides a switch API setting. (IsAlphaGradient(true))
- New: The circular dividing line style of the selected item. (DividerType.CIRCLE)
V4.1.8 version update instructions (2019-4-24)
- Update the gradle version, the wheelview base library is changed from compile to api dependency to avoid the inability to introduce gradle 5.0+.
- Fix the setTextXOffset assignment problem.
V4.1.7 version update instructions (2019-1-10)
- Fixed the problem that when WheelView was initialized, the data was empty and height=0, which caused it to not be displayed.
- Added the click event monitoring entry of the cancel button.
- Added parameter annotations to standardize data types.
- The setBackgroundId method is discarded and the update method is named setOutSideColor.
For more historical version details, please refer to: update log (version 4.x)
Method name and parameters please refer to: method name and parameter description document
how to use:
Android-PickerView library usage example:
1. Add Jcenter warehouse Gradle dependency:
compile 'com.contrarywind:Android-PickerView:4.1.9'
or
Maven
<dependency>
<groupId>com.contrarywind</groupId>
<artifactId>Android-PickerView</artifactId>
<version>4.1.9</version>
<type>pom</type>
</dependency>
2. Add the following code to the project:
//时间选择器
TimePickerView pvTime = new TimePickerBuilder(MainActivity.this, new OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date, View v) {
Toast.makeText(MainActivity.this, getTime(date), Toast.LENGTH_SHORT).show();
}
}).build();
//Conditional selector
OptionsPickerView pvOptions = new OptionsPickerBuilder(MainActivity.this, new OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int option2, int options3 ,View v) {
//Returned are three levels of selection Location
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();
That's it~
3. If the default style does not meet your taste, you can customize various attributes:
Calendar selectedDate = Calendar.getInstance();
Calendar startDate = Calendar.getInstance();
//startDate.set(2013,1,1);
Calendar endDate = Calendar.getInstance();
//endDate.set(2020,1, 1);
//Reason for the correct setting method: The precautions are explained
startDate.set(2013,0,1);
endDate.set(2020,11,31);
pvTime = new TimePickerBuilder(this, new OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date,View v) {//Select event callback
tvTime.setText(getTime(date));
}
})
.setType(new boolean[]{true, true, true, true, true, true}) // All display by default.
setCancelText("Cancel")//Cancel button text
setSubmitText("Sure")//Confirm button text
text.setContentSize(18)//Scroll wheel text
size.setTitleSize(20)//Title text
size.setTitleText("Title")//Title
text.setOutSideCancelable(false)// Click on the screen, when the point is outside the control, whether to cancel the
display.isCyclic(true)//Whether to scroll in a
loop.setTitleColor(Color.BLACK)//title text
color.setSubmitColor(Color.BLUE)//OK button text
color.setCancelColor (Color.BLUE)//Cancel button text color.
setTitleBgColor(0xFF666666)//Title background color Night mode
.setBgColor(0xFF333333)//Scroll wheel background color Night mode
.setDate(selectedDate)// If not set, the default is system Time*/
.setRangDate(startDate,endDate)//Set the start and end year, month and day
.setLabel("year","month","day","hour","minute","second")//The default setting is year, month, day, hour, minute and second.
.isCenterLabel(false) //Whether to display only the label text of the selected item in the middle, false means that each item has a label.
.isDialog(true)//Whether to display as a dialog
style.build();
pvOptions = new OptionsPickerBuilder(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);
}
}) .setOptionsSelectChangeListener(new OnOptionsSelectChangeListener() {
@Override
public void onOptionsSelectChanged(int options1, int options2, int options3) {
String str = "options1: "+ options1 + "\noptions2:" + options2 + "\noptions3: "+ options3;
Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
}
})
.setSubmitText("OK")//OK button
text.setCancelText("Cancel")//Cancel button
text.setTitleText("City selection")//
Title.setSubCalSize( 18)//Confirm and cancel text
size.setTitleSize(20)//Title text
size.setTitleColor(Color.BLACK)//Title text color
size.setSubmitColor(Color.BLUE)//OK button text color
.setCancelColor(Color.BLUE)//Cancel button text
color.setTitleBgColor(0xFF333333)//Title background color Night mode
.setBgColor(0xFF000000)//Scroll wheel background color Night mode
.setContentTextSize(18)//Scroll wheel text
size.setLinkage( false)//Set whether to link, the default is
true.setLabels("Province", "City", "District")//Set the selected three-level
unit.isCenterLabel(false) //Whether to display only the label text of the middle selected item, If false, each item has a label.
.setCyclic(false, false, false)//Cycle or not.
setSelectOptions(1, 1, 1) //Set the default selected item.
setOutSideCancelable(false)//Click the external dismiss default true
.isDialog(true)//Whether to display As dialog style
.isRestoreItem(true)//When switching Whether to restore, the first item is selected by default.
.build();
pvOptions.setPicker(options1Items, options2Items, options3Items);//Add data source
4. If you need to customize the layout:
// Note: In the custom layout, the layout with id of optionspicker or timepicker and its sub-controls must be present, otherwise it will report a null pointer.
// For details, please refer to the two custom layouts in the
demo pvCustomOptions = new OptionsPickerBuilder(this, new OptionsPickerView.OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int option2, int options3, View v) {
//Returned are three levels of selected positions
String tx = cardItem.get(options1).getPickerViewText() ;
btn_CustomOptions.setText(tx);
}
})
.setLayoutRes(R.layout.pickerview_custom_options, new CustomListener() {
@Override
public void customLayout(View v) {
//Control initialization and event handling in custom layout
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(tvSubmit);
}
});
ivCancel.setOnClickListener (new View.OnClickListener() {
@Override
public void onClick(View v) {
pvCustomOptions.dismiss();
}
});
tvAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getData();
pvCustomOptions.setPicker(cardItem);
}
});
}
})
.build();
pvCustomOptions.setPicker(cardItem);//添加数据
5. If you have any questions about usage, please refer to the demo code
Please poke me to view the demo code
6. If you only need the WheelView basic control to extend the implementation logic by itself, you can directly add the basic control library. Gradle depends on:
compile 'com.contrarywind: wheelview: 4.1.0'
WheelView use code example:
xml layout:
<com.contrarywind.view.WheelView
android:id="@+id/wheelview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Java code:
WheelView wheelView = findViewById(R.id.wheelview);
wheelView.setCyclic(false);
final List<String> mOptionsItems = new ArrayList<>();
mOptionsItems.add("item0");
mOptionsItems.add("item1");
mOptionsItems.add("item2");
wheelView.setAdapter(new ArrayWheelAdapter(mOptionsItems));
wheelView.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(int index) {
Toast.makeText(MainActivity.this, "" + mOptionsItems.get(index), Toast.LENGTH_SHORT).show();
}
});
Effect picture (the condition selector in "Handheld Life" of China Merchants Bank credit card, they use my library, you can refer to it for actual projects)
Thanks
- WheelView
- androidWheelView