android - 共享元素过渡仅适用于 2/3 的情况

Question

我正在研究共享元素转换并开发了一个包含 4 个 fragment 的测试应用程序。

在图片中您可以看到，第一个 Fragment 包含一条“立即开始”消息，单击它时我想用中间的 Fragment 替换容器。作为一个养眼的糖果，我想要一个使用共享元素过渡的动画。

问题
我的问题是，如果我将第一个 Fragment 留空(没有开始消息)并且我将 OnClickListener 设置为图标本身，则一切正常并带有漂亮的动画。但是，如果第一个 fragment 中包含该消息，只有第一个 图标(第二个 fragment ，中间的图片)不再有动画。它只是替换第一个 fragment 。奇怪的是，如果我更改我的 OnClickListener 并让它启动第二页(右图)，动画再次正常工作。因此只有第一个/左边的图标不提供动画，尽管所有方法和 XML 大多是 1:1 相同的。

由于我无法开发出更好的解决方案，因此每个“工具栏”都是在 Fragment 本身中设计的。

主要 Activity

 public class FirstStartupActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_firststartup);
    doFragmentTransaction(new MainFragment(), "TAG", false, null);
}

public void doFragmentTransaction(Fragment fragment, String tag, boolean addToBackStack, List<View> sharedElements){
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.ActivityFirstStartup_fragmentContainer, fragment, tag);
    if(addToBackStack){
        transaction.addToBackStack(tag);
    }
    if( sharedElements != null && !sharedElements.isEmpty()){
        for(int i = 0; i < sharedElements.size(); i++){
            View view = sharedElements.get(i);
            transaction.addSharedElement(view, view.getTransitionName());
        }
    }
    transaction.commit();
}}

带有消息的第一个 fragment

 public class MainFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_firststartup_home, container, false);

    View view = v.findViewById(R.id.relLayoutPageOne);
    final List<View> listview = new ArrayList<>();
    listview.add(view);
    View view2 = v.findViewById(R.id.relLayoutPageTwo);
    final List<View> listview2 = new ArrayList<>();
    listview2.add(view2);

    Button button = v.findViewById(R.id.buttonStart);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ((FirstStartupActivity)getActivity()).doFragmentTransaction(new UsernameFragment(), "test", true, listview);
            //((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
        }
    });

    RelativeLayout rel2 = v.findViewById(R.id.relLayoutPageTwo);
    rel2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
        }
    });

    return v;
}}

第二个 fragment 没有动画

 public class UsernameFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_firststartup_pgone, container, false);
    postponeEnterTransition();
    return v;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
        setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
    }
}}

第三个 fragment 工作

 public class CameraFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_firststartup_pgtwo, container, false);

    return v;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
        setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
    }
}}

第二个 fragment (中间的图片)替换时没有动画)

 <android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout2"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/draw_login_edittext">

</android.support.constraint.ConstraintLayout>

<RelativeLayout
    android:id="@+id/relLayoutPageTwo"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="4dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfileCam"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:transitionName="ProfileCam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testtwo" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/relLayoutPageThree"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfileGender"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testthree" />

</RelativeLayout>

<RelativeLayout
    android:transitionName="ProfilePic"
    android:layout_width="273dp"
    android:layout_height="210dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/draw_login_edittext_rounded"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/test" />
</RelativeLayout>

第一个 fragment (左图)

 <android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout2"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#a8655c">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
    android:transitionName="ProfilePic"
    android:id="@+id/relLayoutPageOne"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.049"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/test" />
</RelativeLayout>
<RelativeLayout
    android:id="@+id/relLayoutPageTwo"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfileCam"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
    android:id="@+id/relLayoutPageThree"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfileGender"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:forceHasOverlappingRendering="true"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:padding="25dp"
    android:transitionName="ProfilePic"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Bevor du loslegen könnst benötigen wir noch kurz ein paar Informationen über dich! :)"
        android:textAlignment="center"
        android:textColor="#BFFFFFFF" />
    <Button
        android:id="@+id/buttonStart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/text"
        android:layout_centerHorizontal="true"
        android:layout_marginHorizontal="15dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/draw_rounded_edittext_dark"
        android:text="Start now"
        android:textColor="#BFFFFFFF" />
</RelativeLayout>

第三个 fragment (右图)替换时的动画

 <android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout2"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/draw_login_edittext">

</android.support.constraint.ConstraintLayout>

<RelativeLayout
    android:id="@+id/relLayoutPageOne"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfilePic"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.049"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/test" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/relLayoutPageThree"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/draw_login_edittext_rounded"
    android:transitionName="ProfileGender"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testthree" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="273dp"
    android:layout_height="210dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="#c8c8c8"
    android:transitionName="ProfileCam"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@mipmap/testtwo" />
</RelativeLayout>

视觉描述

第一个图标不起作用，但第二个图标很有魅力由于某些原因，第一个 GIF 太快了，它正常弹出，唯一的问题是缺少动画

Answer 1

好吧，我试图改变一些事情，但我让一切变得更糟。然后我“修复”了它，现在它可以工作了，不幸的是我无法向您展示解决方案。我尝试再次完成代码

编辑: @LieForBanana 有解决方案，但我理解错了，事实上我的第一个 fragment 也有 Transition Name it (3x TransitionName ProfilePic)。我很惭愧，这只是一个愚蠢的错误