qq運動積分抽獎(Android自定義View如何實現QQ運動積分轉盤抽獎功能)

因為偶爾關注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 &#63; 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 &#63; 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 &#63; 1 : 0) &#63; 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 &#63; 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);  } }

第二步:繪制內部的圓角矩形,即卡片所在區域的背景

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 ,則說明點擊的是抽獎所在的小卡片區域。

看完上述內容,是不是對Android自定義View如何實現QQ運動積分轉盤抽獎功能有進一步的了解,如果還想學習更多內容,歡迎關注本站行業資訊頻道。