Android SurfaceView实战 打造抽奖转盘

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/41722441 ，本文出自：【张鸿洋的博客】

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类中我们会这么写代码：

1. public class SurfaceViewTemplate extends SurfaceView implements Callback, Runnable
2. {
3. private SurfaceHolder mHolder;
4. /**
5. * 与SurfaceHolder绑定的Canvas
6. */
7. private Canvas mCanvas;
8. /**
9. * 用于绘制的线程
10. */
11. private Thread t;
12. /**
13. * 线程的控制开关
14. */
15. private boolean isRunning;
16. public SurfaceViewTemplate(Context context)
17. {
18. this(context, null);
19. }
20. public SurfaceViewTemplate(Context context, AttributeSet attrs)
21. {
22. super(context, attrs);
23. mHolder = getHolder();
24. mHolder.addCallback(this);
25. // setZOrderOnTop(true);// 设置画布 背景透明
26. // mHolder.setFormat(PixelFormat.TRANSLUCENT);
27. //设置可获得焦点
28. setFocusable(true);
29. setFocusableInTouchMode(true);
30. //设置常亮
31. this.setKeepScreenOn(true);
32. }
33. @Override
34. public void surfaceCreated(SurfaceHolder holder)
35. {
36. // 开启线程
37. isRunning = true;
38. t = new Thread(this);
39. t.start();
40. }
41. @Override
42. public void surfaceChanged(SurfaceHolder holder, int format, int width,
43. int height)
44. {
45. // TODO Auto-generated method stub
46. }
47. @Override
48. public void surfaceDestroyed(SurfaceHolder holder)
49. {
50. // 通知关闭线程
51. isRunning = false;
52. }
53. @Override
54. public void run()
55. {
56. // 不断的进行draw
57. while (isRunning)
58. {
59. draw();
60. }
61. }
62. private void draw()
63. {
64. try
65. {
66. // 获得canvas
67. mCanvas = mHolder.lockCanvas();
68. if (mCanvas != null)
69. {
70. // drawSomething..
71. }
72. } catch (Exception e)
73. {
74. } finally
75. {
76. if (mCanvas != null)
77. mHolder.unlockCanvasAndPost(mCanvas);
78. }
79. }
80. }

结合上面我们的介绍，我们在构造中通过getHolder拿到SurfaceHolder对象，然后设置一个addCallback回调，去监听SurfaceView的生命周期，生命周期有三个方法，分别为create,change,destory;我们一般在create里面进行初始化的一些操作，然后开启线程；在destroy里面设置关闭线程；

所有的绘制流程都是线程的run方法里面，可以看到我们的draw方法。

注意下，我们在draw里面进行了try catch然后很多的判空，主要是因为，当用户点击back或者按下home键以后，surfaceview会被销毁；

mHolder.lockCanvas();返回的就是null了，所以为了避免造成空指针错误，我们各种判null，甚至还加了个try catch。

说了这么多，竟然没看到效果图，这怎么能行~~

3、效果图

就这么个效果，当然了模拟器录制的效果肯定没有真机上效果流畅。

结合上面我们给出的模版，我们需要改变的就是，在create回调里面需要去初始化一些变量，在draw方法里面去绘制我们的文本、图片、扇形块块等等。整体架构没有变化。

4、转盘的制作

 

1、构造方法以及变量

1. public class LuckyPanView extends SurfaceView implements Callback, Runnable
2. {
3. private SurfaceHolder mHolder;
4. /**
5. * 与SurfaceHolder绑定的Canvas
6. */
7. private Canvas mCanvas;
8. /**
9. * 用于绘制的线程
10. */
11. private Thread t;
12. /**
13. * 线程的控制开关
14. */
15. private boolean isRunning;
16. /**
17. * 抽奖的文字
18. */
19. private String[] mStrs = new String[] { "单反相机", "IPAD", "恭喜发财", "IPHONE",
20. "妹子一只", "恭喜发财" };
21. /**
22. * 每个盘块的颜色
23. */
24. private int[] mColors = new int[] { 0xFFFFC300, 0xFFF17E01, 0xFFFFC300,
25. 0xFFF17E01, 0xFFFFC300, 0xFFF17E01 };
26. /**
27. * 与文字对应的图片
28. */
29. private int[] mImgs = new int[] { R.drawable.danfan, R.drawable.ipad,
30. R.drawable.f040, R.drawable.iphone, R.drawable.meizi,
31. R.drawable.f040 };
32. /**
33. * 与文字对应图片的bitmap数组
34. */
35. private Bitmap[] mImgsBitmap;
36. /**
37. * 盘块的个数
38. */
39. private int mItemCount = 6;
40. /**
41. * 绘制盘块的范围
42. */
43. private RectF mRange = new RectF();
44. /**
45. * 圆的直径
46. */
47. private int mRadius;
48. /**
49. * 绘制盘快的画笔
50. */
51. private Paint mArcPaint;
52. /**
53. * 绘制文字的画笔
54. */
55. private Paint mTextPaint;
56. /**
57. * 滚动的速度
58. */
59. private double mSpeed;
60. private volatile float mStartAngle = 0;
61. /**
62. * 是否点击了停止
63. */
64. private boolean isShouldEnd;
65. /**
66. * 控件的中心位置
67. */
68. private int mCenter;
69. /**
70. * 控件的padding，这里我们认为4个padding的值一致，以paddingleft为标准
71. */
72. private int mPadding;
73. /**
74. * 背景图的bitmap
75. */
76. private Bitmap mBgBitmap = BitmapFactory.decodeResource(getResources(),
77. R.drawable.bg2);
78. /**
79. * 文字的大小
80. */
81. private float mTextSize = TypedValue.applyDimension(
82. TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());
83. public LuckyPanView(Context context)
84. {
85. this(context, null);
86. }
87. public LuckyPanView(Context context, AttributeSet attrs)
88. {
89. super(context, attrs);
90. mHolder = getHolder();
91. mHolder.addCallback(this);
92. // setZOrderOnTop(true);// 设置画布 背景透明
93. // mHolder.setFormat(PixelFormat.TRANSLUCENT);
94. setFocusable(true);
95. setFocusableInTouchMode(true);
96. this.setKeepScreenOn(true);
97. }

我们在构造中设置了Callback回调，然后通过成员变量，大家应该也能看得出来每个变量的作用，以及可能有的代码快。

2、onMeasure

这里我简单重写了一下onMeasure，使我们的控件为正方形

1. /**
2. * 设置控件为正方形
3. */
4. @Override
5. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
6. {
7. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
8. int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
9. // 获取圆形的直径
10. mRadius = width - getPaddingLeft() - getPaddingRight();
11. // padding值
12. mPadding = getPaddingLeft();
13. // 中心点
14. mCenter = width / 2;
15. setMeasuredDimension(width, width);
16. }

并且为我们的mRadius和mCenter进行了赋值。

3、surfaceCreated

1. @Override
2. public void surfaceCreated(SurfaceHolder holder)
3. {
4. // 初始化绘制圆弧的画笔
5. mArcPaint = new Paint();
6. mArcPaint.setAntiAlias(true);
7. mArcPaint.setDither(true);
8. // 初始化绘制文字的画笔
9. mTextPaint = new Paint();
10. mTextPaint.setColor(0xFFffffff);
11. mTextPaint.setTextSize(mTextSize);
12. // 圆弧的绘制范围
13. mRange = new RectF(getPaddingLeft(), getPaddingLeft(), mRadius
14. + getPaddingLeft(), mRadius + getPaddingLeft());
15. // 初始化图片
16. mImgsBitmap = new Bitmap[mItemCount];
17. for (int i = 0; i < mItemCount; i++)
18. {
19. mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(),
20. mImgs[i]);
21. }
22. // 开启线程
23. isRunning = true;
24. t = new Thread(this);
25. t.start();
26. }

surfaceCreated我们初始化了绘制需要用到的变量，以及开启了线程。

surfaceDestroyed中就一行代码，顺便贴出。

1. @Override
2. public void surfaceChanged(SurfaceHolder holder, int format, int width,
3. int height)
4. {
5. // TODO Auto-generated method stub
6. }
7. @Override
8. public void surfaceDestroyed(SurfaceHolder holder)
9. {
10. // 通知关闭线程
11. isRunning = false;
12. }

可以猜到核心的代码都在我们的线程的run里面了。

4、draw

1. @Override
2. public void run()
3. {
4. // 不断的进行draw
5. while (isRunning)
6. {
7. long start = System.currentTimeMillis();
8. draw();
9. long end = System.currentTimeMillis();
10. try
11. {
12. if (end - start < 50)
13. {
14. Thread.sleep(50 - (end - start));
15. }
16. } catch (InterruptedException e)
17. {
18. e.printStackTrace();
19. }
20. }
21. }
22. private void draw()
23. {
24. try
25. {
26. // 获得canvas
27. mCanvas = mHolder.lockCanvas();
28. if (mCanvas != null)
29. {
30. // 绘制背景图
31. drawBg();
32. /**
33. * 绘制每个块块，每个块块上的文本，每个块块上的图片
34. */
35. float tmpAngle = mStartAngle;
36. float sweepAngle = (float) (360 / mItemCount);
37. for (int i = 0; i < mItemCount; i++)
38. {
39. // 绘制快快
40. mArcPaint.setColor(mColors[i]);
41. mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,
42. mArcPaint);
43. // 绘制文本
44. drawText(tmpAngle, sweepAngle, mStrs[i]);
45. // 绘制Icon
46. drawIcon(tmpAngle, i);
47. tmpAngle += sweepAngle;
48. }
49. // 如果mSpeed不等于0，则相当于在滚动
50. mStartAngle += mSpeed;
51. // 点击停止时，设置mSpeed为递减，为0值转盘停止
52. if (isShouldEnd)
53. {
54. mSpeed -= 1;
55. }
56. if (mSpeed <= 0)
57. {
58. mSpeed = 0;
59. isShouldEnd = false;
60. }
61. // 根据当前旋转的mStartAngle计算当前滚动到的区域
62. calInExactArea(mStartAngle);
63. }
64. } catch (Exception e)
65. {
66. e.printStackTrace();
67. } finally
68. {
69. if (mCanvas != null)
70. mHolder.unlockCanvasAndPost(mCanvas);
71. }
72. }

可以看到我们的run里面调用了draw，和上面模版一致。

使用通过 mHolder.lockCanvas();获得我们的Canvas，然后就可以尽情的绘制了。

1、绘制背景drawBg();

1. /**
2. * 根据当前旋转的mStartAngle计算当前滚动到的区域 绘制背景，不重要，完全为了美观
3. */
4. private void drawBg()
5. {
6. mCanvas.drawColor(0xFFFFFFFF);
7. mCanvas.drawBitmap(mBgBitmap, null, new Rect(mPadding / 2,
8. mPadding / 2, getMeasuredWidth() - mPadding / 2,
9. getMeasuredWidth() - mPadding / 2), null);
10. }

这个比较简单，其实就是绘制一个棕色的圆盘，在运行代码前，你可以忽略掉，不影响。

接下来一个for循环，且角度每次递增(360 / mItemCount);就是绘制每个盘块以及盘块上的字体和图标了。

2、绘制盘块

1. // 绘制快快
2. mArcPaint.setColor(mColors[i]);
3. mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,
4. mArcPaint);

这个比较简单了~~

3、绘制文本

1. /**
2. * 绘制文本
3. *
4. * @param rect
5. * @param startAngle
6. * @param sweepAngle
7. * @param string
8. */
9. private void drawText(float startAngle, float sweepAngle, String string)
10. {
11. Path path = new Path();
12. path.addArc(mRange, startAngle, sweepAngle);
13. float textWidth = mTextPaint.measureText(string);
14. // 利用水平偏移让文字居中
15. float hOffset = (float) (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);// 水平偏移
16. float vOffset = mRadius / 2 / 6;// 垂直偏移
17. mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
18. }

利用Path，添加入一个Arc，然后设置水平和垂直的偏移量，垂直偏移量就是当前Arc朝着圆心移动的距离；水平偏移量，就是顺时针去旋转，

我们偏移了 (mRadius * Math.PI / mItemCount / 2 - textWidth / 2);目的是为了文字居中。mRadius * Math.PI 是圆的周长；周长/ mItemCount / 2 是每个Arc的一半的长度；

拿Arc一半的长度减去textWidth / 2，就把文字设置居中了。

最后，用过path去绘制文本即可。

凑合看个图：

本来字的位置在外围的横线处，我们希望到内部的横线位置，需要调节水平和垂直的偏移；水平和垂直的平移方向为绿色的箭头；大概就这样。

4、绘制图像

1. /**
2. * 绘制图片
3. *
4. * @param startAngle
5. * @param sweepAngle
6. * @param i
7. */
8. private void drawIcon(float startAngle, int i)
9. {
10. // 设置图片的宽度为直径的1/8
11. int imgWidth = mRadius / 8;
12. float angle = (float) ((30 + startAngle) * (Math.PI / 180));
13. int x = (int) (mCenter + mRadius / 2 / 2 * Math.cos(angle));
14. int y = (int) (mCenter + mRadius / 2 / 2 * Math.sin(angle));
15. // 确定绘制图片的位置
16. Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth
17. / 2, y + imgWidth / 2);
18. mCanvas.drawBitmap(mImgsBitmap[i], null, rect, null);
19. }

绘制图片主要就是图片的中心的确定，这里我们固定图片大小为直径的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公司让人抽到妹子一只咋办。

所以我们还要来控制用户抽奖的概率，这里我们让用户中奖的产品在开始滚的时候就决定了。是不是玩转盘的时候很傻很天真，以为可以中大奖。

1. /**
2. * 点击开始旋转
3. *
4. * @param luckyIndex
5. */
6. public void luckyStart(int luckyIndex)
7. {
8. // 每项角度大小
9. float angle = (float) (360 / mItemCount);
10. // 中奖角度范围（因为指针向上，所以水平第一项旋转到指针指向，需要旋转210-270；）
11. float from = 270 - (luckyIndex + 1) * angle;
12. float to = from + angle;
13. // 停下来时旋转的距离
14. float targetFrom = 4 * 360 + from;
15. /**
16. * <pre>
17. *  (v1 + 0) * (v1+1) / 2 = target ;
18. *  v1*v1 + v1 - 2target = 0 ;
19. *  v1=-1+(1*1 + 8 *1 * target)/2;
20. * </pre>
21. */
22. float v1 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetFrom) - 1) / 2;
23. float targetTo = 4 * 360 + to;
24. float v2 = (float) (Math.sqrt(1 * 1 + 8 * 1 * targetTo) - 1) / 2;
25. mSpeed = (float) (v1 + Math.random() * (v2 - v1));
26. isShouldEnd = false;
27. }

当外部调用luckyStart即可以旋转，index为停下来的位置，水平位置开始算，即0为相机，1为IPAD。

这里又开始牵扯数学了：

1. float from = 270 - (luckyIndex + 1) * angle;
2. 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开始计算的，于是我们的停止代码是这样的：

1. public void luckyEnd()
2. {
3. mStartAngle = 0;
4. isShouldEnd = true;
5. }

最后贴出我们的主布局文件和Activity

7、布局文件和MainActivity

1. package com.zhy.demo_zhy_06_choujiangzhuanpan;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.view.View;
5. import android.view.View.OnClickListener;
6. import android.widget.ImageView;
7. import com.zhy.view.LuckyPanView;
8. public class MainActivity extends Activity
9. {
10. private LuckyPanView mLuckyPanView;
11. private ImageView mStartBtn;
12. @Override
13. protected void onCreate(Bundle savedInstanceState)
14. {
15. super.onCreate(savedInstanceState);
16. setContentView(R.layout.activity_main);
17. mLuckyPanView = (LuckyPanView) findViewById(R.id.id_luckypan);
18. mStartBtn = (ImageView) findViewById(R.id.id_start_btn);
19. mStartBtn.setOnClickListener(new OnClickListener()
20. {
21. @Override
22. public void onClick(View v)
23. {
24. if (!mLuckyPanView.isStart())
25. {
26. mStartBtn.setImageResource(R.drawable.stop);
27. mLuckyPanView.luckyStart(1);
28. } else
29. {
30. if (!mLuckyPanView.isShouldEnd())
31. {
32. mStartBtn.setImageResource(R.drawable.start);
33. mLuckyPanView.luckyEnd();
34. }
35. }
36. }
37. });
38. }
39. }

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:background="#ffffff"
5. android:layout_height="match_parent" >
6. <com.zhy.view.LuckyPanView
7. android:id="@+id/id_luckypan"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:layout_centerInParent="true"
11. android:padding="30dp" />
12. <ImageView
13. android:id="@+id/id_start_btn"
14. android:src="@drawable/start"
15. android:layout_centerInParent="true"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. />
19. </RelativeLayout>

终于写完了，数学把我这类渣渣计算的不行不行的。ps：抠图真恶心，爱歌撒时候给我传递些艺术的造诣和ps的技术呢。。。。

好了，我们的按钮是用布局文件加上的，方便大家自己定制按钮~~~并且大家的奖项，颜色，以及图片可以自己定义，这个不用说了吧，修改count，以及那几个数组就行。

有可能的话，还会写一篇SurfaceView做游戏的博文，不过案例可能会在网上进行寻找，哈。

源码点击下载

发现任何bug欢迎留言。

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

博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

1、Android 自定义控件实战 电商活动中的刮刮卡

2、Android自定义控件实战  打造Android流式布局和热门标签

3、Android智能机器人“小慕”的实现

4、高仿QQ5.0侧滑

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