android - 共享元素过渡

原文 标签 android animation material-design android-5.0-lollipop

我在RecyclerView中有一个图标,在左边有一些文字。当您单击它时,与该项目相对应的新活动即开始,标题栏中央带有相同的图标,而其下方是文本。我要在此处实现共享元素过渡,以便图标的两个位置之间可以平滑移动,并且看起来像标题栏从该图标爆炸了一样。知道我该怎么做吗?像这样:https://developer.android.com/design/material/videos/ContactsAnim.mp4

最佳答案

这是我的朋友的示例代码

ListView或RecyclerView的单个项目

item.xml

<?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="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/img"
        android:transitionName="@string/transition_name"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView"
        android:text="txt"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:text="BUTTON TEXT"/>

</RelativeLayout>


detail_activity.xml

    <?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="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/img"
        android:transitionName="@string/transition_name"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:hint="Some Hint"/>

    <ImageView
        android:id="@+id/smallerImageView"
        android:src="@drawable/img2"/>

</RelativeLayout>


在活动代码中,如下所示在ListView中设置onItemClickListner

imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            ActivityOptionsCompat options = ActivityOptionsCompat.
                    makeSceneTransitionAnimation(this, imageView, getString(R.string.activity_image_trans));
            startActivity(intent, options.toBundle());
        }
        else {
            startActivity(intent);
        }
    }
});


SharedElement过渡的关键点是要设置动画的元素的xml属性。

android:transitionName="@string/activity_image_trans"


两种布局的过渡名称都应该相同。

****注意:** **
共享元素转换仅支持Lolipop和更高版本的Android。

相关文章:

jquery - Animate.css:滑动动画不起作用

android - 如何在Android(材质设计)中使用导航抽屉进行滚动活动

android - 导航抽屉:将标题添加到组,而不是项目

android - 如何使离子应用程序从应用程序本地的.json文件中读取json数据

android - 有关为与会议室中另一实体有一对多关系的实体插入记录的问题

android - 有没有理由在Android中使用support.v4库?

android - 如何在触摸时翻转每个GridView单元并显示其他图像?

c++ - 如何使用OpenGL确保Qt中动画的适当速度?

android - 尽管在API 19中运行良好,但在API级别16中未显示背景ImageView

javascript - React JS-如何设置下拉菜单的显示大小?