您当前的位置: 首页 >  ui

lichong951

暂无认证

  • 3浏览

    0关注

    131博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

lichong951 发布时间:2022-03-25 15:09:13 ,浏览量:3

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

使用 布局文件如下:


    
    

    

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


    
    
    

java里进行监听如下:

  1. YearPicker.OnYearSelectedListener
  2. MonthPicker.OnMonthSelectedListener
  3. DayPicker.OnDaySelectedListener
  4. HourPicker.OnHourSelectedListener
  5. MinutePicker.OnMinuteSelectedListener
布局中的属性说明

属性列表如下:


        //可见的行数
        //文本大小
        宽度
        文本颜色
        字体渐变,开启后越靠近边缘,字体越模糊
        选中文本颜色
        选中的文本大小
        当前项位置
        两个Item之间的高宽间隔
        两个Item之间的高宽间隔
        是否进行缩放效果
        循环
        幕布
        幕布颜色
        幕布边框
        幕布边框的颜色
        指示器文字的文本
        指示器文字的文本大小
        指示器文字的文本颜色
    

    
         开始年份
        结束年份
    

    
    

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    

线条和矩形边框幕布设置

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

在这里插入图片描述

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

公开源码不渣

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

参考:

https://github.com/ycuwq/DatePicker

关注
打赏
1659512212
查看更多评论
立即登录/注册

微信扫码登录

0.0753s