Android ShrinkButton源码简析

刚刚发现一个开源项目ShrinkButton 感觉挺漂亮的(作者的代码地址:https://github.com/wusp/IndicatorBox#shrinkbutton),这里写图片描述
可以用在很多地方,登录的时候或者图片上传的时候,
代码不是很难就拿出来研究一下,并且稍微改动了一下更加符合自己的需求。简单介绍一下代码的思路.
ShrinkButton,设置圆角背景,radius 25dp, 高度45dp 当你点击按钮时候,button将会动态缩小自己的宽度。
利用属性动画里valueAnimator 将宽度缩小到与高度相等,圆角矩形按钮就变成了圆形按钮。此时再利用属性动画
画进度条。
就完成了,点击登录按钮,按钮变成了进度条的动作。很巧妙。
代码分析如下:

 bt = (ShrinkButton)findViewById(R.id.login);
        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e("gac", "login");
                Toast.makeText(MainActivity.this, "login", Toast.LENGTH_SHORT).show();

            }
        });

调用如此简单,跟普通的button 调用一样。
那么它是在什么时候让button改变宽度的呢?因为调用了onClickListener.它应该在点击事件上做了文章。

在ShrinkButton 找到事件处理的函数如下:
 @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (MotionEventCompat.getActionMasked(event)){
            case MotionEvent.ACTION_DOWN:
                if (!isWindowFocused){//如果界面还未完全显示 则此时不进行事件处理
                    return true;
                }
                if (animationState == STATE_EXPANDED){//当按钮的动作状态处于 扩展状态时候,(正常状态时候),此时点击事件发生,开始执行动画效果,
                    startWholeAnimation();              //并且应该onTouch返回fasle,不拦截onClickListener事件 ,按钮动作状态处于其它状态,
                    //this.callOnClick();               //此时onTouch返回true 拦截onClickListener 不让点击事件发生。
                    return false;
                }else{
                    return true;
                }


            case MotionEvent.ACTION_UP:

                return false;
        }
        return true;
    }

在这里你可以找到按钮状态变化的入口点startWholeAnimatoin
此时你需要搞明白一个变量animationState

 public static final int STATE_EXPANDED = 0;//按钮属于正常状态
    public static final int STATE_SHRINKING = 1;//按钮属于 正在收缩动作的状态
    public static final int STATE_SHRINKED = 2;//按钮完成收缩动作的状态
    public static final int STATE_PROGRESSING = 3;//按钮处于进度条执行状态
    public static final int STATE_EXPANDING = 4;//按钮处于 由进度条变为正常状态的动作时候

作者代码命名挺规范的,基本看变量名就知道按钮的状态了。

public void startWholeAnimation(){
        //animationState > 0 说明按钮此时不是正常状态,那么不管他处于什么状态,我们基本这个方法不需要执行了
        //这个方法是让按钮从正常状态变为进度条状态 isWindowFocused 是界面是否显示的变量 界面没有显示直接return
        if (animationState > 0 || !isWindowFocused){
            return;
        }
        //Initial those animation fraction firstly.
         initAnimationParameters();
         //初始化两个animation 收缩的animation和 进度条的animation
        if (mShrinkingController == null || mProgressingController == null){
            initShrinkingAnimationController();
            initProgressingAnimationController();
        }
        if (mShrinkingController.isRunning() || mProgressingController.isRunning()){
            mShrinkingController.end();
            mShrinkingController.cancel();
            mProgressingController.end();
            mProgressingController.cancel();
        }
        //执行收缩animation动作
        mShrinkingController.start();
    }

我们先来分析initShrinkingAnimationController这个方法:
大概思路就是,动作开始时候讲button的文本内容去掉,然后,改变animastate这个变量状态,
在动作变化的时候,lp.width = (int) (mButtonInitialWidth - (mButtonInitialWidth - lp.height) * (float) animation.getAnimatedValue());
lp.width不断变化,根据这个值animation.getAnimatedValue(0,1)最后lp.width = lp.height;
这样button就会变成一个园。
此时动作结束按钮 startProgressAnimation开始执行进度条animation
//button 开始收缩的的动作

 private void initShrinkingAnimationController(){
        mShrinkingController = ValueAnimator.ofFloat(0, 1);
        mShrinkingController.setDuration(mShrinkingDuration);
        mShrinkingController.setInterpolator(new DecelerateInterpolator());
        mShrinkingController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //不断更新按钮的宽度
                ViewGroup.LayoutParams lp = getLayoutParams();
                //最后放缩到button 宽高值一样 ,高的设置为45dp
                lp.width = (int) (mButtonInitialWidth - (mButtonInitialWidth - lp.height) * (float) animation.getAnimatedValue());
                setLayoutParams(lp);
            }
        });
        mShrinkingController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //Make text disappeared.
                buttonText = getText().toString();
                setText(null);
               // setEnabled(false);
                animationState = STATE_SHRINKING;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                animationState = STATE_SHRINKED;
                //放缩完成后 开始执行 进度条动作
                //setBackground(generateCircleDrawable(Color.RED));
                startProgressingAnimation();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

进度条的变化,作者将代码分离出来,利用一个接口。为什么别人代码写的总是那么好。
哎!
我改动的地方仅仅是,onTouch方法,我任务按钮处于正常状态,可以有点击事件。处于其它状态时候
点击事件应该不可以用的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值