Android 酷炫WheelView,日期时间选择控件

开篇

  花了点时间亲手撸了一个酷炫高质量的滚轮控件WheelView开源。扫描文中的二维码下载体验App。希望童鞋们能喜欢!

WheelView

性能盘点:

  • 1、绘制优化(绘制条数 = 显示条数 + 2,不会过多绘制)
  • 2、支持各种数据类型(数据类型实现IWheel接口)
  • 3、支持点击选中
  • 4、封装了多列底部弹窗
  • 5、封装了日期时间选择底部弹出

效果截屏

wheel_view
column_dialog
date_time_dialog

立即体验

扫描以下二维码下载体验App(体验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;
    }
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上给一颗星星✨支持下。谢谢!如果在使用过程中不懂(或需要改进的地方),可以在评论里给我留言,也可以联系我。
微信:eoy9527QQ:1006368252
平时可能很少登录QQ。

篇尾

有所作为是生活的最高境界。 —— 恩格斯

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,813评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,824评论 2 59
  • 很久没有写东西了,感觉卡在瓶颈太久,却也始终找不到突破的方法,只浑浑噩噩地勉强过活着,每天淹没在繁杂的事物当中,做...
    唐泫然阅读 358评论 0 2
  • 所有的光芒,都需要时间才能被看到。今天是感恩节,我想对你说,谢谢你出现在我身边! [抱拳]
    如意M阅读 548评论 0 0
  • 2017年7月16日 阵雨 星期日 昨晚睡觉时腿肚子又抽筋了,也不知道是缺钙的原因,还是别的什么?一阵...
    苏桐妈妈阅读 368评论 6 15