开篇
花了点时间亲手撸了一个酷炫高质量的滚轮控件WheelView
开源。扫描文中的二维码下载体验App。希望童鞋们能喜欢!
WheelView
性能盘点:
- 1、绘制优化(绘制条数 = 显示条数 + 2,不会过多绘制)
- 2、支持各种数据类型(数据类型实现IWheel接口)
- 3、支持点击选中
- 4、封装了多列底部弹窗
- 5、封装了日期时间选择底部弹出
效果截屏
立即体验
扫描以下二维码下载体验App(体验App内嵌版本更新检测功能):
WheelViewLibrary传送门:https://github.com/JustinRoom/WheelViewDemo
简析源码
本篇就不做源码分析了
gradle引用
compile 'jsc.kit.wheel:wheel-view:_latestVersion'
属性
名称 | 类型 | 描述 |
---|---|---|
wheelTextColor |
color | 选中item字体颜色 |
wheelTextSize |
dimension | 字体大小 |
wheelShowCount |
integer | 显示item条数,与wheelItemVerticalSpace 决定了控件的高度 |
wheelTotalOffsetX |
dimension | X轴方向总弯曲度,决定弧形效果 |
wheelItemVerticalSpace |
dimension | 两个item之间的间距,与wheelShowCount 决定了控件的高度 |
wheelRotationX |
float | 已X轴为轴心旋转角度,决定3D效果 |
wheelVelocityUnits |
integer | 自动翻滚速度单位 |
名称 | 类型 | 描述 |
---|---|---|
wheelMaskLineColor |
color | 中间选中item的两条分割线颜色 |
子View | 类型 | 属性 |
---|---|---|
wheelView |
WheelView | WheelView所有属性 |
wheelMaskView |
WheelMaskView | WheelMaskView所有属性 |
使用示例
组件 | 使用示例 |
---|---|
WheelView | WheelViewFragment |
ColumnWheelDialog | ColumnWheelFragment |
DateTimeWheelDialog | DateTimeWheelFragment |
<jsc.kit.wheel.base.WheelItemView
android:id="@+id/wheel_view_left"
android:layout_width="160dp"
android:layout_height="wrap_content"
app:wheelItemVerticalSpace="12dp"
app:wheelTotalOffsetX="12dp" />
<jsc.kit.wheel.base.WheelView
android:id="@+id/wheel_view_left"
android:layout_width="160dp"
android:layout_height="wrap_content"
app:wheelItemVerticalSpace="12dp"
app:wheelTotalOffsetX="-12dp" />
- 2、 ColumnWheelDialog
多列互不关联底部弹窗,最多支持5列。相应的列有数据则显示,无数据则不显示。
private ColumnWheelDialog showDialog() {
ColumnWheelDialog<WheelItem, WheelItem, WheelItem, WheelItem, WheelItem> dialog = new ColumnWheelDialog<>(getActivity());
dialog.show();
dialog.setTitle("选择菜单");
dialog.setCancelButton("取消", null);
dialog.setOKButton("确定", new ColumnWheelDialog.OnClickCallBack<WheelItem, WheelItem, WheelItem, WheelItem, WheelItem>() {
@Override
public boolean callBack(View v, @Nullable WheelItem item0, @Nullable WheelItem item1, @Nullable WheelItem item2, @Nullable WheelItem item3, @Nullable WheelItem item4) {
return false;
}
});
dialog.setItems(
initItems("菜单选项一"),
initItems("菜单选项二"),
initItems("菜单选项三"),
initItems("菜单选项四"),
initItems("菜单选项五")
);
dialog.setSelected(
new Random().nextInt(50),
new Random().nextInt(50),
new Random().nextInt(50),
new Random().nextInt(50),
new Random().nextInt(50)
);
private WheelItem[] initItems(String label) {
final WheelItem[] items = new WheelItem[50];
for (int i = 0; i < 50; i++) {
items[i] = new WheelItem(label + (i < 10 ? "0" + i : "" + i));
}
return items;
}
- 3、DateTimeWheelDialog
日期时间选择底部弹窗,最多支持到分钟。
private DateTimeWheelDialog showDialog(int type) {
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.YEAR, 2015);
calendar.set(Calendar.MONTH, 0);
calendar.set(Calendar.DAY_OF_MONTH, 1);
calendar.set(Calendar.HOUR_OF_DAY, 0);
calendar.set(Calendar.MINUTE, 0);
Date startDate = calendar.getTime();
calendar = Calendar.getInstance();
calendar.set(Calendar.YEAR, 2020);
Date endDate = calendar.getTime();
DateTimeWheelDialog dialog = new DateTimeWheelDialog(getActivity());
dialog.show();
dialog.setTitle("选择时间");
int config = DateTimeWheelDialog.SHOW_YEAR_MONTH_DAY_HOUR_MINUTE;
switch (type) {
case 1://只显示年
config = DateTimeWheelDialog.SHOW_YEAR;
break;
case 2://显示年、月
config = DateTimeWheelDialog.SHOW_YEAR_MONTH;
break;
case 3://显示年、月、日
config = DateTimeWheelDialog.SHOW_YEAR_MONTH_DAY;
break;
case 4://显示年、月、日、时
config = DateTimeWheelDialog.SHOW_YEAR_MONTH_DAY_HOUR;
break;
case 5://显示年、月、日、时、分
config = DateTimeWheelDialog.SHOW_YEAR_MONTH_DAY_HOUR_MINUTE;
break;
}
dialog.configShowUI(config);
dialog.setCancelButton("取消", null);
dialog.setOKButton("确定", new DateTimeWheelDialog.OnClickCallBack() {
@Override
public boolean callBack(View v, @NonNull Date selectedDate) {
tvResult.setText(SimpleDateFormat.getInstance().format(selectedDate));
return false;
}
});
dialog.setDateArea(startDate, endDate, true);
dialog.updateSelectedDate(new Date());
}
使用介绍就到这里。
从0撸出这个开源库不容易,希望童鞋们在GitHub上给一颗星星✨支持下。谢谢!如果在使用过程中不懂(或需要改进的地方),可以在评论里给我留言,也可以联系我。
微信:eoy9527
、QQ:1006368252
。
平时可能很少登录QQ。
篇尾
有所作为是生活的最高境界。 —— 恩格斯