Android自定义一个简单的登录按钮

无图言diao！

1.gif

一个简单的效果，点击登录按钮，整个按钮向中间缩进并且成圆形progressbar。

强调一点，在View中重写的onDraw(Canvas canvas)方法中千万不要有new这个操作！

实现原理，就是画一个圆角矩形canvas.drawRoundRect(RectF rect, float rx, float ry, Paint paint)，通过动画不停的改变RectF的宽度值来产生缩进效果，来一段代码压压惊；

   //width / 2 - height / 2 这个是整个矩形向中心移动的距离
        move = ValueAnimator.ofInt(0, width / 2 - height / 2);
        move.setDuration(1000);
        move.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                distance = (int) valueAnimator.getAnimatedValue();//获取改变的值 来改变圆角矩形的大小
                invalidate();//通知view去重绘

            }
        });

        move.start();

 canvas.drawRoundRect(new RectF(distance, 0, width - distance, height), circle, circle, paint);

这两端代码就可以达到缩进动画的效果了；接下来是progressbar：

 //在缩进动画完成后开始旋转progressbar
        move.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {

                rotate = ValueAnimator.ofInt(0,360);//0到360度旋转

                rotate .setInterpolator(new LinearInterpolator());//线型插值器
                rotate.setDuration(500);
                rotate.setRepeatCount(Animation.INFINITE);//设置重复
                rotate.setRepeatMode(ValueAnimator.RESTART);//设置重复模式
                rotate.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        rValue = (int) valueAnimator.getAnimatedValue();//获取值
                        invalidate();//重新开始绘制
                    }
                });
                rotate.start();
            }

        });

 canvas.rotate(rav, width / 2, height / 2);//旋转画布来实现转圈的效果
 canvas.drawCircle(width/2,height/2,circle,paint);//画圆
 canvas.drawArc(new RectF(width / 2 - circle + 20, 20, width / 2 + circle - 20, height - 20), 0, 140, false, paint1);//画圆内的线条

是不是很简单！展开的动画其实一个道理，有兴趣的可以自己写写看！