实现简书App搜索框伸缩效果

前言

看到简书App搜索页面的效果，感觉不错。主要实现还是靠安卓提供的ObjectAnimator和系统为我们提供的Transition框架。效果如下

GIF.gif

1.使用ObjectAnimator实现

 private void setAnimator(ObjectAnimator objectAnimator, final int status) {
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (status == 0) {
                    getBinding().tvTitle.setText("搜索");
                } else if (status == 1) {
                    getBinding().tvTitle.setText("搜索简书的内容和朋友");
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        objectAnimator.setDuration(100);
        objectAnimator.start();
    }

这个方法主要是执行动画之后监听改变文字状态，这里需要注意的是ObjectAnimator本身没有给我们提供改

变View的宽高属性变化的属性

以下是属性动画常用属性值：

translationX和translationY：作为一种增量来控制View对象从他容器的左上角坐标偏移的位置

rotation rotationX和rotationY：控制View围绕支点进行2D和3D的旋转

scaleX和scaleY：控制View围绕他的支点进行2D旋转

pivotX和pivotY：控制View对象的支点位置，围绕这个支点进行旋转和缩放的处理，默认情况下支点位置为对象的中心点

如果一个属性没有get和set方法可以通过包裹类来实现。

public class ViewWrapper {
    private View view;

    public ViewWrapper(View view) {
        this.view = view;
    }

    //宽度Setter方法
    public void setWidth(int width) {
        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
        layoutParams.width = width;
        view.setLayoutParams(layoutParams);
        view.invalidate();
    }

    public int getWidth() {
        return view.getLayoutParams().width;
    }
}

这里是实现改变宽度的方法，应用在scrollview监听里面如下

 getBinding().scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                //改变toolbar的透明度
                changeToolbarAlpha();
                if (getBinding().scrollView.getScrollY() >= getBinding().img.getHeight() - getBinding().layoutToolbar.getHeight() && !isExpand) {
//                    exPand();//靠系统提供的Transition实现view宽度改变
                    isExpand = true;
                    ObjectAnimator objectAnimator = ObjectAnimator.ofInt(new ViewWrapper(getBinding().layoutTitle), "width", ScreenWidth);//这是靠动画来改变view宽度
                    setAnimator(objectAnimator, 1);
                } else if (getBinding().scrollView.getScrollY() <= 0 && isExpand) {
//                    reDuce();
                    isExpand = false;
                    ObjectAnimator objectAnimator = ObjectAnimator.ofInt(new ViewWrapper(getBinding().layoutTitle), "width", dip2px(70));
                    setAnimator(objectAnimator, 0);
                }
            }
        });

ScreenWidth是屏幕的宽度，dip2px(70)是固定宽度，这些可以自己按需求定制。这里引入一个isExpand是为了防止动画重复执行，这点在做其他动画效果同样适用，需要注意。此方法是借鉴本篇文章而来https://www.jianshu.com/p/4419f6448d88，这里没有指明自定义set方法实现改变view宽度，所以做个补充。

2.利用系统为我们提供的Transition框架

 private void exPand() {
        getBinding().tvTitle.setText("搜索简书的内容和朋友");
        RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams)       getBinding().layoutTitle.getLayoutParams();
        LayoutParams.width = RelativeLayout.LayoutParams.MATCH_PARENT;
        LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
        getBinding().layoutTitle.setLayoutParams(LayoutParams);
        //开始动画
        beginDelayedTransition(getBinding().layoutTitle);
    }

private void beginDelayedTransition(ViewGroup view) {
        transitionSet = new AutoTransition();
        transitionSet.setDuration(200);
        TransitionManager.beginDelayedTransition(view, transitionSet);
    }

利用系统提供的AutoTransition创建一个缺省转换,淡入/淡出,在一个场景中移动和调整大小，当view改变时。
第二种方法需要引入design包兼容

compile 'com.android.support:design:27.0.2'

关于toolbar的渐变可以看文末的源码实现，需要注意的是一定要给toolbar设置一个初始背景色，不然会包没有背景引用空指针异常。

注意

需要给文字设置单行显示，不然会有一个闪动，利用Transition时候需要给文字设置宽高自适应，这里我也不太明白为什么设置高度全充满会闪烁一下。
最后附上源码
https://github.com/NullRoutine/databindinglibrary
直接查看AnimatorActivity即可。