Android 自定義View實現QQ運動積分抽獎轉盤

時間 2019-11-11

標籤 android 自定義 view 實現運動積分抽獎轉盤欄目 Android 简体版

原文原文鏈接

　　由於偶爾關注QQ運動，看到QQ運動的積分抽獎界面比較有意思，因此就嘗試用自定義View實現了下，本來想經過開發者選項查看下界面的一些信息，後來發現積分抽獎界面是在WebView中展現的，應該是在H5頁面中用js代碼實現的，暫時不去管它了。git

　　這裏的自定義View針對的是繼承自View的狀況，你能夠將Canvas想象爲畫板， Paint爲畫筆，自定義View的過程和在畫板上用畫筆做畫其實相似，想象在畫板上做畫的過程，你要畫一個多大圖形（對應View的測量 onMeasure方法），你要畫什麼樣的圖形，好比圓形方形等等（對應View的onDraw方法），在掌握了View的一些基礎概念（位置參數、觸摸事件、滑動），測量模式、事件分發機制、繪製流程等知識後，自定義View的時候就不以爲複雜了。github

　　無論是多麼複雜的View，其內部基本均可以拆分至一個個小單元，好比以下的QQ運動積分抽獎畫面，（QQ --> 動態 --> 運動 --> 我 --> 積分）canvas

　　這裏咱們只關注抽獎的轉盤，由於是截圖沒有動畫效果，具體能夠在本身的手機上查看下。這個抽獎的界面看似複雜，其實能夠分爲幾個部分ide

　　1. 最外層圓環，其中有小圓圈閃動動畫

　　2, 內部圓角矩形this

　　3. 內部圓角卡片（包含一個圖片或說明文字）spa

　第一步咱們要繼承View類，若是須要自定義屬性則應該實現帶三個參數的構造方法，這裏將自定義View命名爲 LotteryView3d

public LotteryView(Context context) {
        this(context, null);
    }

    public LotteryView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LotteryView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

　　在init方法中能夠作一些初始化的操做，好比須要用的顏色值，畫筆Paint，寬高信息等，若是有自定義屬性，也能夠在init方法中處理。rest

　　接着能夠設定View的寬高信息，這裏咱們將View設置爲正方形code

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(mSelfTotalWidth, mSelfTotalWidth);
    }

　　調用setMeasureDimension方法，寬高都設置爲 mSelfTotalWidth。這裏咱們寬高是限定的值，因此不須要的處理不一樣測量模式的狀況，若是是其餘自定義View要支持wrap_content屬性，須要在onMeasure方法中自行處理

　　第一步：繪製外層帶圓角的圓環

/** 外層帶圓角矩形圓環 */
    private void drawOuterRoundCircle(Canvas canvas) {
        canvas.save();
        canvas.clipRect(
                mOuterCircleWidth + getPaddingLeft(),
                mOuterCircleWidth + getPaddingTop(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(),
                Region.Op.DIFFERENCE);

        canvas.drawRoundRect(
                getPaddingLeft(),
                getPaddingTop(),
                mSelfTotalWidth - getPaddingRight(),
                mSelfTotalWidth - getPaddingBottom(),
                18, 18, mOuterCirclePaint);
        canvas.restore();
    }

　　繪製外層圓環中的小圓圈

private void drawOuterDecorateSmallCircle(Canvas canvas) {
        int result = mInvalidateCircleCount % 2;

        // top
        int x = 0, y = 0;
        int sideSize = mSelfTotalWidth - mOuterCircleWidth * 2 - getPaddingLeft() - getPaddingRight(); // 除去最外邊圓環後的邊長
        for (int i = 0; i < 10; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
            y = (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // bottom
        for (int i = 0; i < 10; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
            y = mSelfTotalWidth - mOuterCircleWidth + (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius - getPaddingBottom();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // left
        for(int i = 0; i < 9; i++) {
            mSmallCirclePaint.setColor(i % 2 == (result == 0 ? 1 : 0) ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth / 2 + getPaddingLeft();
            y =  mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // right
        for(int i = 0; i < 9; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mSelfTotalWidth - mOuterCircleWidth / 2 - getPaddingRight();
            y =  mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }
    }

View Code

　　第二步：繪製內部的圓角矩形，即卡片所在區域的背景

private void drawInnerBackground(Canvas canvas) {
        canvas.drawRect(mOuterCircleWidth + getPaddingLeft(), mOuterCircleWidth + getPaddingTop(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(), mInnerPaint);
    }

　　第三步：繪製內部小卡片

private void drawInnerCards(Canvas canvas) {
        int left = 0, top = 0, right = 0, bottom = 0;
        int spaceNum = 0;
        for(int i = 0 ; i < 9 ; i++) {
            spaceNum = i % 3 + 1;
            left = mOuterCircleWidth + mInnerCardWidth * (i%3) + mInnerCardSpace * spaceNum + getPaddingLeft();
            top = mOuterCircleWidth + mInnerCardWidth * (i/3) +mInnerCardSpace * (i/3 + 1) + getPaddingTop();
            right = left + mInnerCardWidth;
            bottom = top + mInnerCardWidth;
            if(!mHadInitial) {
                mCardPositionInfoList.add(new Pair(new Pair(left, right), new Pair(top, bottom)));
            }
            drawInnerRoundCard(canvas, left, top, right, bottom, i);
        }
        mHadInitial = true;
    }

　　所有繪製完成後，在onTouchEvent中處理點擊事件便可，如何斷定咱們點擊的是抽獎的區域，這裏使用對比位置信息的方法，

　　以下，

private int getTouchPositionInCardList(int x, int y) {
        if(mCardPositionInfoList != null) {
            int index = 1;
            for (Pair<Pair<Integer, Integer>,Pair<Integer, Integer>> pair : mCardPositionInfoList) {
                if(x > pair.first.first && x < pair.first.second && y > pair.second.first && y < pair.second.second) {
                    return index;
                }
                index++;
            }
        }
        return 0;
    }

　　將每個小卡片的座標信息（left，top， right， bottom）信息，保存在 ArrayList<Pair<Pair<Integer, Integer>,Pair<Integer, Integer>>> mCardPosttionInfoList 中，當點擊VIew時獲取到點擊的x y 座標和

list中保存的座標信息作對比，若是index == 5 ，則說明點擊的是抽獎所在的小卡片區域。

　　代碼託管在： https://github.com/aquarius520/LotteryView 歡迎Star 、Fork