android 简单快速 实现滚轮控件WheelView(类似DatePicker/TimePicker)

github 地址:GitHub - Bigkoo/Android-PickerView: This is a picker view for android , support linkage effect, timepicker and optionspicker.(时间选择器、省市区三级联动)

https://github.com/Bigkoo/Android-PickerView

1.引用库

implementation 'com.contrarywind:Android-PickerView:4.1.9'

2. 实现逻辑

public class TimeSelectDialog {
    private Activity activity;
    private ViewGroup contentView;
    private View view;
    private WheelView wvHour;
    private WheelView wvMinute;
    private List<String> hourList;
    private List<String> minuteList;

    public TimeSelectDialog(Activity activity) {
        this.activity = activity;
        contentView = activity.findViewById(android.R.id.content);
        view = LayoutInflater.from(activity).inflate(R.layout.dialog_time_select, null);
         wvHour = view.findViewById(R.id.wv_hour);
         wvMinute = view.findViewById(R.id.wv_minute);
        TextView tvCancel = view.findViewById(R.id.tv_cancel);
        TextView tvSure = view.findViewById(R.id.tv_sure);
        tvCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
        tvSure.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });

        //第一种方式
        initHourWheelView();
        initMinuteWheelView();
        
        //第二种方式
        /*initTimePickerBuilder();*/
    }


    /**
     * 初始化时间选择器控件
     */
    private void initTimePickerBuilder() {
        Calendar startDate = Calendar.getInstance();
        Calendar endDate = Calendar.getInstance();

        //正确设置方式 原因:注意事项有说明
        startDate.set(startDate.get(Calendar.YEAR)-50,0,1);//-50往前推50年
        endDate.set(endDate.get(Calendar.YEAR)+50,11,31);//+50往后推50年
        TimePickerView tpv = new TimePickerBuilder(activity, new OnTimeSelectListener() {
            @Override
            public void onTimeSelect(Date date, View v) {
            }
        }).setDecorView(view.findViewById(R.id.ll_tpv_container))//设置父控件
                .isDialog(false)//非弹框模式
                .setItemVisibleCount(5)//显示5行
                .setDate(Calendar.getInstance())//当前时间
                .setRangDate(startDate,endDate)//起始终止年月日设定
                .build();
        //隐藏选择器上面的标题栏
        int topbarId = activity.getResources().getIdentifier("rv_topbar", "id", activity.getPackageName());
        tpv.findViewById(topbarId).setVisibility(View.GONE);
        tpv.show();//显示
    }

    /**
     * 小时
     */
    private void initHourWheelView() {
        hourList = new ArrayList<>();
        for (int i = 0; i < 24; i++) {
            hourList.add(i+"时");
        }

        ArrayWheelAdapter hourAdapter = new ArrayWheelAdapter(hourList);
        wvHour.setAdapter(hourAdapter);
        wvHour.setCyclic(true); //取消循环显示数据
        wvHour.setCurrentItem(0); //当前显示第一条
        wvHour.setItemsVisibleCount(5); //可见范围为5个
        wvHour.setOnItemSelectedListener(new OnItemSelectedListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onItemSelected(int index) {
            
            }
        });
    }

    /**
     * 分时
     */
    private void initMinuteWheelView() {
        minuteList = new ArrayList<>();
        for (int i = 0; i < 60; i++) {
            minuteList.add(i+"分");
        }

        ArrayWheelAdapter minuteAdapter = new ArrayWheelAdapter(minuteList);
        wvMinute.setAdapter(minuteAdapter);
        wvMinute.setCyclic(true); //取消循环显示数据
        wvMinute.setCurrentItem(0); //当前显示第一条
        wvMinute.setItemsVisibleCount(5); //可见范围为5个
        wvMinute.setOnItemSelectedListener(new OnItemSelectedListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onItemSelected(int index) {
               
            }
        });
    }

    /**
     * 显示dialog(包含动画)
     */
    public void show(OnDismissListener onDismissListener) {
        this.onDismissListener = onDismissListener;
        Animation animation = AnimationUtils.loadAnimation(activity, R.anim.dialog_user_gender_in_anim);
        view.setAnimation(animation);
        contentView.addView(view);
    }

    /**
     * 移除dialog(包含动画)
     */
    public void dismiss() {
        Animation animation = AnimationUtils.loadAnimation(activity, R.anim.dialog_user_gender_out_anim);
        view.setAnimation(animation);
        contentView.removeView(view);
        if (onDismissListener != null) {
            onDismissListener.onDismiss(null);
        }
    }

    private OnDismissListener onDismissListener;

    public void setOnDismissListener(OnDismissListener onDismissListener) {
        this.onDismissListener = onDismissListener;
    }

    public interface OnDismissListener {
        void onDismiss(String timeStr);
    }
}

 2.布局实现 dialog_time_select.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80000000">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:background="@android:color/white"
        android:paddingStart="40dp"
        android:paddingTop="20dp"
        android:paddingEnd="40dp"
        android:paddingBottom="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="30dp"
            android:text="自定义时间"
            android:textColor="@android:color/black"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <!-- 时间选择器父控件 -->
        <LinearLayout
            android:id="@+id/ll_tpv_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@android:color/white"
            android:orientation="horizontal"
            android:paddingTop="30dp">

            <com.contrarywind.view.WheelView
                android:id="@+id/wv_hour"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <com.contrarywind.view.WheelView
                android:id="@+id/wv_minute"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:gravity="center"
                android:paddingStart="60dp"
                android:paddingTop="15dp"
                android:paddingEnd="60dp"
                android:paddingBottom="15dp"
                android:background="@android:color/darker_gray"
                android:text="关闭"
                android:textColor="#ffb300"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/tv_sure"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingStart="60dp"
                android:paddingTop="15dp"
                android:paddingEnd="60dp"
                android:paddingBottom="15dp"
                android:layout_marginStart="20dp"
                android:text="确定"
                android:background="#ffb300"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

3.dialog动画

dialog_in_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0%p" />
</set>

dialog_out_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="0%p"
        android:toYDelta="100%p" />
</set>

4.时间选择器弹框:

new TimeSelectDialog(activity).show(null);

  • 16
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: my97datepicker/4.8/wdatepicker.js是一个用于实现日期选择的JavaScript插件。它基于My97 DatePicker开发,提供了丰富的日期选择功能和样式定制选项。 这个插件可以用于网页中的日期选择控件,使用户能够方便地从一个日历中选择日期。它可以用于各种场景,比如用户生日选择、预定会议时间、预约医生等。在使用这个插件之前,需要在页面中引入相应的JavaScript文件,并将日期选择控件的HTML元素与插件绑定。 wdatepicker.js提供了一些日期选择的基本功能,比如切换月份、选择日期、上下翻页等。它还可以根据具体需求进行样式定制,包括日期的外观、选择范围、禁用某些日期等。通过设置插件的参数,可以实现个性化和灵活的日期选择控件。 这个插件还支持多种日期格式的输入和显示,可以根据需要自定义日期的显示方式。同时,它还提供了一些常用的日期操作和计算功能,比如获取当前日期、判断两个日期的大小比较等。 总之,my97datepicker/4.8/wdatepicker.js是一个功能丰富、灵活易用的日期选择插件,可以帮助开发人员简化日期选择的操作,提高用户体验。无论在哪个行业或场景中使用,都可以在网页中轻松实现日期选择的功能。 ### 回答2: my97datepicker/4.8/wdatepicker.js是一个用于日期选择的Javascript插件。该插件基于My97DatePicker,提供了丰富的日期选择功能和样式定制选项。 使用该插件,可以在网页中方便地添加日期选择器,让用户可以直接从日历中选择日期。日期选择器可以显示当前日期、月份和年份,用户可以通过点击日历上的日期来选择特定日期。该插件还支持快捷选择功能,例如可以选择某个月的第一天或最后一天。 此外,wdatepicker.js还具有一些其他的特性,例如可以禁用特定日期,设置日期的最大和最小可选范围,以及自定义日期的显示格式。插件还支持多语言,可以根据需要切换不同的语言版本。 对于开发人员来说,wdatepicker.js提供了丰富的API接口,可以通过编程方式控制日期选择器的行为。可以动态设置日期选择器的默认日期、最大最小可选范围、显示格式等。此外,还可以通过回调函数来处理用户选择日期后的操作。 总之,my97datepicker/4.8/wdatepicker.js是一个功能强大、灵活易用的日期选择插件,可以方便地在网页中添加日期选择功能,提升用户体验。 ### 回答3: my97datepicker/4.8/wdatepicker.js 是一个用于日期选择的JavaScript插件。该插件是基于My97 DatePicker开发的,用于在网页中添加日期选择功能。 使用该插件前,你需要在网页中引入wdatepicker.js文件。然后,可以在需要添加日期选择的文本框或其他元素上调用相关的函数,以创建一个日历窗口。 该插件提供了丰富的功能,包括日期选择、时间选择、范围选择等。你可以自定义日历的外观和行为,通过传递不同的参数来实现不同的效果。 在使用过程中,你可以根据自己的需求,设置日期的格式、起始日期、语言等。同时,该插件还提供了一些事件回调函数,用于处理日期选择后的操作。 wdatepicker.js兼容多种浏览器,包括IE、火狐、谷歌等主流浏览器,可以在各种网页项目中灵活使用。 总的来说,my97datepicker/4.8/wdatepicker.js 是一个方便实用的日期选择插件,可以轻松地在网页中添加日期选择功能,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值