ViewPager 中的片段和新片段之间的共享元素转换答案

【问题标题】：Shared element transition between fragment in ViewPager and new fragmentViewPager 中的片段和新片段之间的共享元素转换
【发布时间】：2017-07-24 15:34:22
【问题描述】：

有没有办法使用共享元素从 ViewPager 中的片段转换为新片段？

编辑

我有一个 MainActivity 和包含 FragmentA 的 ViewPager。从那我想用共享元素转换打开FragmentB。

我创建了一个示例项目，您可以在下面看到。如果我删除 ViewPager 并定期打开 FragmentA，共享元素转换工作正常，但是一旦我将 ViewPager 添加到项目中，就不会出现任何转换。

这是MainActivity的代码

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ViewPager mViewPager = (ViewPager)findViewById(R.id.viewpager);

    FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
        private int NUM_ITEMS = 1;
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new FragmentA();
                default:
                    return null;
             }
        }
        @Override
        public int getCount() {
            return NUM_ITEMS;
        }
    };
    mViewPager.setAdapter(adapter);
    }
}

MainActivity 的 XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.gustafwennerstrom.testeb.MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/viewpager"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

这是FragmentA的代码

public class FragmentA extends Fragment {
    FrameLayout root;

    public FragmentA() {}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        root = (FrameLayout)inflater.inflate(R.layout.fragment_, null);
        ImageView image = (ImageView) root.findViewById(R.id.testImage);
        image.setOnClickListener(openFragment);
        return root;

    }

    private View.OnClickListener openFragment = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ImageView sharedImage = (ImageView)root.findViewById(R.id.testImage);
            getFragmentManager()
                .beginTransaction()
                .addSharedElement(sharedImage, ViewCompat.getTransitionName(sharedImage))
                .addToBackStack(getTag())
                .replace(android.R.id.content, new FragmentB())
                .commit();
    };
}

FragmentA 的 XML（FragmentB 看起来非常相似）

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_a"
    android:background="@color/colorAccent"
    tools:context="com.example.gustafwennerstrom.testeb.FragmentA">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/yo"
        android:transitionName="myImage"
        android:id="@+id/testImage"/>
</FrameLayout>

这是fragmentB

public class FragmentB extends Fragment {
    public FragmentB() {}

    @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)
            .setDuration(100));
         }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_fragment_b, container, false);

    }
}

在styles.xml我添加了这行代码：

<item name="android:windowContentTransitions">true</item>

【问题讨论】：

为什么不呢？你有什么问题？
没有过渡出现。只有当我在 ViewPager 之外打开片段时才会出现
this是你的问题吗？
是的。我已经从那里尝试过解决方案，但我想我做错了什么。据我了解，我需要告诉程序等待 MainActivity 中的 postponeEnterTransition 进行转换。然后当在 FragmentB 中创建共享视图时，我可以调用 startPostponedEnterTransition。但我的问题仍然存在...... @MidasLefko
那个问题有两个问题...

标签： java android android-viewpager shared-element-transition

【解决方案1】：

解决方案/解决方法

好吧，我放弃了让它在包含 ViewPager 的片段之间工作。从this thread我们可以看出：

ViewPager 中的 Fragmnet 加载有延迟，这意味着 Activity 返回的速度比 ViewPager 中包含的 Fragmnet 快得多

因此，我需要延迟过渡，直到内容加载完毕。为了延迟过渡，我不能使用postponeEnterTransition ()，因为在加载片段时我确实不能使用makeSceneTransitionAnimation(Activity, android.util.Pair[])，只有活动。来自文档：

必须调用startPostponedEnterTransition() 以允许Activity 启动转换。如果Activity没有使用makeSceneTransitionAnimation(Activity, android.util.Pair[])，那么这个方法什么都不做。

我将FragmentB 更改为Activity，现在它工作正常！如果您找到可以从 ViewPager 内部转换到 Fragment 的解决方案，请随时发布。

【讨论】：