溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Android自定義View如何實現(xiàn)QQ運動積分轉(zhuǎn)盤抽獎功能，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
因為偶爾關(guān)注QQ運動， 看到QQ運動的積分抽獎界面比較有意思，所以就嘗試用自定義View實現(xiàn)了下，原本想通過開發(fā)者選項查看下界面的一些信息，后來發(fā)現(xiàn)積分抽獎界面是在WebView中展示的，應(yīng)該是在H5頁面中用js代碼實現(xiàn)的，暫時不去管它了。
這里的自定義View針對的是繼承自View的情況，你可以將Canvas想象為畫板， Paint為畫筆，自定義View的過程和在畫板上用畫筆作畫其實類似，想象在畫板上作畫的過程，你要畫一個多大圖形（對應(yīng)View的測量 onMeasure方法），你要畫什么樣的圖形，比如圓形方形等等（對應(yīng)View的onDraw方法），在掌握了View的一些基礎(chǔ)概念（位置參數(shù)、觸摸事件、滑動），測量模式、事件分發(fā)機制、繪制流程等知識后，自定義View的時候就不覺得復(fù)雜了。
不管是多么復(fù)雜的View，其內(nèi)部基本都可以拆分至一個個小單元，比如如下的QQ運動積分抽獎畫面，（QQ --> 動態(tài) --> 運動 --> 我 --> 積分）
這里我們只關(guān)注抽獎的轉(zhuǎn)盤，因為是截圖沒有動畫效果，具體可以在自己的手機上查看下。這個抽獎的界面看似復(fù)雜，其實可以分為幾個部分
1. 最外層圓環(huán)，其中有小圓圈閃動
2, 內(nèi)部圓角矩形
3. 內(nèi)部圓角卡片（包含一個圖片或說明文字）
第一步：我們要繼承View類， 如果需要自定義屬性則應(yīng)該實現(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è)置為正方形
@Override
protected 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;
// top
int 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);
}
// 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);
}
}第二步：繪制內(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中處理點擊事件即可，如何判定我們點擊的是抽獎的區(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;
}將每一個小卡片的坐標信息（left，top， right， bottom）信息，保存在 ArrayList<Pair<Pair<Integer, Integer>,Pair<Integer, Integer>>> mCardPosttionInfoList 中， 當點擊VIew時獲取到點擊的x y 坐標和
list中保存的坐標信息做對比，如果index == 5 ，則說明點擊的是抽獎所在的小卡片區(qū)域。
看完上述內(nèi)容，是不是對Android自定義View如何實現(xiàn)QQ運動積分轉(zhuǎn)盤抽獎功能有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼