Android 自定義View 抽獎大轉盤(2)

這是轉盤的第二個版本,添加了外圍的圓圈

第一個demo在這兒可以找到

Android 自定義View 抽獎大轉盤(1)
項目github鏈接 https://github.com/yukunkun/RotateView

鎮樓圖

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來實現整個抽獎的大轉盤。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容