Android SurfaceView实战 打造抽奖转盘
转载请标明出处：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欢迎留言。
----------------------------------------------------------------------------------------------------------
博主部分视频已经上线，若是你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：
- 1. 自定义SurfaceView实现抽奖转盘实战篇
- 2. Android实现抽奖转盘
- 3. Android打造流畅九宫格抽奖
- 4. Android抽奖转盘LotteryView
- 5. Android抽奖（大转盘，随机）
- 6. 转盘抽奖
- 7. Android抽奖转盘的实现
- 8. Android 抽奖转盘的实现
- 9. 转盘抽奖js实现
- 10. JS实现抽奖转盘
- 更多相关文章...
- • Kotlin Android 环境搭建 - Kotlin 教程
- • XSLT - 转换 - XSLT 教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 自定义SurfaceView实现抽奖转盘实战篇
- 2. Android实现抽奖转盘
- 3. Android打造流畅九宫格抽奖
- 4. Android抽奖转盘LotteryView
- 5. Android抽奖（大转盘，随机）
- 6. 转盘抽奖
- 7. Android抽奖转盘的实现
- 8. Android 抽奖转盘的实现
- 9. 转盘抽奖js实现
- 10. JS实现抽奖转盘