仿百度糯米团顶部搜索栏动画效果

看到百度糯米6.7版本 顶部搜索栏有个动画效果如下：

首先 这不是个简单的缩放变宽的动画，因为里面的字体整体左移。
所以 应该可以做成两个重叠的布局，上层的做左移动画，底层的右移动画。
反之就动画反过来。

直接上代码：

`package com.imagedemo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;

/**
* Created by zyh on 2016/8/1.
* 可以左右放缩的标题组合。
*/
public class ExpandSearchTextView extends FrameLayout {

private View homeSearchBarTV1;
private View homeSearchBarTV2;
private View homeSearchBarTV3;

public ExpandSearchTextView(Context context) {
    this(context, null);
}

public ExpandSearchTextView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public ExpandSearchTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private Animation expand_left;
private Animation expand_right;
private Animation collapse_left;
private Animation collapse_right;
private boolean mIsExpand = true;

private void init() {
    LayoutInflater.from(getContext()).inflate(R.layout.layout_expand, this, true);
    homeSearchBarTV1 = findViewById(R.id.homeSearchBarTV1);
    homeSearchBarTV2 = findViewById(R.id.homeSearchBarTV2);
    homeSearchBarTV3 = findViewById(R.id.homeSearchBarTV3);
    expand_left = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,-0.13f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f);
    expand_left.setDuration(300);
    expand_left.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if (homeSearchBarTV1.getVisibility() != View.GONE) {
                homeSearchBarTV1.setVisibility(View.GONE);
            }
            if (homeSearchBarTV2.getVisibility() != View.GONE) {
                homeSearchBarTV2.setVisibility(View.GONE);
            }
            if (homeSearchBarTV3.getVisibility() != View.VISIBLE) {
                homeSearchBarTV3.setVisibility(View.VISIBLE);
            }
        }
    });
    expand_right = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0.13f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f);
    expand_right.setDuration(300);
    expand_right.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if (homeSearchBarTV1.getVisibility() != View.GONE) {
                homeSearchBarTV1.setVisibility(View.GONE);
            }
            if (homeSearchBarTV2.getVisibility() != View.GONE) {
                homeSearchBarTV2.setVisibility(View.GONE);
            }
            if (homeSearchBarTV3.getVisibility() != View.VISIBLE) {
                homeSearchBarTV3.setVisibility(View.VISIBLE);
            }
        }
    });
    collapse_left =  new TranslateAnimation(Animation.RELATIVE_TO_PARENT,-0.13f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f);
    collapse_left.setDuration(300);
    collapse_left.setAnimationListener(new Animation.AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            if (homeSearchBarTV1.getVisibility() != View.VISIBLE) {
                homeSearchBarTV1.setVisibility(View.VISIBLE);
            }
            if (homeSearchBarTV2.getVisibility() != View.VISIBLE) {
                homeSearchBarTV2.setVisibility(View.VISIBLE);
            }
            if (homeSearchBarTV3.getVisibility() != View.GONE) {
                homeSearchBarTV3.setVisibility(View.GONE);
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
        }
    });
    collapse_right = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0.13f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f,Animation.RELATIVE_TO_PARENT,0f);
    collapse_right.setDuration(300);
    collapse_right.setAnimationListener(new Animation.AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            if (homeSearchBarTV1.getVisibility() != View.VISIBLE) {
                homeSearchBarTV1.setVisibility(View.VISIBLE);
            }
            if (homeSearchBarTV2.getVisibility() != View.VISIBLE) {
                homeSearchBarTV2.setVisibility(View.VISIBLE);
            }
            if (homeSearchBarTV3.getVisibility() != View.GONE) {
                homeSearchBarTV3.setVisibility(View.GONE);
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
        }
    });
}

public void collapse() {
    if (mIsExpand) {
        mIsExpand = false;
        homeSearchBarTV2.clearAnimation();
        homeSearchBarTV1.clearAnimation();
        homeSearchBarTV1.startAnimation(expand_left);
        homeSearchBarTV2.startAnimation(expand_right);
    }
}

public void expand() {
    if (!mIsExpand) {
        mIsExpand = true;
        homeSearchBarTV2.clearAnimation();
        homeSearchBarTV1.clearAnimation();
        homeSearchBarTV1.startAnimation(collapse_left);
        homeSearchBarTV2.startAnimation(collapse_right);
    }
}

public boolean isExpand() {
    return mIsExpand;
}

}
`
布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:id="@+id/homeSearchBarTV2"
        android:layout_width="270dp"
        android:layout_height="40dp"
        android:background="@drawable/text_input_bg_selector"
        android:clickable="true"
        android:drawablePadding="10dp"
        android:singleLine="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/homeSearchBarTV1"
        android:layout_width="270dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/text_input_bg_selector"
        android:clickable="true"
        android:drawableLeft="@drawable/search_h"
        android:drawablePadding="10dp"
        android:gravity="left|center_vertical"
        android:paddingLeft="10dp"
        android:singleLine="true"
        android:text="请输入关键字"
        android:textColor="@color/text_color_qianhui_a3a4a4"
        android:textSize="13.75sp" />

    <TextView
        android:id="@+id/homeSearchBarTV3"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:background="@drawable/text_input_bg_selector"
        android:clickable="true"
        android:drawableLeft="@drawable/search_h"
        android:drawablePadding="10dp"
        android:gravity="left|center_vertical"
        android:paddingLeft="10dp"
        android:singleLine="true"
        android:text="请输入关键字"
        android:textColor="@color/text_color_qianhui_a3a4a4"
        android:textSize="13.75sp"
        android:visibility="gone" />
</RelativeLayout>

其实就是三个TextView 互相变化。
然后调用expand()和collapse()这两个方法控制展开和折叠即可。

最终效果如下：

（PS: 虽然照猫画虎，最终效果一模一样，哈哈哈）