Android搜索栏平滑过渡

于 2017-01-09 17:46:31 发布
阅读量5.1k 收藏 11
点赞数
分类专栏： android 文章标签： 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界面

界面是这样的

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>

TwoActivity界面

界面是这样的，话说大家发现搜索那个框与左面的箭头，右面的文字重叠了么，这个是在代码里控制的，开始我还特意加了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神带给我们的技术分享。

妖虐丨丶
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值