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

lichong951

已于 2023-11-22 16:24:44 修改

阅读量4.3k

点赞数 1

分类专栏： android开发文章标签： android studio Android开发 UI开发开源交互设计

于 2022-03-25 15:09:13 首次发布

本文链接：https://blog.csdn.net/lichong951/article/details/123736113

版权

android开发专栏收录该内容

44 篇文章 8 订阅

订阅专栏

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

使用
布局文件如下：


    <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"
        />

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" />

java里进行监听如下：

YearPicker.OnYearSelectedListener
MonthPicker.OnMonthSelectedListener
DayPicker.OnDaySelectedListener
HourPicker.OnHourSelectedListener
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>

线条和矩形边框幕布设置

位置：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);
		}
	}

在这里插入图片描述