码迷,mamicode.com
首页 > 移动开发 > 详细

Android SurfaceView实战 打造抽奖转盘

时间:2015-08-21 19:19:04      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

转载请标明出处: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类中我们会这么写代码:

 

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


结合上面我们的介绍,我们在构造中通过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、构造方法以及变量

 

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


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

 

2、onMeasure

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

 

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


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

 

3、surfaceCreated

 

[java] view plaincopy技术分享技术分享
 
  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.         // 初始化图片  
  17.         mImgsBitmap = new Bitmap[mItemCount];  
  18.         for (int i = 0; i < mItemCount; i++)  
  19.         {  
  20.             mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(),  
  21.                     mImgs[i]);  
  22.         }  
  23.   
  24.         // 开启线程  
  25.         isRunning = true;  
  26.         t = new Thread(this);  
  27.         t.start();  
  28.     }  


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

 

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

 

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


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

 

4、draw

 

[java] view plaincopy技术分享技术分享
 
  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.   
  23.     }  
  24.   
  25.     private void draw()  
  26.     {  
  27.         try  
  28.         {  
  29.             // 获得canvas  
  30.             mCanvas = mHolder.lockCanvas();  
  31.             if (mCanvas != null)  
  32.             {  
  33.                 // 绘制背景图  
  34.                 drawBg();  
  35.   
  36.                 /** 
  37.                  * 绘制每个块块,每个块块上的文本,每个块块上的图片 
  38.                  */  
  39.                 float tmpAngle = mStartAngle;  
  40.                 float sweepAngle = (float) (360 / mItemCount);  
  41.                 for (int i = 0; i < mItemCount; i++)  
  42.                 {  
  43.                     // 绘制快快  
  44.                     mArcPaint.setColor(mColors[i]);  
  45.                     mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,  
  46.                             mArcPaint);  
  47.                     // 绘制文本  
  48.                     drawText(tmpAngle, sweepAngle, mStrs[i]);  
  49.                     // 绘制Icon  
  50.                     drawIcon(tmpAngle, i);  
  51.   
  52.                     tmpAngle += sweepAngle;  
  53.                 }  
  54.   
  55.                 // 如果mSpeed不等于0,则相当于在滚动  
  56.                 mStartAngle += mSpeed;  
  57.   
  58.                 // 点击停止时,设置mSpeed为递减,为0值转盘停止  
  59.                 if (isShouldEnd)  
  60.                 {  
  61.                     mSpeed -= 1;  
  62.                 }  
  63.                 if (mSpeed <= 0)  
  64.                 {  
  65.                     mSpeed = 0;  
  66.                     isShouldEnd = false;  
  67.                 }  
  68.                 // 根据当前旋转的mStartAngle计算当前滚动到的区域  
  69.                 calInExactArea(mStartAngle);  
  70.             }  
  71.         } catch (Exception e)  
  72.         {  
  73.             e.printStackTrace();  
  74.         } finally  
  75.         {  
  76.             if (mCanvas != null)  
  77.                 mHolder.unlockCanvasAndPost(mCanvas);  
  78.         }  
  79.   
  80.     }  


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

 

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

1、绘制背景drawBg();

 

[java] view plaincopy技术分享技术分享
 
  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、绘制盘块

 

[java] view plaincopy技术分享技术分享
 
  1. // 绘制快快  
  2.                     mArcPaint.setColor(mColors[i]);  
  3.                     mCanvas.drawArc(mRange, tmpAngle, sweepAngle, true,  
  4.                             mArcPaint);  


这个比较简单了~~

 

3、绘制文本

 

[java] view plaincopy技术分享技术分享
 
  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、绘制图像

 

[java] view plaincopy技术分享技术分享
 
  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.   
  13.         float angle = (float) ((30 + startAngle) * (Math.PI / 180));  
  14.   
  15.         int x = (int) (mCenter + mRadius / 2 / 2 * Math.cos(angle));  
  16.         int y = (int) (mCenter + mRadius / 2 / 2 * Math.sin(angle));  
  17.   
  18.         // 确定绘制图片的位置  
  19.         Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth  
  20.                 / 2, y + imgWidth / 2);  
  21.   
  22.         mCanvas.drawBitmap(mImgsBitmap[i], null, rect, null);  
  23.   
  24.     }  


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

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

 

[java] view plaincopy技术分享技术分享
 
  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.   
  26.         mSpeed = (float) (v1 + Math.random() * (v2 - v1));  
  27.         isShouldEnd = false;  
  28.     }  


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

 

这里又开始牵扯数学了:

 

[java] view plaincopy技术分享技术分享
 
  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开始计算的,于是我们的停止代码是这样的:

 

[java] view plaincopy技术分享技术分享
 
  1. public void luckyEnd()  
  2.     {  
  3.         mStartAngle = 0;  
  4.         isShouldEnd = true;  
  5.     }  


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

 

7、布局文件和MainActivity

 

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

 

[html] view plaincopy技术分享技术分享
 
  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.   
  7.     <com.zhy.view.LuckyPanView  
  8.         android:id="@+id/id_luckypan"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent"  
  11.         android:layout_centerInParent="true"  
  12.         android:padding="30dp" />  
  13.       
  14.     <ImageView   
  15.         android:id="@+id/id_start_btn"  
  16.         android:src="@drawable/start"  
  17.         android:layout_centerInParent="true"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         />  
  21.   
  22.   
  23. </RelativeLayout>  


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

 

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

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

 

 

 

源码点击下载

发现任何bug欢迎留言。

 

 

 

 

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

 

博主部分视频已经上线,如果你不喜欢枯燥的文本,请猛戳(初录,期待您的支持):

 

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

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

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

4、高仿QQ5.0侧滑

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

Android SurfaceView实战 打造抽奖转盘

标签:

原文地址:http://www.cnblogs.com/Free-Thinker/p/4748638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!