php 环状,如何实现自定义圆环状时间滚轮

最新推荐文章于 2023-01-13 11:38:24 发布

莱夢

最新推荐文章于 2023-01-13 11:38:24 发布

阅读量123

点赞数

文章标签： php 环状

本篇文章给大家分享的内容是如何实现自定义圆环状时间滚轮，有着一定的参考价值，有需要的朋友可以参考一下

先看一下最终效果：

实现

功能简介: 一年以内的任意天和week是可以对应起来的,其他的日与月不限制年

实现原理:利用一个自定义的滚轮来写日周月相互对应的逻辑部分

自定义view的源码如下:package com.lwyy.wheel.view;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.Rect;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import com.lwyy.wheel.R;

import java.util.ArrayList;

import java.util.List;

/**

* Created by ll on 2017/9/25.

public class CircleWheelView extends View {

private static final String TAG = CircleWheelView.class.getSimpleName();

private int mItemAlign;

public static final int ALIGN_CENTER = 0, ALIGN_LEFT = 1, ALIGN_RIGHT = 2;

private Paint mPaint;

private OnItemSelectedListener mOnItemSelectedListener;

private int mTextMaxWidth, mTextMaxHeight;

private Rect mRectDrawn;

private int mDrawnCenterX, mDrawnCenterY; //滚轮选择器绘制中心坐标

private int mWheelCenterX, mWheelCenterY; //滚轮选择器中心坐标

private int mItemTextColor, mSelectedItemTextColor; //数据项文本颜色以及被选中的数据项文本颜色

private int mItemHeight;

private float mItemTextSize;

private int mLastPointY; //用户手指上一次触摸事件发生时事件Y坐标

private float moveY;

private List mData = new ArrayList();

private List mDataCC = new ArrayList();

private int mTurnToCenterX;

private int mCurrentItemPosition;

private int mDefaultHalfNum = 7, mDefaultVisibleNum = 13; //设置当前view默认可见的item个数

private int mVisibleHalfNum, mVisibleCount; //视图区域内的展示的item个数

private int mDataSize;

private boolean isCyclic; //数据是否循环展示针对list的数目小于mDefaultVisibleNum

private boolean isLoopDisplay; //所有的数据是否是球形展示,即永远的头尾衔接,如果isCyclic是true,则该值也是true

private float[] rates = null;

private float[] textSizeRates = null;

public CircleWheelView(Context context) {

this(context, null);

}

public CircleWheelView(Context context, AttributeSet attrs) {

super(context, attrs);

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleWheelView);

mItemTextSize = a.getDimensionPixelSize(R.styleable.CircleWheelView_wheel_item_text_size,

getResources().getDimensionPixelSize(R.dimen.WheelItemTextSize_Default));

mItemAlign = a.getInt(R.styleable.CircleWheelView_wheel_item_align, ALIGN_CENTER);

mItemTextColor = a.getColor(R.styleable.CircleWheelView_wheel_item_text_color, 0xFF888888);

mSelectedItemTextColor = a.getColor(R.styleable.CircleWheelView_wheel_selected_item_text_color, 0xFF888899);

mTurnToCenterX = a.getInt(R.styleable.CircleWheelView_wheel_turn_to_centerx, 0); //转向中间,偏移的距离

isCyclic = a.getBoolean(R.styleable.CircleWheelView_wheel_cyclic, false);

isLoopDisplay = a.getBoolean(R.styleable.CircleWheelView_wheel_loop_display, false);

a.recycle();

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.LINEAR_TEXT_FLAG);

mPaint.setStyle(Paint.Style.FILL);

mRectDrawn = new Rect();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int modeWidth = MeasureSpec.getMode(widthMeasureSpec);

int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);

int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

// 计算原始内容尺寸

int resultWidth = mTextMaxWidth;

int resultHeight = mTextMaxHeight * mVisibleCount;

// 考虑内边距对尺寸的影响

resultWidth += getPaddingLeft() + getPaddingRight();

resultHeight += getPaddingTop();

// 考虑父容器对尺寸的影响

resultWidth = measureSize(modeWidth, sizeWidth, resultWidth);

resultHeight = measureSize(modeHeight, sizeHeight, resultHeight);

setMeasuredDimension(resultWidth, resultHeight);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

// 获取内容区域中心坐标

mRectDrawn.set(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(),

getHeight() - getPaddingBottom());

mWheelCenterX = mRectDrawn.centerX();

mWheelCenterY = mRectDrawn.centerY();

computeDrawnCenter();

}

@Override

protected void onDraw(Canvas canvas) {

if (mDataCC.size() > 0) {

mPaint.setStrokeWidth(1);

mPaint.setSubpixelText(true); //设置该项为true，将有助于文本在LCD屏幕上的显示效果

canvas.save();

int indexBottom = 0;

float distanceX = 0, mDrawnItemCenterY = 0;

int endIndex = isCyclic ? 13 : Math.min(mDefaultVisibleNum, mDataCC.size());

if (endIndex > mData.size())

endIndex = mData.size();

for (int i = 0; i < endIndex; i++) {

if (i == 0) mPaint.setColor(mSelectedItemTextColor);

else mPaint.setColor(mItemTextColor);

if (isCyclic) {

if (i < mVisibleHalfNum)

indexBottom = i;

else

indexBottom = i - mVisibleHalfNum + 1;

if (i < mVisibleHalfNum)

mDrawnItemCenterY = (int) (mDrawnCenterY - (mItemHeight * rates[indexBottom]));

else

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]));

if (i == endIndex - 1)

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]) - 10);

} else if (mData.size() < 13) { if (i < mVisibleHalfNum + 1)

indexBottom = i; else

indexBottom = i - mVisibleHalfNum; if (i < mVisibleHalfNum + 1)

mDrawnItemCenterY = (int) (mDrawnCenterY - (mItemHeight * rates[indexBottom])); else

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom])); if (i == endIndex - 1)

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]) - 10);// if (i < mVisibleHalfNum)// indexBottom = i;// else// indexBottom = i - mVisibleHalfNum + 1; if (i < mVisibleHalfNum)// mDrawnItemCenterY = (int) (mDrawnCenterY - (mItemHeight * rates[indexBottom]));// else// mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]));// if (i == endIndex - 1)// mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]) - 10);

} else {

if (i < mVisibleHalfNum)

indexBottom = i;

else

indexBottom = i - mVisibleHalfNum + 1;

// LogUtil.e(TAG, "indexBottom:" + indexBottom + ",mVisibleHalfNum:" + mVisibleHalfNum + ",i:" + i);

if (indexBottom >= mDefaultHalfNum)

continue;

if (i < mVisibleHalfNum)

mDrawnItemCenterY = (int) (mDrawnCenterY - (mItemHeight * rates[indexBottom])); else

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom])); if (i == endIndex - 1)

mDrawnItemCenterY = (int) (mDrawnCenterY + (mItemHeight * rates[indexBottom]) - 10);

}

mPaint.setTextSize(mItemTextSize * textSizeRates[indexBottom]);

paintText(canvas, distanceX, rates, mDrawnItemCenterY, indexBottom, i);

}

private void paintText(Canvas canvas, float distanceX, float[] rates, float drawnCenterY, int indexBottom, int i) {

float mDistanceSubX = mDrawnCenterX - mTurnToCenterX * rates[indexBottom] * rates[indexBottom];

float mDistanceAddX = mDrawnCenterX + mTurnToCenterX * rates[indexBottom] * rates[indexBottom];

switch (mItemAlign) {

case ALIGN_CENTER:

distanceX = mDrawnCenterX;

break;

case ALIGN_LEFT:

distanceX = mData.get(i).toString().length() <= 1 ?

mDistanceSubX + 4 * (mVisibleHalfNum - indexBottom) : mDistanceSubX;

break;

case ALIGN_RIGHT:

distanceX = mData.get(i).toString().length() <= 1 ?

mDistanceAddX - 4 * (mVisibleHalfNum - indexBottom) : mDistanceAddX;

break;

}

String text = "";

if (!isLoopDisplay && !isCyclic && mDataSize > mDefaultHalfNum) {

if (mCurrentItemPosition < mDefaultHalfNum - 1 && (i >= mDefaultHalfNum || i <= mCurrentItemPosition)) {