Question

我在RecyclerView中有一个图标，左边是一些文字。当您单击它时，将启动与该项目对应的新活动，并在标题栏的中心使用相同的图标，并在其下方显示文本。我想在这里实现共享元素转换，以便在图标的两个位置之间有一个平滑的移动，看起来标题栏从该图标展开。知道我怎么能这样做吗？这样的事情：https://developer.android.com/design/material/videos/ContactsAnim.mp4

Answer 1

以下是我朋友的示例代码

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"

两种布局的转换名称应相同。

****注意：** ** Shared Element Transition仅支持Lolipop和uper版本的Android。

共享元素转换

1 个答案: