Android搜索栏平滑过渡

写在前面，本文所有代码及样式来自Wing大神。

http://blog.csdn.net/wingichoy/article/details/53968968

上面是原文链接

好了，上一篇文章学着使用android共享元素做界面跳转，后来浏览Wing神的博客，发现他更新了新的文章，于是立马照着敲了一遍。

看起来一模一样 0.0
这个demo共有两个类：MainActivity,TwoActivity

MainActivity的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.a69107.demo2.MainActivity">    <FrameLayout        android:layout_width="match_parent"        android:background="@android:color/holo_blue_light"        android:layout_height="150dp">        <TextView            android:layout_width="match_parent"            android:layout_height="45dp"            android:layout_gravity="top"            android:paddingLeft="15dp"            android:gravity="bottom"            android:text="Title"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/tv_main"            android:layout_width="match_parent"            android:layout_height="45dp"            android:background="@drawable/ele_search_bg"            android:layout_gravity="center"            android:layout_marginLeft="15dp"            android:layout_marginRight="15dp"            android:textColor="@android:color/white"            android:transitionName="shareTransition" />        <TextView            android:layout_width="match_parent"            android:layout_height="45dp"            android:layout_gravity="center"            android:gravity="center"            android:text="请输入搜索内容"            android:textColor="@android:color/black"            android:transitionName="shareTransition" />        <TextView            android:layout_width="match_parent"            android:layout_height="45dp"            android:gravity="center_vertical"            android:layout_gravity="bottom"            android:paddingLeft="15dp"            android:textColor="@android:color/white"            android:text="我是无关文字" />    </FrameLayout>    <TextView        android:layout_width="match_parent"        android:layout_height="45dp"        android:gravity="center"        android:text="我是无关文字" />    <TextView        android:layout_width="match_parent"        android:layout_height="45dp"        android:gravity="center"        android:text="我是无关文字" /></LinearLayout>

界面是这样的

MainActivity类代码

public class MainActivity extends AppCompatActivity {    private TextView tv;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tv=(TextView) findViewById(R.id.tv_main);        tv.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent intent=new Intent(MainActivity.this,TwoActivity.class);                //获取控件在屏幕中的坐标                int location[] = new int[2];                tv.getLocationOnScreen(location);                intent.putExtra("x",location[0]);                intent.putExtra("y",location[1]);                startActivity(intent);                overridePendingTransition(0,0);            }        });    }}

TwoActivity的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/two"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.a69107.demo2.MainActivity">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="150dp"        android:background="@android:color/holo_blue_light"        android:paddingTop="5dp">        <TextView            android:id="@+id/et_bg"            android:layout_width="match_parent"            android:layout_height="45dp"            android:layout_gravity="top"            android:layout_marginLeft="15dp"            android:layout_marginRight="15dp"            android:background="@drawable/ele_search_bg"            android:textColor="@android:color/white"            android:transitionName="shareTransition" />        <TextView            android:id="@+id/et_content"            android:layout_width="match_parent"            android:layout_height="45dp"            android:layout_gravity="top"            android:gravity="center"            android:text="请输入搜索内容"            android:textColor="@android:color/black"            android:transitionName="shareTransition" />        <ImageView            android:id="@+id/iv_arrow"            android:layout_width="20dp"            android:layout_height="20dp"            android:layout_gravity="top|left"            android:layout_marginLeft="10dp"            android:layout_marginTop="12dp"            android:gravity="center"            android:src="@drawable/arrow_right" />        <TextView            android:id="@+id/search_btn"            android:layout_width="wrap_content"            android:layout_height="45dp"            android:layout_gravity="top|right"            android:layout_marginRight="10dp"            android:gravity="center"            android:text="搜索"            android:textColor="@android:color/white"            android:transitionName="shareTransition" />    </FrameLayout>    <FrameLayout        android:id="@+id/fl"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/white"        android:gravity="center">    </FrameLayout></LinearLayout>

界面是这样的，话说大家发现搜索那个框与左面的箭头，右面的文字重叠了么，这个是在代码里控制的，开始我还特意加了margin，但在界面跳转中搜索框会骤然缩小一下，之后发现在代码里控制了搜索框的宽度，再加上margin的话就会有问题了。

TwoActivity类代码

public class TwoActivity extends AppCompatActivity {    private TextView et_bg;    private TextView et_content;    private ImageView back;    private TextView tv_search;    private FrameLayout fl;    private boolean finishing;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_two);        et_bg=(TextView) findViewById(R.id.et_bg);        et_content=(TextView) findViewById(R.id.et_content);        fl=(FrameLayout)findViewById(R.id.fl);        back=(ImageView)findViewById(R.id.iv_arrow);        tv_search=(TextView) findViewById(R.id.search_btn);        et_bg.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(!finishing){                    finishing=true;                    outAnimation();                }            }        });        //监听布局是否发生变化        et_bg.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @Override            public void onGlobalLayout() {                et_bg.getViewTreeObserver().removeOnGlobalLayoutListener(this);                inAnimation();            }        });    }    private void inAnimation() {        float originY=getIntent().getIntExtra("y",0);        //获取到搜索框在TwoActivity界面的位置        int[] location=new int[2];        et_bg.getLocationOnScreen(location);        //计算位置的差值        final float translateY=originY-(float)location[1];        //将第一个界面的位置设置给搜索框        et_bg.setY(et_bg.getY()+translateY);        //同步设置搜索框中的文字        et_content.setY(et_bg.getY()+(et_bg.getHeight()-et_content.getHeight())/2);        float top = getResources().getDisplayMetrics().density * 20;        //ValueAnimator是一个很厉害的东西，你只需要给他初始值和结束值，他会自动计算中间的过度        final ValueAnimator translateVa = ValueAnimator.ofFloat(et_bg.getY(), top);        //这个是由下移动到上面的监听        translateVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                et_bg.setY((Float) valueAnimator.getAnimatedValue());                et_content.setY(et_bg.getY() + (et_bg.getHeight() - et_content.getHeight()) / 2);                back.setY(et_bg.getY() + (et_bg.getHeight() - back.getHeight()) / 2);                tv_search.setY(et_bg.getY() + (et_bg.getHeight() - tv_search.getHeight()) / 2);            }        });        //这个是缩小搜索框的监听        ValueAnimator scaleVa = ValueAnimator.ofFloat(1, 0.8f);        scaleVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                et_bg.setScaleX((Float) valueAnimator.getAnimatedValue());            }        });        //这个是设置透明度        ValueAnimator alphaVa = ValueAnimator.ofFloat(0, 1f);        alphaVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                back.setAlpha((Float) valueAnimator.getAnimatedValue());                tv_search.setAlpha((Float) valueAnimator.getAnimatedValue());                fl.setAlpha((Float) valueAnimator.getAnimatedValue());            }        });        alphaVa.setDuration(500);        translateVa.setDuration(500);        scaleVa.setDuration(500);        alphaVa.start();        translateVa.start();        scaleVa.start();    }    private void outAnimation() {        float originY=getIntent().getIntExtra("y",0);        int[] location=new int[2];        et_bg.getLocationOnScreen(location);        final float translateY=originY-(float)location[1];        et_bg.setY(et_bg.getY()+translateY);        et_content.setY(et_bg.getY()+(et_bg.getHeight()-et_content.getHeight())/2);        float top = getResources().getDisplayMetrics().density * 20;        final ValueAnimator translateVa = ValueAnimator.ofFloat(top, et_bg.getY());        translateVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                et_bg.setY((Float) valueAnimator.getAnimatedValue());                et_content.setY(et_bg.getY() + (et_bg.getHeight() - et_content.getHeight()) / 2);                back.setY(et_bg.getY() + (et_bg.getHeight() - back.getHeight()) / 2);                tv_search.setY(et_bg.getY() + (et_bg.getHeight() - tv_search.getHeight()) / 2);            }        });        translateVa.addListener(new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animator) {            }            @Override            public void onAnimationEnd(Animator animator) {                finish();                overridePendingTransition(0, 0);            }            @Override            public void onAnimationCancel(Animator animator) {            }            @Override            public void onAnimationRepeat(Animator animator) {            }        });        ValueAnimator scaleVa = ValueAnimator.ofFloat(0.8f, 1);        scaleVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                et_bg.setScaleX((Float) valueAnimator.getAnimatedValue());            }        });        ValueAnimator alphaVa = ValueAnimator.ofFloat(1f, 0);        alphaVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                back.setAlpha((Float) valueAnimator.getAnimatedValue());                tv_search.setAlpha((Float) valueAnimator.getAnimatedValue());                fl.setAlpha((Float) valueAnimator.getAnimatedValue());            }        });        alphaVa.setDuration(500);        translateVa.setDuration(500);        scaleVa.setDuration(500);        alphaVa.start();        translateVa.start();        scaleVa.start();    }    @Override    public void onBackPressed() {        if(!finishing){            finishing=true;            outAnimation();        }    }}

好的，就是这些了。
最后感谢Wing神带给我们的技术分享。

---