Android 使用WheelPicker自定义日期滚轮选择器

已于 2024-04-24 19:21:20 修改
阅读量535 收藏 11
点赞数 4
文章标签： android
于 2024-04-24 16:33:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47118034/article/details/138159609
版权
本文介绍了如何在Android项目中引入和使用WheelPicker库创建自定义日期时间选择器，包括布局设置、Data的配置、初始值设定以及输出选中时间的方法。
摘要由CSDN通过智能技术生成

文章目录

效果图

首先放一张最终的效果图

在这里插入图片描述

git地址

https://github.com/AigeStudio/WheelPicker

WheelPicker引入

首先我们需要在对应的build.gradle引入这个库

implementation 'cn.aigestudio.wheelpicker:WheelPicker:1.1.3'

在这里插入图片描述

layout使用（附代码）

在这一步已经可以直接在layout文件中使用，观看一下效果后再根据自己的需求去调整。

这里我就直接上我写好的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/pop_up_background_color"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/item_dp_28"
            android:text="@string/cl_common_cancel"
            android:textColor="@color/text_main_body_color"
            android:textSize="@dimen/sp_14" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/tv_title_dark_grey"
            android:textSize="@dimen/sp_17" />

        <TextView
            android:id="@+id/tvConfirm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/item_dp_28"
            android:text="@string/cl_common_confirm"
            android:textColor="@color/text_special_color"
            android:textSize="@dimen/sp_14" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/dp_24"
        android:paddingStart="@dimen/dp_16"
        android:paddingEnd="@dimen/dp_16">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:text="Y"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="M"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="D"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="H"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="M"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:textSize="@dimen/sp_15"
            android:textColor="@color/text_special_color"
            android:gravity="center"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="@dimen/dp_16"
        android:paddingRight="@dimen/dp_16"
        android:paddingBottom="@dimen/dp_48">

        <com.aigestudio.wheelpicker.widgets.WheelYearPicker
            android:id="@+id/wpYear"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

        <com.aigestudio.wheelpicker.widgets.WheelMonthPicker
            android:id="@+id/wpMonth"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

        <com.aigestudio.wheelpicker.widgets.WheelDayPicker
            android:id="@+id/wpDay"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/wpHour"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/wpMinute"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/wpNoon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            app:wheel_item_text_size="@dimen/sp_15"
            app:wheel_item_text_color="@color/text_main_body_color"
            app:wheel_indicator="true"
            app:wheel_indicator_size="@dimen/dp_1"
            app:wheel_indicator_color="@color/text_main_body_color"
            app:wheel_visible_item_count="5"
            app:wheel_item_space="@dimen/dp_16"
            app:wheel_atmospheric="true"/>

    </LinearLayout>


</LinearLayout>

我这里是使用了6个WheelPicker

其中的 颜色文件color 和 占宽比重 大家可以根据自己的需求去定，下面我对部分代码进行详解：

	// 这个是选中item的上下两根线，true为显示，false为去掉
	app:wheel_indicator="true"
	
	//size是线的粗线
	app:wheel_indicator_size="@dimen/dp_1"
	
	//color是线的颜色
   	app:wheel_indicator_color="@color/text_main_body_color"

	//这个是总共显示的item数
	app:wheel_visible_item_count="5"
	
	//两个item之间间隔的距离
    app:wheel_item_space="@dimen/dp_16"
    
    //是否加入渐变色，这里会按照你设置的item文字颜色，越靠近两边颜色越淡
    app:wheel_atmospheric="true"

WheelPicker的Data设置

这里的年月日是使用了WheelPicker自带的年月日picker，所以Data已经自动设置为年份和月份还有天数的对应数据。
至于后面的Hour、Minute、AM or PM这个的数据则需要我们自己写入

		//初始化Hour数据 (0-11)
        val listOfHour = (0..11).map { number ->
            if (number < 10) "0$number" else number.toString()
        }
        wpHour.data = listOfHour
        
        //初始化Minute数据 (0-59)
        val listOfMinute = (0..59).map { number ->
            if (number < 10) "0$number" else number.toString()
        }
        wpMinute.data = listOfMinute
        
        //初始化noon
        wpNoon.data = listOf("AM", "PM")

如果大家不想写AM、PM这一栏也可以直接在Hour处使用 0-23 来显示

Select的初始值设置

我们在设置完所有对应的data后，其实就已经和效果图的展示一样了。

但是我们正常使用的时候是需要带参去初始化显示，去给它赋一个值来显示，下面就是我给它赋值的一个过程。

首先我写了个带所有需要使用到的参数的方法

// 传入日期时间设置
    fun setInitialDateTime(year: Int, month: Int, day: Int, hour: Int, minute: Int, isAM: Boolean) {
        //初始化Hour数据
        val listOfHour = (0..12).map { number ->
            if (number < 10) "0$number" else number.toString()
        }
        wpHour.data = listOfHour
        //初始化Minute数据
        val listOfMinute = (0..59).map { number ->
            if (number < 10) "0$number" else number.toString()
        }
        wpMinute.data = listOfMinute
        //初始化noon
        wpNoon.data = listOf("AM", "PM")

        //设置年份
        wpYear.selectedYear = year
        //设置月份
        wpMonth.selectedMonth = month
        //设置天
        wpDay.month = month
        wpDay.selectedDay = day
        //设置小时
        wpHour.setSelectedItemPosition(hour,false)
        //设置分钟
        wpMinute.setSelectedItemPosition(minute,false)
        //设置早上晚上
        wpNoon.setSelectedItemPosition(if (isAM) 0 else 1, false)
    }

将一个指定的字符串，(例：2024/04/24 16:18) 传入，这里可以获取当前的时间去传入，就可以显示当前的日期和时间。

		//填充默认时间
        val currentDateTime = Calendar.getInstance()
        val year = currentDateTime.get(Calendar.YEAR)
        val month = currentDateTime.get(Calendar.MONTH) + 1
        val day = currentDateTime.get(Calendar.DAY_OF_MONTH)
        val hour = currentDateTime.get(Calendar.HOUR_OF_DAY)
        val minute = currentDateTime.get(Calendar.MINUTE)

        val formattedDateTime = String.format("%04d/%02d/%02d %02d:%02d", year, month, day, hour, minute)

这里我是因为在界面上有显示对应时间，所以仅在第一次进入界面初始化的时候去拿了当前时间使用，后面都是用的选择后的时间（因为我在点击确认后就会显示新的选中时间）。

			val formatter = DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm")
            val dateTime = LocalDateTime.parse(str, formatter)

            val mDateSelectDialog = CustomDateSelectDialog(activity as AppCompatActivity)
            val year = dateTime.year
            val month = dateTime.monthValue
            val day = dateTime.dayOfMonth
            var hour = dateTime.hour
            var isAm = true
            if (hour > 12) {
                isAm = false
                hour -= 12
            }
            val minute = dateTime.minute
            mDateSelectDialog.setInitialDateTime(year,month,day,hour,minute,isAm)
            mDateSelectDialog.setTouchOutSide(true)
            mDateSelectDialog.setConfirmFilterListener {
                csiDate.setRightText(it, false)
            }

输出选中的时间

这里因为我是做成一个popupWindow，也就是弹出框的形式，所以我在确定编辑数据后还会将它以一个字符串的形式返回到界面显示。

		//点击确认按钮
        tvConfirm.setOnClickListener {
            //确认最终编辑的数据
            val selYear = wpYear.currentYear
            val selMonth = wpMonth.currentMonth
            val selDay = wpDay.currentDay
            var selHour = wpHour.currentItemPosition
            val selMinute = wpMinute.currentItemPosition
            val isAM = wpNoon.currentItemPosition == 0
            if (!isAM) {
                selHour += 12
            }
            val dateStr = String.format("%04d/%02d/%02d %02d:%02d", selYear, selMonth, selDay, selHour, selMinute)
        }

这里拿到最终的dateStr数据进行显示就可以了，我在这里是写了个回调在后面，与这篇的内容关系不大，在这里就不写上了，大家自己根据数据进行处理就好。

小结

完成了UI设计图所需的日期时间选择器效果，写个笔记顺便可以记录和复盘一下过程。

momo闻鸡起舞
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
android 滚轮时间样式,原生时间（日期）选择器的滚动显示方式
weixin_39964833的博客
05-29 1920
一、滚动时间选择器样式的设置平时在做一些业务软件时，可能会用到时间(日期)选择控件，而DatePicker和TimePicker的默认样式放在对话框中选择感觉还好，但是直接贴在界面上看起来就不是很理想了。下面是两个控件的默认样式。这是日期选择器： 这是时间选择器： 平时，我们经常会接触到滚动选择的时间选择器，其实原生的控件也有属性可以去设置的，就是上面时间选择器部分代码中的日期选择器中的dateP...
Android-WheelDateTimePicker:Android滚轮日期时间选择组件，日期支持农历
06-21
Android-WheelDateTimePicker Android滚轮日期时间选择组件，日期支持农历 注：（项目进一步完善中，暂时不建议用于生产环境） ##简单实用 以日期选择为例说明（时间选择同理）： //首先创建监听器 DatePickerFragment.OnDateSetListener listener = new DatePickerFragment.OnDateSetListener() { @Override public void onDateSet(Date date) { //todo } @Override public void onDateCancle() { } }; //然后builder出WheelDatePicker示例，调用show()方法即可 WheelDatePicker dat
Android自定义滚轮式日期（时间）选择控件
03-23
可以同时显示日期加时间，或者只显示日期
推荐一款强大的Android滚动选择器 —— PickerView
最新发布
gitblog_00055的博客
05-26 450
推荐一款强大的Android滚动选择器 —— PickerView 项目地址:https://gitcode.com/duanhong169/PickerView 在Android开发过程中，我们常常需要实现各种各样的选择器，如日期选择器、时间选择器或是自定义的数据选择器等。今天，我要向大家推荐一个高效且易用的开源库——PickerView，它能帮助你轻松实现这些功能。 项目介绍 PickerVi...
时间选择器
qq_23911165的博客
04-21 301
GitHub - wangchenyan/datepicker: Android 日期选择器，时间选择器，滚动列表选择器
【MyAndroid】日期时间滚轮选择器--100个经典UI设计模板(97/100)
lichong951的专栏
03-25 4294
100个经典UI设计模板
android 简单快速 实现滚轮控件WheelView（类似DatePicker/TimePicker）
OneN的博客
03-15 1797
2.布局实现 dialog_time_select.xml。3.dialog动画。
开源项目安卓滚轮选择器WheelPicker的简单使用
wei的博客
08-31 2939
Android开源项目滚轮选择器WheelPicker
Android 实现滑动数字选择器
ming0gy的博客
05-11 2805
Android ScrollableNumberPicker：这是另一个第三方的数字选择器库，它支持水平和垂直滚动模式，并提供了多种自定义选项。Android 滑动数字选择器是一种用户界面控件，它允许用户从一系列数字中选择一个值。Android WheelPicker：这是一个第三方的数字选择器库，它提供了多种样式和配置选项。Android NumberPicker：这是 Android 框架提供的原生数字选择器控件。dialog中需要的布局文件，也就是数字选择器的布局picker_layout。
Android地址(省市区)、日期、时间滚轮选择器简单封装
u012556114的博客
08-31 9142
android开发中时间、日期、地址等滚轮选择器很常见，很多App会使用这种效果，收集了一下资料，于是自己做了一个简单封装，方便使用，感谢各位大佬的资料，效果如图: 使用方法代码如下: public class MainActivity extends AppCompatActivity { private Dialog dateDialog, timeDialog, ...
Android 滚轮选择器JFPicker，推荐自己的一个开源库
weixin_43864176的博客
06-15 1903
Android 滚轮选择器
Android自定义wheelview实现滚动日期选择器
08-27
主要介绍了Android自定义wheelview实现滚动日期选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
滚轮选择控件选择器
04-05
在Android开发中，滚轮选择器的实现可以自定义，但也可以借助开源库来简化工作，如本案例中提到的AigeStudio的WheelPicker。 AigeStudio是开发者或团队的名称，他们为Android平台贡献了一个名为WheelPicker的源码...
Android高仿IOS 滚轮选择控件
11-22
在Android开发中，有时我们希望实现与iOS类似的用户体验，其中包括使用滚轮选择器（WheelView）来呈现选项。本文将详细介绍如何在Android中创建一个高仿iOS风格的滚轮选择控件，主要基于名为Android-PickerView的...
平滑，高度可定制的车轮视图和选择器视图，支持3D效果，如iOS。一个顺滑的,高度自定义的滚轮控件和选择器,支持类似iOS的3 d效果- zyyoona7 / WheelPicker
01-27
简介（Introduction）自定义 View 实现滑动流畅、功能齐全、用法简单、高度自定义的 WheelView，并在 WheelView 基础之上封装了常用的日期选择器（包括年、月、日 WheelView）、选项选择器。版本说明2019/07/11 发布...
android 滚轮式地市联动选择
09-24
Android标准库虽然没有提供原生的滚轮选择器，但开发者社区已经创建了许多开源项目来填补这一空白。 标题提到的"android 滚轮式地市联动选择"是基于一个名为`WheelPicker`的开源项目，它是由lenonwang修改自wanglei...
仿ios滑动选择器亲测好用（推荐）
03-18
WheelPicker是一个开源的Android库，它提供了类似iOS的滚轮选择器组件，支持自定义样式、颜色、字体等，使得开发者可以轻松地在Android应用中实现iOS的滑动选择体验。这个库通常通过Gradle引入，只需在build.gradle...
Android开源项目滚轮选择器WheelPicker的基本用法总结
wodongx123的博客
07-15 6748
1. 添加依赖 在Project的build.gradle中，添加maven { url ‘https:jitpack.io’} 在相关Module（一般是Module：app）的build.gradle中，添加implementation 'cn.aigestudio.wheelpicker:WheelPicker:1.1.3' 注意不是 implemention ‘com.github.open-android:WheelPicker:v1.0.0’，那篇文章（即百度WheelPicker排第一的简书
flutter滚轮选择器
08-01
Flutter滚轮选择器是一种常用的UI组件，用于在移动端应用中实现选择器的功能。 Flutter提供了`CupertinoPicker`和`DatePicker`两个滚轮选择器的预定义控件。其中，`CupertinoPicker`是一个iOS风格的选择器，适用于创建iOS风格的应用，而`DatePicker`是一个日期选择器，用于选择日期。 使用滚轮选择器，我们可以自定义选择器中的选项，并通过监听选择器的值变化事件来获取用户的选择结果。我们可以通过`CupertinoPicker`的`children`属性来定义选择器的选项，通过`onSelectedItemChanged`属性来监听值的变化。 例如，如果我们需要创建一个滚轮选择器来选择商品的尺寸，我们可以定义一个字符串数组作为选项，然后将其传递给`CupertinoPicker`的`children`属性。在`onSelectedItemChanged`的回调函数中，我们可以根据用户选择的尺寸来进行下一步的处理。 除了预定义的滚轮选择器之外，Flutter还提供了一些第三方库，可以帮助我们创建更多样化的滚轮选择器，如`flutter_picker`和`flutter_cupertino_date_picker`等。 总的来说，Flutter滚轮选择器是一个非常方便和实用的组件，可以帮助我们在移动应用中实现选择器的功能，提升用户的交互体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值