因?yàn)榕紶栮P(guān)注QQ運(yùn)動， 看到QQ運(yùn)動的積分抽獎界面比較有意思，所以就嘗試用自定義View實(shí)現(xiàn)了下，原本想通過開發(fā)者選項(xiàng)查看下界面的一些信息，后來發(fā)現(xiàn)積分抽獎界面是在WebView中展示的，應(yīng)該是在H5頁面中用js代碼實(shí)現(xiàn)的，暫時不去管它了。

　　這里的自定義View針對的是繼承自View的情況，你可以將Canvas想象為畫板，?Paint為畫筆，自定義View的過程和在畫板上用畫筆作畫其實(shí)類似，想象在畫板上作畫的過程，你要畫一個多大圖形（對應(yīng)View的測量?onMeasure方法），你要畫什么樣的圖形，比如圓形方形等等（對應(yīng)View的onDraw方法），在掌握了View的一些基礎(chǔ)概念（位置參數(shù)、觸摸事件、滑動），測量模式、事件分發(fā)機(jī)制、繪制流程等知識后，自定義View的時候就不覺得復(fù)雜了。

　　不管是多么復(fù)雜的View，其內(nèi)部基本都可以拆分至一個個小單元，比如如下的QQ運(yùn)動積分抽獎畫面，（QQ -->?動態(tài) -->?運(yùn)動 -->?我 -->?積分）

　　

?

　　?這里我們只關(guān)注抽獎的轉(zhuǎn)盤，因?yàn)槭墙貓D沒有動畫效果，具體可以在自己的手機(jī)上查看下。這個抽獎的界面看似復(fù)雜，其實(shí)可以分為幾個部分

　　1.?最外層圓環(huán)，其中有小圓圈閃動

　　2,?內(nèi)部圓角矩形

　　3.? 內(nèi)部圓角卡片（包含一個圖片或說明文字）

?

??　第一步我們要繼承View類，?如果需要自定義屬性則應(yīng)該實(shí)現(xiàn)帶三個參數(shù)的構(gòu)造方法，這里將自定義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方法中處理。

　　接著可以設(shè)定View的寬高信息，這里我們將View設(shè)置為正方形

　　

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

　　調(diào)用setMeasureDimension方法，寬高都設(shè)置為 mSelfTotalWidth。這里我們寬高是限定的值，所以不需要的處理不同測量模式的情況，如果是其他自定義View要支持wrap_content屬性，需要在onMeasure方法中自行處理

　　第一步 ：繪制外層帶圓角的圓環(huán)

　　

/** 外層帶圓角矩形圓環(huán) */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();}

　　

　　繪制外層圓環(huán)中的小圓圈

private void drawOuterDecorateSmallCircle(Canvas canvas) {int result = mInvalidateCircleCount % 2;// topint x = 0, y = 0;int sideSize = mSelfTotalWidth - mOuterCircleWidth * 2 - getPaddingLeft() - getPaddingRight(); // 除去最外邊圓環(huán)后的邊長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);}// bottomfor (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);}// leftfor(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);}// rightfor(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

　　

　　第二步：繪制內(nèi)部的圓角矩形，即卡片所在區(qū)域的背景

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

?

　　第三步：?繪制內(nèi)部小卡片

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中處理點(diǎn)擊事件即可，如何判定我們點(diǎn)擊的是抽獎的區(qū)域，這里使用對比位置信息的方法，

　　如下，

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;}

　　將每一個小卡片的坐標(biāo)信息（left，top，?right，?bottom）信息，保存在?ArrayList<Pair<Pair<Integer, Integer>,Pair<Integer, Integer>>>??mCardPosttionInfoList 中，?當(dāng)點(diǎn)擊VIew時獲取到點(diǎn)擊的x?y?坐標(biāo)和

list中保存的坐標(biāo)信息做對比，如果index == 5 ，則說明點(diǎn)擊的是抽獎所在的小卡片區(qū)域。

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/sphere/p/7736807.html

總結(jié)

以上是生活随笔為你收集整理的Android 自定义View实现QQ运动积分抽奖转盘的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。