美文网首页待集成Android开发Android技术知识
还是自定义的加载框,Loading~

还是自定义的加载框,Loading~

作者: LasseYang | 来源:发表于2017-03-31 20:18 被阅读304次
    • 最近在学习RxJava2.0(其实RxJava1.0也没有学)所以自定义控件这里有点耽误了。。。写了一个Loading初学者可以用来当做参考,如果写的有误请告诉我,以免误导其他人3Q~
      效果图:(Gif有点鬼畜了,我并没有调这么快。。。)
      loadv.gif
      1,定义变量
        //控件大小 onSizeChanged中使用Math.min(w,h) 取正方形
        //这里我没有考虑控件大小为wrap_content的情况,如果你想做的话可以去自己测量。
        private int size;
        //四个点之间的间隔
        private int interval = 5;
        //颜色
        private static final int[] COLORS = new int[]{0xFFEF800b, 0xFFFAEA0b, 0xFFFF0000, 0xFFAAEAFF};
        //画笔
        private Paint mPaint;
        //当前正在绘制的点
        private int currentIndex = 0;
    

    2,初始化工作...这里就是初始化一个画笔

    private void init() {
            //初始化画笔
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Paint.Style.FILL);
        }
    

    3,开始动画方法

    public void startAnim() {
            //半径 * (0f-1f)实现圆的从小到大渐变 
            ValueAnimator v = ValueAnimator.ofFloat(0, 1f);
            v.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    animValue = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            v.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationRepeat(Animator animation) {
                    super.onAnimationRepeat(animation);
                    currentIndex++;
                    //current<4的时候是画4个圆 等于5的时候是圆缩小的动画 onDraw里面有判断
                    if (currentIndex == 5) {
                        currentIndex = 0;
                    }
    
                }
            });
            v.setDuration(400);
            v.setRepeatCount(ValueAnimator.INFINITE);
            v.setInterpolator(new AccelerateDecelerateInterpolator());
            v.start();
        }
    

    4,onDraw

    @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.rotate(-90, size / 2, size / 2);
            //每个圆所在正方形的长度
            int length = (size / 2 - interval);
            //圆的半径
            int radius = length / 2;
    
            for (int i = 0; i < 4; i++) {
                mPaint.setColor(COLORS[i]);
                //控制半径的变量 (0f - 1f)
                float tempValue = animValue;
                if (currentIndex < 4) {
                    //当currentIndex 大于 当前圆的下标时证明这个下标所代表的圆已经被绘制,所以直接画出来
                    if (currentIndex > i) {
                        tempValue = 1;
                    }
                    //当currentIndex 小于 当前圆的下标时证明这个下标所代表的圆正在等待绘制,隐藏掉
                    if (currentIndex < i) {
                        tempValue = 0;
                    }
                    //当前下标所代表的圆 动态变化
                    if (currentIndex == i) {
                        tempValue = animValue;
                    }
                    //PS上面的判断是我按照我自己的思路来进行的渐显(一个圆一个圆的显示),
                    // 你如果有更好的思路,请告诉我
                    //共同进步✧(≖  ≖✿)
                    //加油~
    
                } else {
                    //当currentIndex >=4的时候 的时候 走一个旋转动画 
                    canvas.rotate(90 * tempValue, size / 2, size / 2);
                    tempValue = Math.abs(0.7f - tempValue);
                }
                //顺时针旋转90° 画出每一个圆
                canvas.rotate(90, size / 2, size / 2);
                canvas.drawCircle(radius, radius, radius * tempValue, mPaint);
            }
        }
    
    • 结束~

    很简单的一个自定义Loading,效果还可以做的更好我懒得做了,初学自定义控件的朋友可以拿去练手,加油
    点个呗~
    Github传送门

    相关文章

      网友评论

        本文标题:还是自定义的加载框,Loading~

        本文链接:https://www.haomeiwen.com/subject/vhnvottx.html