看到一个抽奖的效果，最近正要写个自定义的View就用这个练一下好了
不多说先上图，因为我这主要是实现了思路，所以UI做的不是很好看，后续我会补上，看是否能满足你的需求：
思路解析
1.首先需要看仔细看一下，抽奖是什么流程，拆分业务流程。
2.分析好业务流程后，开始做代码分析，如何实现分成几个步骤。
3.具体的实现步骤，要尽可能完整这样你写的时候就会很流畅。
具体实现
自定义view流程大约是几步：
- 需要绘制的静态布局都有那些要明确出来，
- 抽奖这个首先要有一个背景；
- 然后是一堆小的中奖矩形区域（区域上是文字或奖品图片等）；
- 然后是有一个浮层类似的矩形模块（需要滚动在各中奖矩形上）；
- 然后是一个启动抽奖的按钮(其实这个按钮应该是唯一的操作了)；
- 上面这些东西都绘制完成后，就需要是让这个抽奖机，滚动起来了，然后产生一个中奖产品。我猜想中奖产品应该是一个固定的，就是在你还没开始抽之前，就已经确定了一个范围，因为一个抽奖活动各个奖项都是固定的。抽走一个就会少一个，相应的奖品的中奖几率就会越小。这个地方我还没有实现，目前只是随机出来一个奖品。
有了如上的分析步骤，我们写起来就不会那么复杂了，因为你已经确定要做的事情了，按步骤写就好了
由于我们的view在抽奖的时候会一直进行绘制，所以这里我选择使用SurfaceView来实现，如直播中的点赞一般也是用SurfaceView来实现。
下面开始正式进入编码
- SurfaceView常规使用，由于支持在子线程中绘制，所以初始代码如下：
@Override
public void surfaceCreated(SurfaceHolder holder) {
LogUtil.d("surfaceCreated--调用surfaceCreated");
isDrawing = true;
drawThread = new Thread(this);
drawThread.start();
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
LogUtil.d("surfaceChanged--调用surfaceChanged");
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
LogUtil.d("surfaceDestroyed--调用surfaceDestroyed");
currentCount = 0;
if (mRunningAnimator != null) {
mRunningAnimator.cancel();
mRunningAnimator.removeAllListeners();
}
isDrawing = false;
mRectList.clear();
drawThread = null;
}
@Override
public void run() {
while (isDrawing) {
try {
//降低绘制的频率
Thread.sleep(10);
mCanvas = mHolder.lockCanvas();
draw();
} catch (Exception e) {
e.printStackTrace();
} finally {
LogUtil.d("run_finally--unlockCanvasAndPost：");
mHolder.unlockCanvasAndPost(mCanvas);
}
}
}- 这个draw方法是正式开始绘制的地方，主要有以下几部分，在绘制之前先计算出各个矩形的位置。
/**
* 绘制开始
*/
private void draw() {
//计算出抽奖块的位置
calculate();
//绘制抽奖的背景
drawBackground(mCanvas);
//绘制开始按钮
drawLotteryButton(mCanvas);
//绘制遮罩
drawShade(mCanvas);
}- 计算位置的代码是我自己摸索的写的，感觉应该不是很好（尴尬），主要的思路就是因为我计划绘制的是一个四个边的正方形，所以我把奖品数目分成了四份。然后就是按照顺时针的顺序挨个计算每个矩形的位置了。
因为要绘制正方形，所以如果SurfaceView不是正方形的话，就要不能填充完全了，按照较小的边进行计算。
/**
* 计算需要多少个奖品块，奖品平均分配到4个边上
*/
private void calculate() {
if (mCanvas.getWidth() < mCanvas.getHeight()) {
everyWidth = mCanvas.getWidth() / (rowCount + 1);
} else {
everyWidth = mCanvas.getHeight() / (rowCount + 1);
}
realityWidth = everyWidth * (rowCount + 1);
int left = -everyWidth;
int top = 0;
int right = 0;
int bottom = everyWidth;
for (int i = 0; i < rowCount; i++) {
left += everyWidth;
right += everyWidth;
Rect rect = new Rect(left, top, right, bottom);
mRectList.add(rect);
}
// LogUtil.d("calculate1--mRectList长度：" + mRectList.size());
left = rowCount * everyWidth;
top = -everyWidth;
right = (rowCount + 1) * everyWidth;
bottom = 0;
for (int i = 0; i < rowCount; i++) {
top += everyWidth;
bottom += everyWidth;
Rect rect = new Rect(left, top, right, bottom);
mRectList.add(rect);
// LogUtil.d("calculate2--top:" + rect.top + "bottom:" + rect.bottom);
}
// LogUtil.d("calculate2--mRectList长度：" + mRectList.size());
left = (rowCount + 1) * everyWidth;
top = rowCount * everyWidth;
right = (rowCount + 2) * everyWidth;
bottom = (rowCount + 1) * everyWidth;
for (int i = 0; i < rowCount; i++) {
left -= everyWidth;
right -= everyWidth;
Rect rect = new Rect(left, top, right, bottom);
mRectList.add(rect);
// LogUtil.d("calculate3--left:" + rect.left + "right:" + rect.right);
}
// LogUtil.d("calculate3--mRectList长度：" + mRectList.size());
left = 0;
top = (rowCount + 1) * everyWidth;
right = everyWidth;
bottom = (rowCount + 2) * everyWidth;
for (int i = 0; i < rowCount; i++) {
top -= everyWidth;
bottom -= everyWidth;
Rect rect = new Rect(left, top, right, bottom);
mRectList.add(rect);
// LogUtil.d("calculate4--top:" + rect.top + "bottom:" + rect.bottom);
}
// LogUtil.d("calculate4--mRectList长度：" + mRectList.size());
}- 计算完成后会得到一个小的矩形列表，里面存储的是Rect用来记录每个矩形的位置。下面开始绘制矩形，先绘制整个背景矩形，再绘制小的矩形，然后在把文字绘制到小矩形上，这里计算文字的位置比较麻烦，很不容易对齐。
canvas.drawRect(new Rect(0, 0, mCanvas.getWidth(), canvas.getHeight()), mPaint);
for (int i = 0; i < mRectList.size(); i++) {
// LogUtil.d("开始绘制第：" + i);
Rect rectF1 = mRectList.get(i);
canvas.drawRect(rectF1, mPaint);
canvas.drawRect(rectF1, mBorderPaint);
//计算文字的位置
if (i < awardCount) {
Point point = calculateTextLocation(rectF1, awardList.get(i));
mCanvas.drawText(awardList.get(i), point.x, point.y, mTextPaint);
} else {
Point point = calculateTextLocation(rectF1, awardList.get(i - awardCount));
mCanvas.drawText(awardList.get(i - awardCount), point.x, point.y, mTextPaint);
}
}- 现在基本上整体绘制了主要部分，现在把中心的开奖按钮绘制一下。这个地方也是需要处理文字对齐。后期会继续完善。
private void drawLotteryButton(Canvas canvas) {
mButtonRegion = new Region(realityWidth / 2 - radius / 2, realityWidth / 2 - radius / 2, realityWidth / 2 + radius / 2, realityWidth / 2 + radius / 2);
canvas.drawCircle(realityWidth / 2, realityWidth / 2, radius, mButtonPaint);
if (lotteryState == IS_LOTTERYING) {
Point point = calculateTextLocation(mButtonRegion.getBounds(), "STOP");
canvas.drawText("STOP", point.x, point.y, mTextPaint);
} else {
Point point = calculateTextLocation(mButtonRegion.getBounds(), "GO");
canvas.drawText("GO", point.x, point.y, mTextPaint);
}
}- 然后在把中奖矩形上绘制一个阴影就基本完成了所有的绘制。
private void drawShade(Canvas mCanvas) {
LogUtil.d("开始绘制阴影图" + currentCount);
if (mRectList.size() > currentCount) {
mCanvas.drawRect(mRectList.get(currentCount), mShadePaint);
}
if (mRectList.size() == rowCount * 4) {
isDrawing = false;
}
}以上的步骤完成后，基本上一个不会动的抽奖自定义控件已经出来了。
下面思考如何让这个动起来？
思路：
我想小的中奖矩形的位置都有了，就按照已有的位置，在上面在绘制一层不就好了么？
有了想法了，就可以开始去实践一下，看是否可行。
尝试一
通过一个不停增加变化的数字，来绘制阴影，因为我想只绘制阴影部分不影响已经绘制好的其他部分，尝试后发现SurfaceView会一直闪烁。
尝试二
如果只绘制阴影不行的话，我就只能把整个画布都绘制一次，然后每次绘制阴影的位置不同，这种方式倒是实现了大概的抽奖效果，但是感觉比较消耗内存，因为你要绘制一整张画布。（目前我还没找到其他的方法）
阴影也能动起来了，就差一个点击事件了，这个是通过实现touch事件来处理，因为我们知道按钮的坐标范围，我们只要判断点击的位置在这个坐标范围内就响应事件即可。
具体实现如下，这里面有一个逻辑是通过状态来控制按钮是开始摇奖，还是结束摇奖。：
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mButtonRegion.contains(x, y)) {
LogUtil.d("onTouchEvent-X:" + x + "Y:" + y);
}
break;
case MotionEvent.ACTION_UP:
if (mButtonRegion.contains(x, y)) {
LogUtil.d("onTouchEvent-X:" + x + "Y:" + y);
if (isEnable) {
if (lotteryState == IS_DEFAULT) {
startLottery();
} else if(lotteryState == IS_LOTTERYING) {
stopLottery();
}
}
}
break;
default:
break;
}
return true;
}开奖的动画我也贴出来吧，属性动画的知识，通过改变currentCount来确定阴影的绘制位置。
/**
* 让阴影滚动起来
*
* @param
*/
private void startLottery() {
lotteryState = IS_LOTTERYING;
drawLotteryButton(mCanvas);
if (currentCount > mRectList.size()) {
return;
}
if (mRunningAnimator != null) {
currentCount = 0;
mRunningAnimator.cancel();
}
// int timeResult = testRandom3() * 1000;
//由于属性动画中，当达到最终值会立刻跳到下一次循环，所以需要补1
mRunningAnimator = ObjectAnimator.ofInt(this, "currentCount", 0, 1);
mRunningAnimator.setRepeatMode(ValueAnimator.RESTART);
mRunningAnimator.setRepeatCount(ValueAnimator.INFINITE);
mRunningAnimator.setDuration(3000);
mRunningAnimator.setInterpolator(new LinearInterpolator());
mRunningAnimator.start();
}上面基本完成了这个还不太完整的抽奖自定义View了，但是还有许多小的细节没有实现完全。
todo的内容
1.开奖动画加入；
2.指定开奖的奖品，不能说使用随机开奖。
今天添加了开奖动画和指定到某一个奖品
思路分析：
我们要实现上面的需求，首先要处理两个问题：
1.我们点击stop的时候，currentCount需要回到初始位置，因为我门计划播放开奖动画是从0开始变化，如果不把currentCount重置为初始位置，会出现跳跃。
2.指定奖品结果，需要我们播放最后一圈动画的时候加上这个结果数值，让选中的奖品刚好走到指定位置。
解决方案：
轮盘现在还旋转，先取消第一个播放动画。然后我们播放一个临时动画，把移动到初始值（选中模块移动到初始位置）。然后在正式播放我们的开奖动画。一个逐渐变慢的动画，最后停在指定位置。
代码比较简单，这里我就不再贴出，有需要的可以去看一下git。
This ALL
再次附上链接
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
