Android SurfaceView实战 打造抽奖转盘

最新推荐文章于 2018-06-04 10:19:02 发布
最新推荐文章于 2018-06-04 10:19:02 发布
阅读量799 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LM_ZP/article/details/51533755
版权

源码：http://download.csdn.net/detail/lm_zp/9534737



activity_main.xml

<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" >
     <Button 
         android:id="@+id/button"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="你想要什么"        
         
         />
    <com.example.myyuanpan.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>
dialog.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<TextView 
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="单反相机"
    android:gravity="center_horizontal"
    />
<TextView 
    android:id="@+id/text2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="IPAD"
    android:gravity="center_horizontal"
    />
<TextView 
    android:id="@+id/text3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="恭喜发财"
    android:gravity="center_horizontal"
    />

<TextView 
    android:id="@+id/text4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="IPHONE"
    android:gravity="center_horizontal"
    />
<TextView 
    android:id="@+id/text5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="妹子一只"
    android:gravity="center_horizontal"
    />
<TextView 
    android:id="@+id/text6"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="恭喜发财"
    android:gravity="center_horizontal"
    />
</LinearLayout>
res/drawable/start_btn.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
	<item android:state_pressed="true" android:drawable="@drawable/stop"></item>
	<item android:drawable="@drawable/start"></item>
</selector>
画圆盘

LuckyPanView.java

package com.example.myyuanpan;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;



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);

	}

	/**
	 * 设置控件为正方形
	 */
	@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);
	}

	@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();
	}

	@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)
		{
			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]);
//					mArcPaint.setStyle(Style.STROKE);
					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);
		}

	}

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

	/**
	 * 根据当前旋转的mStartAngle计算当前滚动到的区域
	 * 
	 * @param startAngle
	 */
	public void calInExactArea(float startAngle)
	{
		// 让指针从水平向右开始计算
		float rotate = startAngle + 90;
		rotate %= 360.0;
		for (int i = 0; i < mItemCount; i++)
		{
			// 每个的中奖范围
			float from = 360 - (i + 1) * (360 / mItemCount);
			float to = from + 360 - (i) * (360 / mItemCount);

			if ((rotate > from) && (rotate < to))
			{
				Log.d("TAG", mStrs[i]);
				return;
			}
		}
	}

	/**
	 * 绘制图片
	 * 
	 * @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);

	}

	/**
	 * 绘制文本
	 * 
	 * @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);
	}

	/**
	 * 点击开始旋转
	 * 
	 * @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;
	}

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

	public boolean isStart()
	{
		return mSpeed != 0;
	}

	public boolean isShouldEnd()
	{
		return isShouldEnd;
	}

}
MainActivity.java 

package com.example.myyuanpan;

import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

	private LuckyPanView mLuckyPanView;
	private ImageView mStartBtn;
	private Button button;
	int num = 2;

	@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);
		button = (Button) findViewById(R.id.button);
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				// Dialog 对话框
				final Dialog dialog = new Dialog(MainActivity.this);
				// dialog布局
				View inflate = LayoutInflater.from(MainActivity.this).inflate(
						R.layout.dialog, null);
				dialog.setContentView(inflate);
				// dialog头
				dialog.setTitle("选择想要的");
				dialog.setCanceledOnTouchOutside(true);
				// 显示
				dialog.show();
				TextView text1 = (TextView) inflate.findViewById(R.id.text1);
				TextView text2 = (TextView) inflate.findViewById(R.id.text2);
				TextView text3 = (TextView) inflate.findViewById(R.id.text3);
				TextView text4 = (TextView) inflate.findViewById(R.id.text4);
				TextView text5 = (TextView) inflate.findViewById(R.id.text5);
				TextView text6 = (TextView) inflate.findViewById(R.id.text6);
				text1.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 0;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
				text2.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 1;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
				text3.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 2;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
				text4.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 3;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
				text5.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 4;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
				text6.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						// TODO Auto-generated method stub
						num = 5;
						Toast.makeText(MainActivity.this, "修改完成", 0).show();
						dialog.dismiss();
					}
				});
			}
		});

		mStartBtn.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (!mLuckyPanView.isStart()) {
					mStartBtn.setImageResource(R.drawable.stop);
					mLuckyPanView.luckyStart(num);
				} else {
					if (!mLuckyPanView.isShouldEnd())

					{
						mStartBtn.setImageResource(R.drawable.start);
						mLuckyPanView.luckyEnd();
					}
				}

			}
		});
	}

}






LM_ZP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android转盘抽奖demo
12-09
android转盘抽奖demo
Android抽奖实现大全
10-27
Android抽奖实现大全，里边有三种抽奖的实现方法，也许就是你需要的，也许能帮助你拓展思路
基于 SurfaceView 详解 android 幸运大转盘，附带实例app
weixin_33735077的博客
08-15 254
基于 SurfaceView 详解 android 幸运大转盘，附带实例app 首先说一下，幸运大转盘，以及SurfaceView是在看了也为大神的博客，才有了比较深刻的理解，当然这里附上这位大神的博客地址：博客地址，有兴趣的话你可以去看看，里面有很多的例子。至于我为什么要写这篇博客？，原因之一：加强自己的理解，原因之二：大神的博客就是大神...
android转盘源码分析
Tiger的专栏
10-23 1624
转盘git下载地址：https://github.com/anupcowkur/Android-Wheel-Menu
抽奖项目的环境搭建
weixin_30564901的博客
05-15 126
一、抽奖项目使用python3开发，python版本3.x都可以需要安装的python第三方模块pip install django==1.9.0 这个一定要加版本号pip install Pillowpip install redispip install pymysql 二、mysql的安装 1、服务启动 在最新版的MySQL没有MySQLStartupItem.pkg文件，也不能再用...
Android中利用SurfaceView制作抽奖转盘的全流程攻略
01-05
今天给大家带来SurfaceView的一个实战案例，话说自定义View也是各种写，一直没有写过SurfaceView，这个玩意是什么东西？什么时候用比较好呢？ 可以看到SurfaceView也是继承了View，但是我们并不需要去实现它的draw...
surfaceview实现抽奖转盘
04-28
SurfaceView在Android开发中是一种特殊的View，主要用于处理高性能、低延迟的图形绘制，例如游戏、视频播放或像抽奖转盘这样的复杂动画。SurfaceView通过创建一个独立的Surface，并将其渲染到窗口上，允许UI更新与...
Android使用surfaceView自定义抽奖大转盘
09-01
在这个案例中，我们使用SurfaceView来实现一个抽奖大转盘的功能。下面将详细介绍如何利用SurfaceView来创建这样一个功能。 1. **SurfaceView基础**： SurfaceView不同于普通的View，它采用了双缓冲技术，可以在...
Android SurfaceView抽奖转盘
02-02
在Android开发中，`SurfaceView`是一个非常重要的组件，它主要用于处理高性能的图形渲染，比如游戏、动画或者像“抽奖转盘”这样的交互元素。在这个项目中，开发者使用`SurfaceView`来创建了一个功能完善的抽奖转盘...
实现android"转盘抽奖"小项目后感想
abg1556的博客
03-12 159
我这次做的小项目是android的转盘抽奖，因为这个小项目中有进程的调度，加锁等细节，而我们组的竞赛系统中也有这样的问题。通过这次的实践我发现了自己的好多问题也学到了很多。 个人问题： 1.自己的动手实践能力还差很多，而且解决问题的耐心还是不行。 2.虽然现在看视频做了出来，可是我觉得还是没有理解很透侧，关掉视频让自己再做一次我不一定能做的出来 3.缺乏认真的梳理一遍，这样可以加...
luckypan幸运盘
03-03
SurfaceViewDemo LuckyPan
一个简单的转盘效果
04-14
一个简单的轮盘效果
Android SurfaceView实战 打造抽奖转盘
modabobo
12-04 852
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/41722441，本文出自：【张鸿洋的博客】 1、概述 今天给大家带来SurfaceView的一个实战案例，话说自定义View也是各种写，一直没有写过SurfaceView，这个玩意是什么东西？什么时候用比较好呢？ 可以看到SurfaceView也是继承了View，但是我们并不需要去...
Android抽奖转盘的实现
chuanao8829的博客
05-28 377
最近需要实现一个抽奖的控件，我简单搜索了下，感觉要不很多细节地方没有处理，要么根本就不能用。索性想自己实现个，从千图网搜了下，挑选了个自己比较喜欢的出来，psd打开后效果如下： 最终实现效果如下： 点击Go按钮自动滚动 随手势滚动 实现...
Android——抽奖转盘的实现
Minor昔年
10-05 5656
百度日前已经正式从美国加州机动车辆管理局获得了测试自动驾驶汽车的许可。事实上，早在今年四月，百度就宣布在硅谷建立了无人驾驶技术团队，同时计划在今年年底将团队规模扩大到超过100人。该团队目前由机器学习研究人员、软件工程师和硬件工程师组成，涉及机器人、机器视觉和传感器研发领域。此外，百度还在硅谷大量招聘具有汽车行业经验的从业者。本文转载Nipuream 的博客前言：最近需要实现一个抽奖的控件，我简单搜
Android之九宫格抽奖及大转盘抽奖
热门推荐
叶已初秋的博客
04-08 1万+
仿腾讯游戏一系列游戏的转盘抽奖、
Android自定义幸运转盘
lwang057的博客
12-18 1万+
luckyTurnTable由于公司前段时间的抽奖活动的需求，所以做了两款幸运大转盘
抽奖轮盘
yin_chenglong的博客
06-04 683
主页面package com.example.zy_choujianglunpan; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; ...
Android之SurfaceView
weixin_30784141的博客
05-24 103
SurfaceView也是继承了View，但是我们并不需要去实现它的draw方法来绘制自己，为什么呢？ 因为它和View有一个很大的区别，View在UI线程去更新自己；而SurfaceView则在一个子线程中去更新自己；这也显示出了它的优势，当制作游戏等需要不断刷新View时，因为是在子线程，避免了对UI线程的阻塞。 知道了优势以后，你会想那么不使用draw方法，哪来的ca...
Android SurfaceView绘图实战与详解
本资源主要探讨的是基于Android的绘图系统，特别是如何利用SurfaceView进行高效的游戏画面更新。以下是关于Android绘图和SurfaceView的详细解释。 1. **SurfaceView简介** SurfaceView是Android中一个特殊的视图，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值