Android 自定义View 抽奖大转盘(2)

Android 94 2017-11-08 17:59

这是转盘的第二个版本,添加了外围的圆圈

第一个demo在这儿可以找到

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

镇楼图

Android 自定义View 抽奖大转盘(2)-JEESNS
S171011-11370203.jpg

项目的本来来源来自于

来源

添加外围的圆圈,主要由两部分组成

1.画小圆。2.圆盘位置的定位

圆盘位置如下

@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //就是让两个view居中,没有其他的操作
        int centerX = (right - left)/2;
        int centerY = (bottom - top)/2;
        boolean panReady = false;
        for(int i=0;i<getChildCount();i++){
            View child = getChildAt(i);
            if(child instanceof RotateView){
                rotatePan = (RotateView) child;
                int panWidth = child.getWidth();
                int panHeight = child.getHeight();
                child.layout(centerX - panWidth/2 , centerY - panHeight/2,centerX + panWidth/2, centerY + panHeight/2);
                panReady = true;
            }else if(child instanceof ImageView){
//                if(TextUtils.equals((String) child.getTag(),START_BTN_TAG)){
                    startBtn = (ImageView) child;
                    int btnWidth = child.getWidth();
                    int btnHeight = child.getHeight();
                    child.layout(centerX - btnWidth/2 , centerY - btnHeight/2 , centerX + btnWidth/2, centerY + btnHeight/2 );
//                }
            }
        }
    }

这里一看就能明白,两个View,居中显示,在onLayout方法里面

下面是画圆的方法

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.canvas = canvas;

        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();

        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingTop - paddingBottom;
        int MinValue = Math.min(width,height);

        radius = MinValue /2;
        CircleX = getWidth() /2;
        CircleY = getHeight() /2;
        //画背景
        canvas.drawCircle(CircleX,CircleY,radius,backgroundPaint);
        //画圆圈,主要功能也就在这里
        drawSmallCircle(isYellow);
    }

    private void drawSmallCircle(boolean FirstYellow) {
        //位置要在内部,每次的半径相应的变短一点
        int pointDistance = radius - Util.dip2px(context,10);
        //每次增加20度,也就是能够得到18个点
        for(int i=0;i<=360;i+=20){
            //每次获取到圆心的位置,由i控制位置
            int x = (int) (pointDistance * Math.sin(Util.change(i))) + CircleX;
            int y = (int) (pointDistance * Math.cos(Util.change(i))) + CircleY;

            //两个不同颜色圆
            if(FirstYellow)
                canvas.drawCircle(x,y,Util.dip2px(context,6),yellowPaint);
            else
                canvas.drawCircle(x,y,Util.dip2px(context,6),whitePaint);
            FirstYellow = !FirstYellow;
        }
    }

如上所示,在onDraw方法,画出了圆,根据不同的角度变化,获取到了小圆的圆心位置,画出圆

其中View之间的间距是由两个自定义View的位置差值来确定外围小圆的圆环宽度的。

感觉这里可以用一个自定义View来实现,之后会选择用一个自定义View来实现整个抽奖的大转盘。

文章评论