Android SurfaceView實戰 打造抽獎轉盤

Android SurfaceView實戰 打造抽獎轉盤

 

1、概述

今天給大家帶來SurfaceView的一個實戰案例，話說自訂View也是各種寫，一直沒有寫過SurfaceView，這個玩意是什麼東西？什麼時候用比較好呢？

可以看到SurfaceView也是繼承了View，但是我們並不需要去實現它的draw方法來繪製自己，為什麼呢？

因為它和View有一個很大的區別，View在UI線程去更新自己；而SurfaceView則在一個子線程中去更新自己；這也顯示出了它的優勢，當製作遊戲等需要不斷重新整理View時，因為是在子線程，避免了對UI線程的阻塞。

知道了優勢以後，你會想那麼不使用draw方法，哪來的canvas使用呢？

大家都記得更新View的時候draw方法提供了一個canvas，SurfaceView內部內嵌了一個專門用於繪製的Surface，而這個Surface中包含一個Canvas。

有了Canvas，我們如何擷取呢？

SurfaceView裡面有個getHolder方法，我們可以擷取一個SurfaceHolder。通過SurfaceHolder可以監聽SurfaceView的生命週期以及擷取Canvas對象。

 

2、一般的寫法

綜上所述，一般SurfaceView類中我們會這麼寫代碼：

 

public class SurfaceViewTemplate extends SurfaceView implements Callback, Runnable{private SurfaceHolder mHolder;/** * 與SurfaceHolder綁定的Canvas */private Canvas mCanvas;/** * 用於繪製的線程 */private Thread t;/** * 線程的控制開關 */private boolean isRunning;public LuckyPanView(Context context){this(context, null);}public LuckyPanView(Context context, AttributeSet attrs){super(context, attrs);mHolder = getHolder();mHolder.addCallback(this);// setZOrderOnTop(true);// 設定畫布 背景透明// mHolder.setFormat(PixelFormat.TRANSLUCENT);//設定可獲得焦點setFocusable(true);setFocusableInTouchMode(true);//設定常亮this.setKeepScreenOn(true);}@Overridepublic void surfaceCreated(SurfaceHolder holder){// 開啟線程isRunning = true;t = new Thread(this);t.start();}@Overridepublic void surfaceChanged(SurfaceHolder holder, int format, int width,int height){// TODO Auto-generated method stub}@Overridepublic void surfaceDestroyed(SurfaceHolder holder){// 通知關閉線程isRunning = false;}@Overridepublic void run(){// 不斷的進行drawwhile (isRunning){draw();}}private void draw(){try{// 獲得canvasmCanvas = mHolder.lockCanvas();if (mCanvas != null){// drawSomething..}} catch (Exception e){} finally{if (mCanvas != null)mHolder.unlockCanvasAndPost(mCanvas);}}}

結合上面我們的介紹，我們在構造中通過getHolder拿到SurfaceHolder對象，然後設定一個addCallback回調，去監聽SurfaceView的生命週期，生命週期有三個方法，分別為create,change,destory;我們一般在create裡面進行初始化的一些操作，然後開啟線程；在destroy裡面設定關閉線程；

 

所有的繪製流程都是線程的run方法裡面，可以看到我們的draw方法。

注意下，我們在draw裡面進行了try catch然後很多的判空，主要是因為，當使用者點擊back或者按下home鍵以後，surfaceview會被銷毀；

mHolder.lockCanvas();返回的就是null了，所以為了避免造成null 指標錯誤，我們各種判null，甚至還加了個try catch。

說了這麼多，竟然沒看到，這怎麼能行~~

 

3、

就這麼個效果，當然了模擬器錄製的效果肯定沒有真機上效果流暢。

結合上面我們給出的模版，我們需要改變的就是，在create回調裡面需要去初始化一些變數，在draw方法裡面去繪製我們的文本、圖片、扇形塊塊等等。整體架構沒有變化。

4、轉盤的製作
1、構造方法以及變數

 

public class LuckyPanView extends SurfaceView implements Callback, Runnable{private SurfaceHolder mHolder;/** * 與SurfaceHolder綁定的Canvas */private Canvas mCanvas;/** * 用於繪製的線程 */private Thread t;/** * 線程的控制開關 */private boolean isRunning;/** * 抽獎的文字 */private String[] mStrs = new String[] { 單反相機, IPAD, 恭喜發財, IPHONE,妹子一隻, 恭喜發財 };/** * 每個盤塊的顏色 */private int[] mColors = new int[] { 0xFFFFC300, 0xFFF17E01, 0xFFFFC300,0xFFF17E01, 0xFFFFC300, 0xFFF17E01 };/** * 與文字對應的圖片 */private int[] mImgs = new int[] { R.drawable.danfan, R.drawable.ipad,R.drawable.f040, R.drawable.iphone, R.drawable.meizi,R.drawable.f040 };/** * 與文字對應圖片的bitmap數組 */private Bitmap[] mImgsBitmap;/** * 盤塊的個數 */private int mItemCount = 6;/** * 繪製盤塊的範圍 */private RectF mRange = new RectF();/** * 圓的直徑 */private int mRadius;/** * 繪製盤快的畫筆 */private Paint mArcPaint;/** * 繪製文字的畫筆 */private Paint mTextPaint;/** * 滾動的速度 */private double mSpeed;private volatile float mStartAngle = 0;/** * 是否點擊了停止 */private boolean isShouldEnd;/** * 控制項的中心位置 */private int mCenter;/** * 控制項的padding，這裡我們認為4個padding的值一致，以paddingleft為標準 */private int mPadding;/** * 背景圖的bitmap */private Bitmap mBgBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.bg2);/** * 文字的大小 */private float mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());public LuckyPanView(Context context){this(context, null);}public LuckyPanView(Context context, AttributeSet attrs){super(context, attrs);mHolder = getHolder();mHolder.addCallback(this);// setZOrderOnTop(true);// 設定畫布 背景透明// mHolder.setFormat(PixelFormat.TRANSLUCENT);setFocusable(true);setFocusableInTouchMode(true);this.setKeepScreenOn(true);}

我們在構造中設定了Callback回調，然後通過成員變數，大家應該也能看得出來每個變數的作用，以及可能有的代碼快。

 

2、onMeasure

這裡我簡單重寫了一下onMeasure，使我們的控制項為正方形

 

/** * 設定控制項為正方形 */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width = Math.min(getMeasuredWidth(), getMeasuredHeight());// 擷取圓形的直徑mRadius = width - getPaddingLeft() - getPaddingRight();// padding值mPadding = getPaddingLeft();// 中心點mCenter = width / 2;setMeasuredDimension(width, width);}

並且為我們的mRadius和mCenter進行了賦值。

 

3、surfaceCreated

 

@Overridepublic void surfaceCreated(SurfaceHolder holder){// 初始化繪製圓弧的畫筆mArcPaint = new Paint();mArcPaint.setAntiAlias(true);mArcPaint.setDither(true);// 初始化繪製文字的畫筆mTextPaint = new Paint();mTextPaint.setColor(0xFFffffff);mTextPaint.setTextSize(mTextSize);// 圓弧的繪製範圍mRange = new RectF(getPaddingLeft(), getPaddingLeft(), mRadius+ getPaddingLeft(), mRadius + getPaddingLeft());// 初始化圖片mImgsBitmap = new Bitmap[mItemCount];for (int i = 0; i < mItemCount; i++){mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(),mImgs[i]);}// 開啟線程isRunning = true;t = new Thread(this);t.start();}

surfaceCreated我們初始化了繪製需要用到的變數，以及開啟了線程。

 

surfaceDestroyed中就一行代碼，順便貼出。

 

@Overridepublic void surfaceChanged(SurfaceHolder holder, int format, int width,int height){// TODO Auto-generated method stub}@Overridepublic void surfaceDestroyed(SurfaceHolder holder){// 通知關閉線程isRunning = false;}

可以猜到核心的代碼都在我們的線程的run裡面了。

 

4、draw

 

@Overridepublic void run(){// 不斷的進行drawwhile (isRunning){long start = System.currentTimeMillis();draw();long end = System.currentTimeMillis();try{if (end - start < 50){Thread.sleep(50 - (end - start));}} catch (InterruptedException e){e.printStackTrace();}}}private void draw(){try{// 獲得canvasmCanvas = mHolder.lockCanvas();if (mCanvas != null){// 繪製背景圖drawBg();/** * 繪製每個塊塊，每個塊塊上的文本，每個塊塊上的圖片 */float tmpAngle = mStartAngle;float sweepAngle = (float) (360 / mItemCount);for (int i = 0; i < mItemCount; i++){// 繪製快快mArcPaint.setColor(mColors[i]);mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,mArcPaint);// 繪製文本drawText(tmpAngle, sweepAngle, mStrs[i]);// 繪製IcondrawIcon(tmpAngle, i);tmpAngle += sweepAngle;}// 如果mSpeed不等於0，則相當於在滾動mStartAngle += mSpeed;// 點擊停止時，設定mSpeed為遞減，為0值轉盤停止if (isShouldEnd){mSpeed -= 1;}if (mSpeed <= 0){mSpeed = 0;isShouldEnd = false;}// 根據當前旋轉的mStartAngle計算當前滾動到的地區calInExactArea(mStartAngle);}} catch (Exception e){e.printStackTrace();} finally{if (mCanvas != null)mHolder.unlockCanvasAndPost(mCanvas);}}

可以看到我們的run裡面調用了draw，和上面模版一致。

 

使用通過 mHolder.lockCanvas();獲得我們的Canvas，然後就可以盡情的繪製了。

1、繪製背景drawBg();

 

/** * 根據當前旋轉的mStartAngle計算當前滾動到的地區 繪製背景，不重要，完全為了美觀 */private void drawBg(){mCanvas.drawColor(0xFFFFFFFF);mCanvas.drawBitmap(mBgBitmap, null, new Rect(mPadding / 2,mPadding / 2, getMeasuredWidth() - mPadding / 2,getMeasuredWidth() - mPadding / 2), null);}

這個比較簡單，其實就是繪製一個棕色的圓盤，在運行代碼前，你可以忽略掉，不影響。

 

接下來一個for迴圈，且角度每次遞增(360 / mItemCount);就是繪製每個盤塊以及盤塊上的字型和表徵圖了。

2、繪製盤塊

 

// 繪製快快mArcPaint.setColor(mColors[i]);mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,mArcPaint);

這個比較簡單了~~

 

3、繪製文本

 

/** * 繪製文本 *  * @param rect * @param startAngle * @param sweepAngle * @param string */private void drawText(float startAngle, float sweepAngle, String string){Path path = new Path();path.addArc(mRange, startAngle, sweepAngle);float textWidth = mTextPaint.measureText(string);// 利用水平位移讓文字置中float hOffset = (float) (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);// 水平位移float vOffset = mRadius / 2 / 6;// 垂直位移mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);}

利用Path，添加入一個Arc，然後設定水平和垂直的位移量，垂直位移量就是當前Arc朝著圓心移動的距離；水平位移量，就是順時針去旋轉，

 

我們位移了 (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);目的是為了文字置中。mRadius * Math.PI 是圓的周長；周長/ mItemCount / 2 是每個Arc的一半的長度；

拿Arc一半的長度減去textWidth / 2，就把文字設定置中了。

最後，用過path去繪製文本即可。

湊合看個圖：

本來字的位置在外圍的橫線處，我們希望到內部的橫線位置，需要調節水平和垂直的位移；水平和垂直的平移方向為綠色的箭頭；大概就這樣。

4、繪製映像

 

/** * 繪製圖片 *  * @param startAngle * @param sweepAngle * @param i */private void drawIcon(float startAngle, int i){// 設定圖片的寬度為直徑的1/8int imgWidth = mRadius / 8;float angle = (float) ((30 + startAngle) * (Math.PI / 180));int x = (int) (mCenter + mRadius / 2 / 2 * Math.cos(angle));int y = (int) (mCenter + mRadius / 2 / 2 * Math.sin(angle));// 確定繪製圖片的位置Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth/ 2, y + imgWidth / 2);mCanvas.drawBitmap(mImgsBitmap[i], null, rect, null);}

繪製圖片主要就是圖片的中心的確定，這裡我們固定圖片大小為直徑的1/8；至於圓心的確定，看：

 

我們需要圖片的中心，為每個塊塊的中間：

我們希望圖片在中間的那個點，點距離圓心即center的距離為r = mRadius /2 / 2 ;

綠線與水平線的夾角為a = 360 / count / 2 ，本圖為30 ；

於是那個點的座標為：(mCenter + r * cos a , mCenter + r * sina );

其他的點同理，唯一變化就是a 的角度 ，在計算時需要把a轉化為弧度制。

集合圖和上面的代碼好好理解下。

到此基本我們的圓盤就繪製好了。

 

5、讓圓盤關滾一會

怎麼讓圓盤滾動呢？如果你足夠細心，應該發現我們的draw裡面有這麼一句：

mStartAngle += mSpeed;

其實每次draw都會讓mStartAngle += mSpeed;看起來就是滾動了。

那麼滾動，其實就是去設定mSpeed即可。

嗯，是的，如果單純想滾動，只要去設定mSpeed就行了；但是，這樣就行了麼，就拿我們這個獎項來說，你敢1/6的機率拿到大獎麼，你個IT公司讓人抽到妹子一隻咋辦。

所以我們還要來控制使用者抽獎的機率，這裡我們讓使用者中獎的產品在開始滾的時候就決定了。是不是玩轉盤的時候很傻很天真，以為可以中大獎。

 

/** * 點擊開始旋轉 *  * @param luckyIndex */public void luckyStart(int luckyIndex){// 每項角度大小float angle = (float) (360 / mItemCount);// 中獎角度範圍（因為指標向上，所以水平第一項旋轉到指標指向，需要旋轉210-270；）float from = 270 - (luckyIndex + 1) * angle;float to = from + angle;// 停下來時旋轉的距離float targetFrom = 4 * 360 + from;/** * 

* (v1 + 0) * (v1+1) / 2 = target ; * v1*v1 + v1 - 2target = 0 ; * v1=-1+(1*1 + 8 *1 * target)/2; * 

*/ float v1 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetFrom) - 1) / 2; float targetTo = 4 * 360 + to; float v2 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetTo) - 1) / 2; mSpeed = (float) (v1 + Math.random() * (v2 - v1)); isShouldEnd = false; }
當外部調用luckyStart即可以旋轉，index為停下來的位置，水平位置開始算，即0為相機，1為IPAD。

 

這裡又開始牽扯數學了：

 

float from = 270 - (luckyIndex + 1) * angle;float to = from + angle;

這個from , to 比較簡單，就是確定中將範圍，比如我index=0，則只要轉了210-270之間，我們的相機都會被垂直向上的指標指向。

 

那麼這個targetFrom是幹嘛的，是決定你點擊停止的時候轉多長距離，這裡我們設定為4圈多一點，這個多一點就是上面的from和to。

最麻煩就是v1的計算了，既然我們希望決定停下裡的位置，那麼這個速度就是我們去計算出來的，怎麼算呢？

我們旋轉的距離有了targetFrom，然後我們點擊的時候mSpeed -= 1;也就是說速度是遞減的，每次減去1。

遞減說明是個等差數列，等差數列的和是targetFrom。

等差數列的求和公式大家記得否：（首項+末項）*（項數）/ 2

我們的首項是v1 ，末項肯定是0 ， 項數 （v1/ 1 + 1）加個1為向上進一位。

那麼式子就是： （v1 + 0 ) * (v1 / 1 +1) /2 = targetFrom ; 只有v1是未知數，一元二次方程的解，大家還記得否，不記得我來寫 :

於是我們的v1就是v1=-1+(1*1 + 8 *1 * target)/2;

好了，尼瑪求出來v1，為啥我們代碼還有個v2，這是因為v1停下來永遠在某個塊塊的邊界，我們屌絲又不傻，你每次停一個位置，都知道你造假。

那麼我們就求個v2，這個停下塊塊的最後位置。

最後我們的速度為v1，v2間的一個隨機數，也就是在某個塊塊中間任意位置。這樣就可以讓你覺得每次都在這個塊塊，但是指標位置還不同。

好了，這裡就是最複雜的地方了，如果你比較善良，不想內建這個功能，那就隨便設定個速度吧。

6、讓圓盤停止滾動

別忘了，我們5計算那麼多，都是從水平那個距離為0開始計算的，於是我們的停止代碼是這樣的：

 

public void luckyEnd(){mStartAngle = 0;isShouldEnd = true;}

最後貼出我們的主布局檔案和Activity

 

7、布局檔案和MainActivity

 

package com.zhy.demo_zhy_06_choujiangzhuanpan;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import com.zhy.view.LuckyPanView;public class MainActivity extends Activity{private LuckyPanView mLuckyPanView;private ImageView mStartBtn;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLuckyPanView = (LuckyPanView) findViewById(R.id.id_luckypan);mStartBtn = (ImageView) findViewById(R.id.id_start_btn);mStartBtn.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){if (!mLuckyPanView.isStart()){mStartBtn.setImageResource(R.drawable.stop);mLuckyPanView.luckyStart(1);} else{if (!mLuckyPanView.isShouldEnd()){mStartBtn.setImageResource(R.drawable.start);mLuckyPanView.luckyEnd();}}}});}}

終於寫完了，數學把我這類渣渣計算的不行不行的。ps：摳圖真噁心，愛歌撒時候給我傳遞些藝術的造詣和ps的技術呢。。。。

 

好了，我們的按鈕是用布局檔案加上的，方便大家自己定製按鈕~~~並且大家的獎項，顏色，以及圖片可以自己定義，這個不用說了吧，修改count，以及那幾個數組就行。

有可能的話，還會寫一篇SurfaceView做遊戲的博文，不過案例可能會在網上進行尋找，哈。

 

 

 

源碼點擊下載

發現任何bug歡迎留言。

 

 

 

 

----------------------------------------------------------------------------------------------------------

 

博主部分視頻已經上線，如果你不喜歡枯燥的文本，請猛戳（初錄，期待您的支援）：

1、高仿5.2.1主介面及訊息提醒

2、高仿QQ5.0側滑

3、Android智能機器人“小慕”的實現