devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【MyAndroid】日期时间滚轮选择器--100个经典UI设计模板(97/100)_android日期选择滚轮

作者：小丑西瓜9 | 2024-02-16 23:28:35

赞

踩

android日期选择滚轮

效果如下：
在这里插入图片描述

使用
布局文件如下：


    <com.ycuwq.datepicker.date.DatePicker

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/dayPicker_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.ycuwq.datepicker.date.DatePicker>

    <com.ycuwq.datepicker.time.HourAndMinutePicker
        android:id="@+id/hour_min_picker_dialog"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dayPicker_dialog"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        />

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

com.ycuwq.datepicker.date.DatePicker是组合
里面的布局文件如下：


    <com.ycuwq.datepicker.date.YearPicker
        android:id="@+id/yearPicker_layout_date"
        app:halfVisibleItemCount="2"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
    <com.ycuwq.datepicker.date.MonthPicker
        android:id="@+id/monthPicker_layout_date"
        app:halfVisibleItemCount="2"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
    <com.ycuwq.datepicker.date.DayPicker
        android:id="@+id/dayPicker_layout_date"
        app:halfVisibleItemCount="2"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

java里进行监听如下：

  1. YearPicker.OnYearSelectedListener
  2. MonthPicker.OnMonthSelectedListener
  3. DayPicker.OnDaySelectedListener
  4. HourPicker.OnHourSelectedListener
  5. MinutePicker.OnMinuteSelectedListener

布局中的属性说明

属性列表如下：

<declare-styleable name="WheelPicker">
        <attr name="halfVisibleItemCount"/>//可见的行数
        <attr name="itemTextSize"/>//文本大小
        <attr name="itemMaximumWidthText"/>宽度
        <attr name="itemTextColor"/>文本颜色
        <attr name="textGradual"/>字体渐变，开启后越靠近边缘，字体越模糊
        <attr name="selectedTextColor"/>选中文本颜色
        <attr name="selectedTextSize"/>选中的文本大小
        <attr name="currentItemPosition"/>当前项位置
        <attr name="itemWidthSpace"/>两个Item之间的高宽间隔
        <attr name="itemHeightSpace"/>两个Item之间的高宽间隔
        <attr name="zoomInSelectedItem"/>是否进行缩放效果
        <attr name="wheelCyclic"/>循环
        <attr name="wheelCurtain"/>幕布
        <attr name="wheelCurtainColor"/>幕布颜色
        <attr name="wheelCurtainBorder" />幕布边框
        <attr name="wheelCurtainBorderColor"/>幕布边框的颜色
        <attr name="indicatorText"/>指示器文字的文本
        <attr name="indicatorTextSize"/>指示器文字的文本大小
        <attr name="indicatorTextColor"/>指示器文字的文本颜色
    </declare-styleable>

    <declare-styleable name="YearPicker">
        <attr name="startYear" format="integer"/> 开始年份
        <attr name="endYear" format="integer"/>结束年份
    </declare-styleable>

    <declare-styleable name="MonthPicker">
    </declare-styleable>

    <declare-styleable name="DatePicker">
        <attr name="halfVisibleItemCount"/>
        <attr name="itemTextSize"/>
        <attr name="itemTextColor"/>
        <attr name="textGradual"/>
        <attr name="selectedTextColor"/>
        <attr name="selectedTextSize"/>
        <attr name="itemWidthSpace"/>
        <attr name="itemHeightSpace"/>
        <attr name="zoomInSelectedItem"/>
        <attr name="wheelCyclic"/>
        <attr name="wheelCurtain"/>
        <attr name="wheelCurtainColor"/>
        <attr name="wheelCurtainBorder"/>
        <attr name="wheelCurtainBorderColor"/>
    </declare-styleable>

    <declare-styleable name="HourAndMinutePicker">
        <attr name="halfVisibleItemCount"/>
        <attr name="itemTextSize"/>
        <attr name="itemTextColor"/>
        <attr name="textGradual"/>
        <attr name="selectedTextColor"/>
        <attr name="selectedTextSize"/>
        <attr name="itemWidthSpace"/>
        <attr name="itemHeightSpace"/>
        <attr name="zoomInSelectedItem"/>
        <attr name="wheelCyclic"/>
        <attr name="wheelCurtain"/>
        <attr name="wheelCurtainColor"/>
        <attr name="wheelCurtainBorder"/>
        <attr name="wheelCurtainBorderColor"/>
    </declare-styleable>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

线条和矩形边框幕布设置

位置：com.ycuwq.datepicker.WheelPicker#onDraw(Canvas canvas)

@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		mPaint.setTextAlign(Paint.Align.CENTER);
		if (mIsShowCurtain) {
			mPaint.setStyle(Paint.Style.FILL);
			mPaint.setColor(mCurtainColor);
			canvas.drawRect(mSelectedItemRect, mPaint);
		}
		if (mIsShowCurtainBorder) {
			mPaint.setStyle(Paint.Style.STROKE);
			mPaint.setColor(mCurtainBorderColor);
			canvas.drawLine(mSelectedItemRect.left
					, mSelectedItemRect.top
					, mSelectedItemRect.right
					, mSelectedItemRect.top
					, mPaint);        //绘制直线
			canvas.drawLine(mSelectedItemRect.left
					, mSelectedItemRect.bottom
					, mSelectedItemRect.right
					, mSelectedItemRect.bottom
					, mPaint);        //绘制直线
//			canvas.drawRect(mSelectedItemRect, mPaint);
//			canvas.drawRect(mDrawnRect, mPaint);
		}
		int drawnSelectedPos = - mScrollOffsetY / mItemHeight;
		mPaint.setStyle(Paint.Style.FILL);
		//首尾各多绘制一个用于缓冲
		for (int drawDataPos = drawnSelectedPos - mHalfVisibleItemCount - 1;
            drawDataPos <= drawnSelectedPos + mHalfVisibleItemCount + 1; drawDataPos++) {
			int position = drawDataPos;
            if (mIsCyclic) {
				position = fixItemPosition(position);
			} else {
				if (position < 0 || position > mDataList.size() - 1) {
					continue;
				}
			}

			T data = mDataList.get(position);
			int itemDrawY = mFirstItemDrawY + (drawDataPos + mHalfVisibleItemCount) * mItemHeight + mScrollOffsetY;
			//距离中心的Y轴距离
			int distanceY = Math.abs(mCenterItemDrawnY - itemDrawY);

			if (mIsTextGradual) {
                //文字颜色渐变要在设置透明度上边，否则会被覆盖
                //计算文字颜色渐变
                if (distanceY < mItemHeight) {  //距离中心的高度小于一个ItemHeight才会开启渐变
                    float colorRatio = 1 - (distanceY / (float) mItemHeight);
                    mSelectedItemPaint.setColor(mLinearGradient.getColor(colorRatio));
                    mTextPaint.setColor(mLinearGradient.getColor(colorRatio));
                } else {
                    mSelectedItemPaint.setColor(mSelectedItemTextColor);
                    mTextPaint.setColor(mTextColor);
                }
                //计算透明度渐变
				float alphaRatio;
				if (itemDrawY > mCenterItemDrawnY) {
					alphaRatio = (mDrawnRect.height() - itemDrawY) /
							(float) (mDrawnRect.height() - (mCenterItemDrawnY));
				} else {
					alphaRatio = itemDrawY / (float) mCenterItemDrawnY;
				}

				alphaRatio = alphaRatio < 0 ? 0 :alphaRatio;
				mSelectedItemPaint.setAlpha((int) (alphaRatio * 255));
				mTextPaint.setAlpha((int) (alphaRatio * 255));
            }

			//开启此选项,会将越靠近中心的Item字体放大
			if (mIsZoomInSelectedItem) {
                if (distanceY < mItemHeight) {
                    float addedSize = (mItemHeight - distanceY) / (float) mItemHeight * (mSelectedItemTextSize - mTextSize);
                    mSelectedItemPaint.setTextSize(mTextSize + addedSize);
                    mTextPaint.setTextSize(mTextSize + addedSize);
                } else {
                    mSelectedItemPaint.setTextSize(mTextSize);
                    mTextPaint.setTextSize(mTextSize);
                }
            } else {
                mSelectedItemPaint.setTextSize(mTextSize);
                mTextPaint.setTextSize(mTextSize);
            }
            String drawText = mDataFormat == null ? data.toString() : mDataFormat.format(data);
            //在中间位置的Item作为被选中的。
            if (distanceY < mItemHeight / 2) {
                canvas.drawText(drawText, mFirstItemDrawX, itemDrawY, mSelectedItemPaint);
            } else {
                canvas.drawText(drawText, mFirstItemDrawX, itemDrawY, mTextPaint);
            }
		}
		if (!TextUtils.isEmpty(mIndicatorText)) {
			canvas.drawText(mIndicatorText, mFirstItemDrawX + mTextMaxWidth / 2F, mCenterItemDrawnY, mIndicatorPaint);
		}
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95

在这里插入图片描述

线条边框
在这里插入图片描述
矩形边框幕布

公开源码不渣

https://gitee.com/lc951/my-android

参考：

https://github.com/ycuwq/DatePicker

产品推荐

推荐理由

postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求

简介

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

下面是一段smartApi使用介绍：
在这里插入图片描述

下载地址：

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/97746
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号