带有共享元素的 Android 片段转换

Posted 2023-04-13

【中文标题】带有共享元素的 Android 片段转换

【英文标题】：Android fragment transition with shared element

【发布时间】：2015-01-30 16:13:50

【问题描述】：

大家！ 我有2个片段。在一个片段中，我在卡片中有一个小图像。在 2d 片段中，我的布局标题中有相同​​的图像。我想使这个图像从一个片段到另一个片段的共享元素转换，就像在这个例子中http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B(1).gif

二维片段：

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_
android:layout_
android:background="#f2f4f7">
<CustomScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll_view"
    android:layout_
    android:layout_
    android:orientation="vertical"
    android:background="#f2f4f7">
    <LinearLayout
        android:id="@+id/content_wrapper"
        android:layout_
        android:layout_
        android:orientation="vertical"
        android:divider="@drawable/vertical_divider"
        android:showDividers="middle">
        <FrameLayout
            android:layout_
            android:layout_>
            <RelativeLayout
                android:id="@+id/header_wrapper"
                android:layout_
                android:layout_>
                <ImageView
                    android:id="@+id/share_image"
                    android:transitionName="imageTransition"
                    android:layout_
                    android:layout_
                    android:src="@drawable/friday"/>

第一个片段：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_marginTop="56dp"
android:background="#ff1e1e23">
<ImageView
    android:layout_
    android:layout_
    android:layout_marginTop="25dp"
    android:src="@drawable/menuicon1g"/>
<TextView
    android:layout_
    android:layout_
    android:layout_marginTop="25dp"
    android:gravity="center"
    android:textColor="#fff"
    android:textSize="22sp"/>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_
    android:layout_
    android:layout_marginTop="25dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="#fff"
    card_view:cardElevation="2dp">
    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical"
        android:gravity="center_horizontal">
        <ImageView
            android:id="@+id/share_image"
            android:transitionName="imageTransition"
            android:layout_
            android:layout_
            android:src="@drawable/friday"/>
        <ImageView
            android:layout_
            android:layout_
            android:layout_marginTop="20dp"
            android:src="@drawable/demo_calendar"/>
        <com.zagum.work.virtualfitness.CustomTextView
            xmlns:com.zagum.work.virtualfitness="http://schemas.android.com/apk/res/com.zagum.work.virtualfitness"
            android:id="@+id/date"
            android:layout_
            android:layout_
            android:textSize="18sp"
            android:layout_marginTop="10dp"
            com.zagum.work.virtualfitness:typeface="fonts/Roboto-Light.ttf"/>
        <TextView
            android:layout_
            android:layout_
            android:layout_marginTop="15dp"
            android:layout_marginBottom="40dp"
            android:gravity="center"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="18sp"
            android:textStyle="bold"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

交易：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) 
                View image = mRootView.findViewById(R.id.share_image);

                CurrentWorkoutFragment secondFragment = CurrentWorkoutFragment.newInstance();
                secondFragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.transition_move));

                FragmentTransaction trans = getFragmentManager().beginTransaction();
                trans.replace(R.id.container, secondFragment);
                trans.addToBackStack(null);
                trans.addSharedElement(image, image.getTransitionName());
                trans.commit();
            

transition_move.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
   <changeImageTransform />
   <changeBounds/>
</transitionSet>

但是没有图像动画发生。它出现在左上角调整大小。

【问题讨论】：

那个动画很有趣。我会说，如果您使用片段列表，当您单击片段时，它会启动并且动画会占据全屏。所有额外的视图都已经在片段中，但是它们被隐藏了，因为某些标志发生了变化

【参考方案1】：

查看this的答案。

因为我在 2 个片段之间共享的视图是另一个片段的子视图 在第二个片段中查看（RelativeLayout），您需要添加 ChangeTransform 过渡到您的 TransitionSet。

基本上你需要在你的transition_move.xml中添加一个<changeTransform/>