你必须知道的toolbar切换效果

最近公司需要重构旧项目，所以这段时间在做一些知识储备，了解其中的难点，为重构做准备。

其中有这样一个场景，普通的一个toolbar，【← title 搜索】点击搜索变成【←_】搜索栏，实现的方式很多种，当然点击直接去显示隐藏也能够，但这里为了能够照顾一下用户体验，所以在两者切换时使用动画效果来过渡。

学习是个好东西，趁这次又回顾了android动画的相关知识，其中还进了个小坑，属性动画的scale缩放效果并不会改变控件的宽高，所以在两个页面的互换的时候除了要做好动画效果，还需要监听动画的过程，以便切换控件的Visible属性，否则即使缩放变小用户看不到了但仍然占着原来的位置，点击事件还是不能发生在底下的控件上。

事不宜迟，分析实现的思路（做成一个自定义控件）：

1.实现布局（custom_layout）：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp">
    <RelativeLayout
        android:id="@+id/rl_1"
        android:background="#a4b5b5"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_alignParentRight="true"
            android:layout_width="48dp"
            android:id="@+id/iv_search"
            android:src="@drawable/search"
            android:padding="12dp"
            android:layout_height="48dp" />
    </RelativeLayout>
    <RelativeLayout
        android:visibility="gone"
        android:id="@+id/rl_2"
        android:layout_width="match_parent"
        android:background="#2b8b92"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="48dp"
            android:id="@+id/iv_back"
            android:padding="12dp"
            android:src="@drawable/back"
            android:layout_height="48dp" />
        <EditText
            android:layout_width="match_parent"
            android:layout_toRightOf="@id/iv_back"
            android:layout_height="match_parent" />
    </RelativeLayout>
</FrameLayout>

这里分为rl_1和rl_2，rl_2默认visible为gone，当点击rl_1中的按钮时则切换为rl_2，再点击 rl_2中的返回键时则切换为rl_1。

2：自定义view（CustomLayout）
“`
public class CustomLayout extends FrameLayout implements View.OnClickListener {
Context mContext;
private RelativeLayout mRl1;
private RelativeLayout mRl2;
public static final int SHOW_1 = 1;
public static final int SHOW_2 = 2;
private ImageView mIvSearch;
private ImageView mIvBack;

public CustomLayout(@NonNull Context context) {
    this(context,null);
}

public CustomLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);
}

public CustomLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context);
}

private void init(Context context) {
    mContext = context;
    LayoutInflater.from(mContext).inflate(R.layout.custom_layout, this, true);
    mIvSearch = ((ImageView) findViewById(R.id.iv_search));
    mIvBack = ((ImageView) findViewById(R.id.iv_back));

    mBtnSearch.setOnClickListener(this);
    mIvBack.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.iv_search:
            Toast.makeText(mContext, "view1", Toast.LENGTH_SHORT).show();
            ObjectAnimator animator1 = createAnimation(mRl1, "scaleX", 800, mRl1.getMeasuredWidth(), 1, 0);
            animator1.addListener(new ViewVisbleAnimationAdapter(mRl1, mRl2, SHOW_2));
            startAnimationSet(
                    animator1,
                    createAnimation(mRl2,"scaleX",800,0,0,1)
                    );

            break;
        case R.id.iv_back:
            Toast.makeText(mContext, "view2", Toast.LENGTH_SHORT).show();
            ObjectAnimator animator2 = createAnimation(mRl1, "scaleX", 800, mRl1.getMeasuredWidth(), 0, 1);
            animator2.addListener(new ViewVisbleAnimationAdapter(mRl1, mRl2, SHOW_1));
            startAnimationSet(
                    animator2,
                    createAnimation(mRl2,"scaleX",800,0,1,0)
            );
            break;
    }
}

/*
* 生成animition
* */
private ObjectAnimator createAnimation(View view,String property,int duration, int pivotX, float from, float to){
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, property, from, to);
    view.setPivotX(pivotX);
    view.setPivotY(0);
    animator.setDuration(duration);
    return animator;
}

/*
* 启动动画集合
* */
private AnimatorSet startAnimationSet(ObjectAnimator animator1,ObjectAnimator animator2) {
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.setDuration(animator1.getDuration());
    animatorSet.play(animator1).with(animator2);
    animatorSet.start();
    return animatorSet;
}

/*
*自定义监听器，只监听start与end时的状态
* */
class ViewVisbleAnimationAdapter extends AnimatorListenerAdapter{
    private final View view1;
    private final View view2;
    private final int showPoi;

    /*
    * showPoi：1表示想要显示1，2代表想要显示2
    * */
    public ViewVisbleAnimationAdapter(View view1, View view2,int showPoi){
        this.view1 = view1;
        this.view2 = view2;
        this.showPoi = showPoi;
    }
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        if (showPoi == SHOW_1) {
            view2.setVisibility(GONE);
        } else if(showPoi == SHOW_2){
            view1.setVisibility(GONE);
        }
    }

    @Override
    public void onAnimationStart(Animator animation) {
        super.onAnimationStart(animation);
        if (showPoi == SHOW_1) {
            view1.setVisibility(VISIBLE);
        }else if(showPoi == SHOW_2){
            view2.setVisibility(VISIBLE);
        }
    }
}

}

“`
代码很简单，入门的小伙伴也没压力的。
最后效果图如下，

两个布局之间相互切换，目前封装性比较差，自定义拓展性也是不行的，后期有时间会继续完善一下这个小玩意，第一次写简书，不知道有没有什么潜规则。哈哈