Android 自訂View實現QQ運動積分抽獎轉盤，androidview

Android 自訂View實現QQ運動積分抽獎轉盤，androidview

　　因為偶爾關注QQ運動， 看到QQ運動的積分抽獎介面比較有意思，所以就嘗試用自訂View實現了下，原本想通過開發人員選項查看下介面的一些資訊，後來發現積分抽獎介面是在WebView中展示的，應該是在H5頁面中用js代碼實現的，暫時不去管它了。

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

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

　　

 

　　 這裡我們只關注抽獎的轉盤，因為是沒有動畫效果，具體可以在自己的手機上查看下。這個抽獎的介面看似複雜，其實可以分為幾個部分

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

　　2, 內部圓角矩形

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

 

  　第一步我們要繼承View類， 如果需要自訂屬性則應該實現帶三個參數的構造方法，這裡將自訂View命名為 LotteryView

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方法中處理。

　　接著可以設定View的寬高資訊，這裡我們將View設定為正方形

　　

 @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