快捷導(dǎo)航

Android自定義View實(shí)現(xiàn)QQ運(yùn)動(dòng)積分轉(zhuǎn)盤(pán)抽獎(jiǎng)功能

更新時(shí)間：2020年04月18日 12:57:08 作者：sphere

這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)QQ運(yùn)動(dòng)積分轉(zhuǎn)盤(pán)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

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

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

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

第一步：我們要繼承View類(lèi)，如果需要自定義屬性則應(yīng)該實(shí)現(xiàn)帶三個(gè)參數(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方法中可以做一些初始化的操作，比如需要用的顏色值，畫(huà)筆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。這里我們寬高是限定的值，所以不需要的處理不同測(cè)量模式的情況，如果是其他自定義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)后的邊長(zhǎng)
  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中處理點(diǎn)擊事件即可，如何判定我們點(diǎn)擊的是抽獎(jiǎng)的區(qū)域，這里使用對(duì)比位置信息的方法，如下

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

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

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

代碼托管在： https://github.com/aquarius520/LotteryView 歡迎star fork

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: