Android SurfaceView實戰打造抽獎轉盤

時間 2019-11-13

標籤 android surfaceview 實戰打造抽獎轉盤欄目 Android 简体版

原文原文鏈接

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/41722441 ，本文出自：【張鴻洋的博客】html

一、概述

今天給你們帶來SurfaceView的一個實戰案例，話說自定義View也是各類寫，一直沒有寫過SurfaceView，這個玩意是什麼東西？何時用比較好呢？java

能夠看到SurfaceView也是繼承了View，可是咱們並不須要去實現它的draw方法來繪製本身，爲何呢？android

由於它和View有一個很大的區別，View在UI線程去更新本身；而SurfaceView則在一個子線程中去更新本身；這也顯示出了它的優點，當製做遊戲等須要不斷刷新View時，由於是在子線程，避免了對UI線程的阻塞。canvas

知道了優點之後，你會想那麼不使用draw方法，哪來的canvas使用呢？數組

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

有了Canvas，咱們如何獲取呢？架構

SurfaceView裏面有個getHolder方法，咱們能夠獲取一個SurfaceHolder。經過SurfaceHolder能夠監聽SurfaceView的生命週期以及獲取Canvas對象。app

二、通常的寫法

綜上所述，通常SurfaceView類中咱們會這麼寫代碼：dom

public class SurfaceViewTemplate extends SurfaceView implements Callback, Runnable
{

	private SurfaceHolder mHolder;
	/**
	 * 與SurfaceHolder綁定的Canvas
	 */
	private Canvas mCanvas;
	/**
	 * 用於繪製的線程
	 */
	private Thread t;
	/**
	 * 線程的控制開關
	 */
	private boolean isRunning;

	public SurfaceViewTemplate(Context context)
	{
		this(context, null);
	}

	public SurfaceViewTemplate(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);

	}

	@Override
	public void surfaceCreated(SurfaceHolder holder)
	{

		// 開啓線程
		isRunning = true;
		t = new Thread(this);
		t.start();
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height)
	{
		// TODO Auto-generated method stub

	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder)
	{
		// 通知關閉線程
		isRunning = false;
	}

	@Override
	public void run()
	{
		// 不斷的進行draw
		while (isRunning)
		{
			draw();
		}

	}

	private void draw()
	{
		try
		{
			// 得到canvas
			mCanvas = 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方法。iphone

注意下，咱們在draw裏面進行了try catch而後不少的判空，主要是由於，當用戶點擊back或者按下home鍵之後，surfaceview會被銷燬；

mHolder.lockCanvas();返回的就是null了，因此爲了不形成空指針錯誤，咱們各類判null，甚至還加了個try catch。

說了這麼多，居然沒看到效果圖，這怎麼能行~~

三、效果圖

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

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

四、轉盤的製做

一、構造方法以及變量

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回調，而後經過成員變量，你們應該也能看得出來每一個變量的做用，以及可能有的代碼快。

二、onMeasure

這裏我簡單重寫了一下onMeasure，使咱們的控件爲正方形

/**
	 * 設置控件爲正方形
	 */
	@Override
	protected 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進行了賦值。

三、surfaceCreated

@Override
	public 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中就一行代碼，順便貼出。

@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height)
	{
		// TODO Auto-generated method stub

	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder)
	{
		// 通知關閉線程
		isRunning = false;
	}

能夠猜到核心的代碼都在咱們的線程的run裏面了。

四、draw

@Override
	public void run()
	{
		// 不斷的進行draw
		while (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
		{
			// 得到canvas
			mCanvas = 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]);
					// 繪製Icon
					drawIcon(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，而後就能夠盡情的繪製了。

一、繪製背景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);就是繪製每一個盤塊以及盤塊上的字體和圖標了。

二、繪製盤塊

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

這個比較簡單了~~

三、繪製文本

/**
	 * 繪製文本
	 * 
	 * @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去繪製文本便可。

湊合看個圖：

原本字的位置在外圍的橫線處，咱們但願到內部的橫線位置，須要調節水平和垂直的偏移；水平和垂直的平移方向爲綠色的箭頭；大概就這樣。

四、繪製圖像

/**
	 * 繪製圖片
	 * 
	 * @param startAngle
	 * @param sweepAngle
	 * @param i
	 */
	private void drawIcon(float startAngle, int i)
	{
		// 設置圖片的寬度爲直徑的1/8
		int 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轉化爲弧度制。

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

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

五、讓圓盤先滾一會

怎麼讓圓盤滾動呢？若是你足夠細心，應該發現咱們的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;
		/**
		 * <pre>
		 *  (v1 + 0) * (v1+1) / 2 = target ;
		 *  v1*v1 + v1 - 2target = 0 ;
		 *  v1=-1+(1*1 + 8 *1 * target)/2;
		 * </pre>
		 */
		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間的一個隨機數，也就是在某個塊塊中間任意位置。這樣就可讓你以爲每次都在這個塊塊，可是指針位置還不一樣。

好了，這裏就是最複雜的地方了，若是你比較善良，不想內置這個功能，那就隨便設置個速度吧。

六、讓圓盤中止滾動

別忘了，咱們5計算那麼多，都是從水平那個距離爲0開始計算的，因而咱們的中止代碼是這樣的：

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

最後貼出咱們的主佈局文件和Activity

七、佈局文件和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;

	@Override
	protected 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()
		{
			@Override
			public 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();
					}
				}
			}
		});
	}

}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#ffffff"
    android:layout_height="match_parent" >

    <com.zhy.view.LuckyPanView
        android:id="@+id/id_luckypan"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:padding="30dp" />
    
    <ImageView 
        android:id="@+id/id_start_btn"
        android:src="@drawable/start"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />


</RelativeLayout>

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

好了，咱們的按鈕是用佈局文件加上的，方便你們本身定製按鈕~~~而且你們的獎項，顏色，以及圖片能夠本身定義，這個不用說了吧，修改count，以及那幾個數組就行。

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

源碼點擊下載

發現任何bug歡迎留言。

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

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

一、Android 自定義控件實戰電商活動中的刮刮卡

二、Android自定義控件實戰打造Android流式佈局和熱門標籤

三、Android智能機器人「小慕」的實現

四、高仿QQ5.0側滑

五、高仿微信5.2.1主界面及消息提醒