Android中利用SurfaceView制作抽奖转盘的全流程攻略
一、概述
今天给大家带来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对象。
二、surfaceview一般的写法
综上所述，一般surfaceview类中我们会这么写代码：
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方法。
注意下，我们在draw里面进行了try catch然后很多的判空，主要是因为，当用户点击back或者按下home键以后，surfaceview会被销毁；
mholder.lockcanvas();返回的就是null了，所以为了避免造成空指针错误，我们各种判null，甚至还加了个try catch。
说了这么多，竟然没看到效果图，这怎么能行~~
三、效果图
就这么个效果，当然了模拟器录制的效果肯定没有真机上效果流畅。
结合上面我们给出的模版，我们需要改变的就是，在create回调里面需要去初始化一些变量，在draw方法里面去绘制我们的文本、图片、扇形块块等等。整体架构没有变化。
四、转盘的制作
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，使我们的控件为正方形
/**
* 设置控件为正方形
*/
@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进行了赋值。
3.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里面了。
4.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，然后就可以尽情的绘制了。
（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/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转化为弧度制。
集合图和上面的代码好好理解下。
到此基本我们的圆盘就绘制好了。
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;
/**
* <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间的一个随机数，也就是在某个块块中间任意位置。这样就可以让你觉得每次都在这个块块，但是指针位置还不同。
好了，这里就是最复杂的地方了，如果你比较善良，不想内置这个功能，那就随便设置个速度吧。
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;
@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，以及那几个数组就行。