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

42nf

已于 2024-03-16 14:20:42 修改

阅读量2.5k

点赞数 17

文章标签： android WheelView 时间选择器

于 2024-03-15 14:41:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_29364417/article/details/136738132

版权

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);

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

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