自定義時間滾輪(圓環狀)

自定義時間滾輪(圓環狀)

前提

想寫這個好久了,這個本來也早就可以發出來了,因爲懶癌,一直未能實現,以後儘量保持月更的勁頭,歡迎監督.

效果

實現

功能簡介: 一年以內的任意天和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)) {
                text = String.valueOf(mData.get(i));
            } else if (mCurrentItemPosition > mDefaultHalfNum - 1 && i < mDefaultHalfNum + (mDataSize - mCurrentItemPosition) - 1)
                text = String.valueOf(mData.get(i));
            else if (mCurrentItemPosition == mDefaultHalfNum - 1)
                text = String.valueOf(mData.get(i));
        } else if (isCyclic && !isLoopDisplay) {
            if (mCurrentItemPosition < mDefaultHalfNum - 1 && ((i >= mDefaultHalfNum && i < mDataCC.size() - mCurrentItemPosition - 1 + mDefaultHalfNum) || i <= mCurrentItemPosition)) {
                text = String.valueOf(mData.get(i));
            } else if (mCurrentItemPosition > mDefaultHalfNum - 1 && i < mDefaultHalfNum + (mDataCC.size() - mCurrentItemPosition) - 1)
                text = String.valueOf(mData.get(i));
            else if (mCurrentItemPosition == mDefaultHalfNum - 1 && i < mDataCC.size())
                text = String.valueOf(mData.get(i));
        } else {
            text = String.valueOf(mData.get(i));
//            LogUtil.i(TAG, "text:" + mData.get(i) + ",i:" + i);
        }
        canvas.drawText(text, distanceX, drawnCenterY, mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastPointY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                moveY = event.getY() - mLastPointY;
                if (Math.abs(moveY) < 1) break;
                if (mDataCC.size() < mDefaultHalfNum)
                    break;
                if (!isLoopDisplay) {
                    if (mCurrentItemPosition == 0 && moveY > 0)
                        break;
                    if (isCyclic && mDataCC.size() < mDefaultVisibleNum && mCurrentItemPosition == mDataCC.size() - 1 && moveY < 0)
                        break;
                    else if (mCurrentItemPosition == mDataSize - 1 && moveY < 0)
                        break;
                }

                changeMoveItemPosition(event, mItemHeight * 3 / 2);
                break;
            case MotionEvent.ACTION_UP:
                if (mDataCC.size() < mDefaultHalfNum) {
                    changeMoveItemPosition(event, mItemHeight / 2);
                }

                if (null != mOnItemSelectedListener && mCurrentItemPosition < mDataCC.size() && mDataCC.size() > 0 && mCurrentItemPosition >= 0)
                    mOnItemSelectedListener.onItemSelected(this, mDataCC.get(mCurrentItemPosition), mCurrentItemPosition);
                break;
        }
        return true;
    }

    private void changeMoveItemPosition(MotionEvent event, int moveHeight) {
        if (Math.abs(moveY) > moveHeight) {
            mLastPointY = (int) event.getY();
            if (moveY > 0)
                mCurrentItemPosition--;
            else
                mCurrentItemPosition++;

            if (mCurrentItemPosition > mDataCC.size() - 1)
                mCurrentItemPosition -= mDataCC.size();
            if (mCurrentItemPosition < 0)
                mCurrentItemPosition += mDataCC.size();
            if (mCurrentItemPosition >= 0 && mCurrentItemPosition < mDataCC.size())
                setSelectedItemPosition(mDataCC, mCurrentItemPosition);
        }
    }

    private void computeTextSize() {
        mTextMaxWidth = mTextMaxHeight = 0;
        for (Object obj : mData) {
            String text = String.valueOf(obj);
            int width = (int) mPaint.measureText(text);
            mTextMaxWidth = Math.max(mTextMaxWidth, width);
        }
        Paint.FontMetrics metrics = mPaint.getFontMetrics();
        mTextMaxHeight = (int) (metrics.bottom - metrics.top);
    }

    private int measureSize(int mode, int sizeExpect, int sizeActual) {
        int realSize;
        if (mode == MeasureSpec.EXACTLY) {
            realSize = sizeExpect;
        } else {
            realSize = sizeActual;
            if (mode == MeasureSpec.AT_MOST)
                realSize = Math.min(realSize, sizeExpect);
        }
        return realSize;
    }

    //固定的等比高度
    private void computeDrawnCenter() {
        int num = 7;
        mItemHeight = mRectDrawn.height() / (num * 2 - 2);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mDrawnCenterX = mWheelCenterX;
        mDrawnCenterY = mWheelCenterY + mItemHeight / num;
    }

    public void updateVisibleItemCount(int num) {
        if (isCyclic) {
            mVisibleCount = mDefaultVisibleNum = 13;
            mVisibleHalfNum = mDefaultHalfNum = 7;
        } else {
            if (num >= mDefaultHalfNum)
                mVisibleHalfNum = mDefaultHalfNum;
            else {
                mVisibleHalfNum = num % 2 == 1 ? num / 2 + 1 : num / 2;
            }
        }

//        LogUtil.e(TAG, "mVisibleHalfNum:" + mVisibleHalfNum);
        mVisibleCount = Math.min(mDefaultVisibleNum, num);
        mDataSize = isCyclic ? mDefaultVisibleNum : num;
    }

    public void setData(List mData, int pos) {
        setData(mData, pos, true);
    }

    public void setData(List mData, int pos, boolean isLoopDisplay) {
        setData(mData, pos, isLoopDisplay, false, 13);
    }

    public void setData(List mData, int pos, boolean isLoopDisplay, boolean isCycle) {
        setData(mData, pos, isLoopDisplay, isCycle, 13);
    }

    /**
     * @param mData          傳入的展示列表數據
     * @param pos            當前view的中間item展示的內容
     * @param isLoopDisplay  所有的數據是否是球形展示,即永遠的頭尾銜接,即item由mDataSize - 1下滑變爲0,默認true
     * @param isCycle        數據是否循環展示  針對list的數目小於mDefaultVisibleNum. 默認false
     * @param visibleShowNum 當前界面展示的item個數
     */
    public void setData(List mData, int pos, boolean isLoopDisplay, boolean isCycle, int visibleShowNum) {
        if (mData.size() <= 0 || pos < 0 || pos >= mData.size())
            return;
        if (visibleShowNum % 2 == 1)
            visibleShowNum++;
        if (mData.size() > 12 && isCycle)
            isCycle = false;
        else if (mData.size() < 13 && !isCycle && !isLoopDisplay) {
            isCycle = true;
        }

        mDefaultVisibleNum = mData.size() < 13 && !isCycle ? mData.size() : 13;
        mDefaultHalfNum = mDefaultVisibleNum < 13 ? mDefaultVisibleNum / 2 : 7;
        this.isLoopDisplay = isLoopDisplay;
        this.isCyclic = isCycle;

        if (this.mDataCC.size() > 0)
            this.mDataCC.clear();
        this.mDataCC.addAll(mData);
        this.mCurrentItemPosition = pos;

        updateVisibleItemCount(mData.size());
        setSelectedItemPosition(mData, pos);
        updateRates();
        computeTextSize();
        requestLayout();
        invalidate();
    }

    public void updateDataPos(int pos) {
        if (pos < 0)
            return;
        if (pos >= mDataCC.size())
            pos = mDataCC.size() / 2 - 1;
        this.mCurrentItemPosition = pos;
        setSelectedItemPosition(mDataCC, pos);
        invalidate();
    }

    private void updateRates() {
        int num = 7;
        if (null == rates)
            rates = new float[num];
        if (null == textSizeRates)
            textSizeRates = new float[num];

        float rate = 0.0f;
        for (int i = 0; i < num; i++) {
            if (i > 0) {
                rate = (3 * (11 * i - (i - 1) * (i - 1))) / 22f;
                if (i == num - 1)
                    rate = (3 * (11 * i - (i - 1) * (i - 1)) + 4) / 22f;
            }
            rates[i] = rate;
            textSizeRates[i] = ((18 - 7 * i / 3) / 13f);
        }
    }

    public void setItemAlign(int align) {
        this.mItemAlign = align;
        invalidate();
    }

    public void setTurnToCenter(int turnToCenterX) {
        this.mTurnToCenterX = turnToCenterX;
        requestLayout();
        invalidate();
    }

    public void setSelectedItemPosition(List mDatas, int centerPos) {
        if (mData.size() > 0)
            mData.clear();
        mDataSize = isCyclic ? mDefaultVisibleNum : mDatas.size();
        int halfIndex = isCyclic ? 7 : Math.min(mVisibleHalfNum, mDefaultHalfNum);
//        LogUtil.i(TAG, "endIndex:" + endIndex + ",topPos:" + topPos + ",centerPos:" + centerPos + ",bottomPos:" + bottomPos + ",halfIndex:" + halfIndex);
//        LogUtil.i(TAG, "endIndex:" + endIndex + ",mVisibleHalfNum:" + mVisibleHalfNum + ",mDefaultHalfNum:" + mDefaultHalfNum + ",mDefaultVisibleNum:" + mDefaultVisibleNum);
        int bottom = 0;
        mData.add(0, mDatas.get(centerPos));
        if ((isCyclic && mDatas.size() < 13) || mDatas.size() >= 13) {
            for (int i = 1; i < halfIndex; i++) {
                bottom = centerPos - i;
                bottom = chooseIndex(bottom, mDatas.size());
                mData.add(mDatas.get(bottom));
            }

            for (int i = mDatas.size() - 1; i >= halfIndex; i--) {
                bottom = centerPos + mDatas.size() - i;
                bottom = chooseIndex(bottom, mDatas.size());
                mData.add(mDatas.get(bottom));
            }

            if (isCyclic)
                for (int i = mDatas.size(); i < 13; i++) {
                    bottom = i - halfIndex + 1 + centerPos;
                    bottom = chooseIndex(bottom, mDatas.size());
//                    LogUtil.e(TAG, "bottom:" + bottom + ",:" + mDatas.get(bottom));
                    mData.add(mDatas.get(bottom));
                }

        } else if (mDatas.size() < 13) {
            //下面個數比上面多
            for (int i = 1; i <= halfIndex; i++) {
                bottom = centerPos - i;
                bottom = chooseIndex(bottom, mDatas.size());
                mData.add(mDatas.get(bottom));
            }

            for (int i = mDatas.size() - 1; i > halfIndex; i--) {
                bottom = centerPos + mDatas.size() - i;
                bottom = chooseIndex(bottom, mDatas.size());
                mData.add(mDatas.get(bottom));
            }
        }
        invalidate();
    }

    public void setTextSize(float textSize) {
        this.mItemTextSize = textSize;
        invalidate();
    }

    public void setTextSelectColor(int colorRes) {
        this.mSelectedItemTextColor = colorRes;
        requestLayout();
        invalidate();
    }

    public int chooseIndex(int index, int dataSize) {
        if (index > dataSize - 1)
            index -= dataSize;
        if (index < 0)
            index += dataSize;
        return index;
    }

    public void setOnItemSelectedListener(OnItemSelectedListener onItemSelectedListener) {
        this.mOnItemSelectedListener = onItemSelectedListener;
    }

    public int getListSize() {
        if (null != mDataCC)
            return mDataCC.size();
        return 0;
    }

    /**
     * 滾輪選擇器Item項被選中時監聽接口
     */
    public interface OnItemSelectedListener {
        void onItemSelected(CircleWheelView view, Object data, int position);
    }
}

最後

上面demo地址
因爲夜晚還得寫一些規則,這篇就到這裏吧.