Android 自定义View实现QQ运动积分抽奖转盘

时间 2019-11-11

标签 android 自定义 view 实现运动积分抽奖转盘栏目 Android 繁體版

原文原文链接

　　由于偶尔关注QQ运动，看到QQ运动的积分抽奖界面比较有意思，因此就尝试用自定义View实现了下，本来想经过开发者选项查看下界面的一些信息，后来发现积分抽奖界面是在WebView中展现的，应该是在H5页面中用js代码实现的，暂时不去管它了。git

　　这里的自定义View针对的是继承自View的状况，你能够将Canvas想象为画板， Paint为画笔，自定义View的过程和在画板上用画笔做画其实相似，想象在画板上做画的过程，你要画一个多大图形（对应View的测量 onMeasure方法），你要画什么样的图形，好比圆形方形等等（对应View的onDraw方法），在掌握了View的一些基础概念（位置参数、触摸事件、滑动），测量模式、事件分发机制、绘制流程等知识后，自定义View的时候就不以为复杂了。github

　　无论是多么复杂的View，其内部基本均可以拆分至一个个小单元，好比以下的QQ运动积分抽奖画面，（QQ --> 动态 --> 运动 --> 我 --> 积分）canvas

　　这里咱们只关注抽奖的转盘，由于是截图没有动画效果，具体能够在本身的手机上查看下。这个抽奖的界面看似复杂，其实能够分为几个部分ide

　　1. 最外层圆环，其中有小圆圈闪动动画

　　2, 内部圆角矩形this

　　3. 内部圆角卡片（包含一个图片或说明文字）spa

　第一步咱们要继承View类，若是须要自定义属性则应该实现带三个参数的构造方法，这里将自定义View命名为 LotteryView3d

public LotteryView(Context context) {
        this(context, null);
    }

    public LotteryView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LotteryView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

　　在init方法中能够作一些初始化的操做，好比须要用的颜色值，画笔Paint，宽高信息等，若是有自定义属性，也能够在init方法中处理。rest

　　接着能够设定View的宽高信息，这里咱们将View设置为正方形code

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(mSelfTotalWidth, mSelfTotalWidth);
    }

　　调用setMeasureDimension方法，宽高都设置为 mSelfTotalWidth。这里咱们宽高是限定的值，因此不须要的处理不一样测量模式的状况，若是是其余自定义View要支持wrap_content属性，须要在onMeasure方法中自行处理

　　第一步：绘制外层带圆角的圆环

/** 外层带圆角矩形圆环 */
    private void drawOuterRoundCircle(Canvas canvas) {
        canvas.save();
        canvas.clipRect(
                mOuterCircleWidth + getPaddingLeft(),
                mOuterCircleWidth + getPaddingTop(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(),
                Region.Op.DIFFERENCE);

        canvas.drawRoundRect(
                getPaddingLeft(),
                getPaddingTop(),
                mSelfTotalWidth - getPaddingRight(),
                mSelfTotalWidth - getPaddingBottom(),
                18, 18, mOuterCirclePaint);
        canvas.restore();
    }

　　绘制外层圆环中的小圆圈

private void drawOuterDecorateSmallCircle(Canvas canvas) {
        int result = mInvalidateCircleCount % 2;

        // top
        int x = 0, y = 0;
        int sideSize = mSelfTotalWidth - mOuterCircleWidth * 2 - getPaddingLeft() - getPaddingRight(); // 除去最外边圆环后的边长
        for (int i = 0; i < 10; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
            y = (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // bottom
        for (int i = 0; i < 10; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingLeft();
            y = mSelfTotalWidth - mOuterCircleWidth + (mOuterCircleWidth - mSmallCircleRadius * 2) / 2 + mSmallCircleRadius - getPaddingBottom();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // left
        for(int i = 0; i < 9; i++) {
            mSmallCirclePaint.setColor(i % 2 == (result == 0 ? 1 : 0) ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mOuterCircleWidth / 2 + getPaddingLeft();
            y =  mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }

        // right
        for(int i = 0; i < 9; i++) {
            mSmallCirclePaint.setColor(i % 2 == result ? mSmallCircleYellowColor : mSmallCircleBlueColor);
            x = mSelfTotalWidth - mOuterCircleWidth / 2 - getPaddingRight();
            y =  mOuterCircleWidth*2 + (sideSize - mSmallCircleRadius * 2 * 9) / 9 * i + mSmallCircleRadius * 2 * i + getPaddingTop();
            canvas.drawCircle(x, y, mSmallCircleRadius, mSmallCirclePaint);
        }
    }

View Code

　　第二步：绘制内部的圆角矩形，即卡片所在区域的背景

private void drawInnerBackground(Canvas canvas) {
        canvas.drawRect(mOuterCircleWidth + getPaddingLeft(), mOuterCircleWidth + getPaddingTop(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingRight(),
                mSelfTotalWidth - mOuterCircleWidth - getPaddingBottom(), mInnerPaint);
    }

　　第三步：绘制内部小卡片

private void drawInnerCards(Canvas canvas) {
        int left = 0, top = 0, right = 0, bottom = 0;
        int spaceNum = 0;
        for(int i = 0 ; i < 9 ; i++) {
            spaceNum = i % 3 + 1;
            left = mOuterCircleWidth + mInnerCardWidth * (i%3) + mInnerCardSpace * spaceNum + getPaddingLeft();
            top = mOuterCircleWidth + mInnerCardWidth * (i/3) +mInnerCardSpace * (i/3 + 1) + getPaddingTop();
            right = left + mInnerCardWidth;
            bottom = top + mInnerCardWidth;
            if(!mHadInitial) {
                mCardPositionInfoList.add(new Pair(new Pair(left, right), new Pair(top, bottom)));
            }
            drawInnerRoundCard(canvas, left, top, right, bottom, i);
        }
        mHadInitial = true;
    }

　　所有绘制完成后，在onTouchEvent中处理点击事件便可，如何断定咱们点击的是抽奖的区域，这里使用对比位置信息的方法，

　　以下，

private int getTouchPositionInCardList(int x, int y) {
        if(mCardPositionInfoList != null) {
            int index = 1;
            for (Pair<Pair<Integer, Integer>,Pair<Integer, Integer>> pair : mCardPositionInfoList) {
                if(x > pair.first.first && x < pair.first.second && y > pair.second.first && y < pair.second.second) {
                    return index;
                }
                index++;
            }
        }
        return 0;
    }

　　将每个小卡片的坐标信息（left，top， right， bottom）信息，保存在 ArrayList<Pair<Pair<Integer, Integer>,Pair<Integer, Integer>>> mCardPosttionInfoList 中，当点击VIew时获取到点击的x y 坐标和

list中保存的坐标信息作对比，若是index == 5 ，则说明点击的是抽奖所在的小卡片区域。

　　代码托管在： https://github.com/aquarius520/LotteryView 欢迎Star 、Fork