最近公司需要重構舊項目，所以這段時間在做一些知識儲備，了解其中的難點，為重構做準備。

其中有這樣一個場景，普通的一個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);
            }
        }
    }
}

代碼很簡單，入門的小伙伴也沒壓力的。
最后效果圖如下，

yes.gif

兩個布局之間相互切換，目前封裝性比較差，自定義拓展性也是不行的，后期有時間會繼續完善一下這個小玩意，第一次寫簡書，不知道有沒有什么潛規則。哈哈