Android 自定义View 抽奖大转盘(3[完])

在这里将头两篇做了一个整合，两个自定义View变成了一个自定义View

Android 自定义View 抽奖大转盘(1)
Android 自定义View 抽奖大转盘(2)
项目github链接 https://github.com/yukunkun/RotateView

镇楼图

S771011-14425058.jpg

主要是将外围的圆环在内部设置，增加了转盘中间的点击事件，部分修改如下

//大圆
 canvas.drawCircle(MinValue/2,MinValue/2,radius,backgroundPaint);

圆的绘制

  //绘制中间的图
 Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.node);
 mRect = new Rect(MinValue/2-bitmap.getWidth()/2,MinValue/2-bitmap.getHeight()/2,MinValue/2+bitmap.getWidth()/2,MinValue/2+bitmap.getHeight()/2);
 canvas.drawBitmap(bitmap,null, mRect, null);
 drawSmallCircle(canvas,isYellow,MinValue); 

小圆

  private void drawSmallCircle(Canvas canvas, boolean FirstYellow, int minValue) {
         //位置要在内部，每次的半径相应的变短一点
         int pointDistance = radius - Util.dip2px(context,9);
         //每次增加20度，也就是能够得到18个点
         for(int i=0;i<=360;i+=20){
             //每次获取到圆心的位置，由i控制位置
             int x = (int) (pointDistance * Math.sin(Util.change(i))) + minValue/2;
             int y = (int) (pointDistance * Math.cos(Util.change(i))) + minValue/2;
 
             //两个不同颜色圆
             if(FirstYellow)
                 canvas.drawCircle(x,y,Util.dip2px(context,4),yellowPaint);
             else
                 canvas.drawCircle(x,y,Util.dip2px(context,4),whitePaint);
             FirstYellow = !FirstYellow;
         }
     }

这些方法被抽离出来了，圆盘的内圆半径有变化，每个图片的定位有点变化

初始化半径时变小了

   //内边距
    final int paddingLeft = getPaddingLeft()+Util.dip2px(context,ringLength);
    final int paddingRight = getPaddingRight()-Util.dip2px(context,ringLength);
    final int paddingTop = getPaddingTop()+Util.dip2px(context,ringLength);
    final int paddingBottom = getPaddingBottom()-Util.dip2px(context,ringLength);

初始化图片的中心位置，有点偏移，否者位置不对，有点遮挡文字

//确定图片在圆弧中 中心点的位置
float x = (float) (xx + (mRadius /2 + mRadius/12-Util.dip2px(context,ringLength))* Math.cos(angle));
float y = (float) (yy + (mRadius /2 +mRadius/12-Util.dip2px(context,ringLength)) * Math.sin(angle));

下面是点击中间的图片的触摸事件

/**
     * 点击事件，点击中心就开始动画
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                float x = event.getX();
                float y = event.getY();
                //点击了中间位置
                if(x>mRect.left&&x<mRect.right&&y>mRect.top&&y<mRect.bottom){
                    startAnimation(pos);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                break;
        }
        return super.onTouchEvent(event);
    }

如上所示，将中间的图片位置获取到，由MotionEvent.ACTION_DOWN来确定点击

效果图所开头所示。有需要的话，还可以在这个上面修改。