Android实现饿了么搜索框效果（兼容低版本）ValueAnimator

最近业务需求做个类似饿了么首页搜索框效果，在网上搜了一下也有其他博客做过，效果挺像的，但是展示效果不太好，会导致搜索框内容变形。

后来自己就模仿了一下，自己写了实一下，现起来也很简单，主要是使用到ValueAnimator，先看效果。

package com.lel.search;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.lel.search.databinding.ActivitySearchBinding;

public class SearchActivity extends AppCompatActivity {

    ActivitySearchBinding mBinding;
    private int mWidth,mCurrWidth,mHeight,mCurrHeight;
    private int mLeftMargin,mCurrLeftMargin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWidth = getIntent().getIntExtra("width",0);
        mHeight = getIntent().getIntExtra("height",0);
        mLeftMargin = getIntent().getIntExtra("leftMargin",0);
        mBinding = DataBindingUtil.setContentView(this,R.layout.activity_search);
        inputAnimator(mBinding);
        mBinding.btnNavBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                outputAnimator(mBinding);
            }
        });
    }



    /**
     * 进场动画
     * @param viewBinding
     */
    public void inputAnimator(final ActivitySearchBinding viewBinding){
        viewBinding.rvList.getBackground().setAlpha(0);
        final RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewBinding.searchContainer.getLayoutParams();
        final LinearLayout.LayoutParams lp2 = (LinearLayout.LayoutParams) viewBinding.layoutSearch.getLayoutParams();
        final LinearLayout.LayoutParams lp3 = (LinearLayout.LayoutParams) viewBinding.superContainer.getLayoutParams();
        ValueAnimator valueAnimator = ValueAnimator.ofFloat( 0f,1.0f);
        valueAnimator.setDuration(250);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 0.0~1.0
                float value= (float) animation.getAnimatedValue();
                viewBinding.btnNavBack.setAlpha(value);
                viewBinding.tvSearch.setAlpha(value);
                viewBinding.rvList.getBackground().setAlpha((int) (255 * value));
                // 搜索框宽度从100%到75%
                lp.width = (int)(mWidth - (mWidth * 0.25 * value));
                mCurrWidth = lp.width;
                viewBinding.searchContainer.setLayoutParams(lp);
                // 搜索框父控件高度从100dp到56dp
                lp3.height = (int)(mHeight - ((mHeight - dip2Px(56)) * value));
                mCurrHeight = lp3.height;
                viewBinding.superContainer.setLayoutParams(lp3);
                // 搜索框中间内容向左偏移
                mCurrLeftMargin = (int) (mLeftMargin * value);
                lp2.setMargins(- mCurrLeftMargin,0,0,0);
                viewBinding.layoutSearch.setLayoutParams(lp2);
            }
        });

        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                KeyboardUtils.openKeyboard(viewBinding.etSearch,SearchActivity.this);
            }
        });
        valueAnimator.start();
    }


    /**
     * 退场动画
     * @param viewBinding
     */
    public void outputAnimator(final ActivitySearchBinding viewBinding){
        final RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewBinding.searchContainer.getLayoutParams();
        final LinearLayout.LayoutParams lp2 = (LinearLayout.LayoutParams) viewBinding.layoutSearch.getLayoutParams();
        final LinearLayout.LayoutParams lp3 = (LinearLayout.LayoutParams) viewBinding.superContainer.getLayoutParams();
        ValueAnimator valueAnimator = ValueAnimator.ofFloat( 1.0f,0.0f);
        valueAnimator.setDuration(250);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value= (float) animation.getAnimatedValue();
                viewBinding.btnNavBack.setAlpha(value);
                viewBinding.tvSearch.setAlpha(value);
                viewBinding.rvList.getBackground().setAlpha((int) (255 * value));
                lp.width = (int)(mCurrWidth + (mWidth * 0.25 * (1- value)));
                viewBinding.searchContainer.setLayoutParams(lp);
                lp3.height = (int)(mCurrHeight + ((mHeight - mCurrHeight) * (1- value)));
                viewBinding.superContainer.setLayoutParams(lp3);
                lp2.setMargins((int) (-mCurrLeftMargin + mLeftMargin * (1- value)),0,0,0);
                viewBinding.layoutSearch.setLayoutParams(lp2);
            }
        });

        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                KeyboardUtils.closeKeyboard(viewBinding.etSearch,SearchActivity.this);
                finish();
                // 发现在某些手机系统自带的退场动画无法取消，强制使用自定义的退场动画 （其实动画什么也没做）
                overridePendingTransition(R.anim.enter, R.anim.exit);
            }
        });
        valueAnimator.start();
    }

    /** Dip换Px */
    public int dip2Px(int dip) {
        float density = getResources().getDisplayMetrics().density;
        int px = (int)(dip * density + .5f);
        return px;
    }

}

本项目Github地址：https://github.com/huangzhangliang/EleSearchLayout

推荐一下另一个项目，MvvM结合Presenter快速开发架框：

https://github.com/huangzhangliang/MvvMBaseProject