共享元素转换使用片段不转换

6
AndroidStudio 2.3 Beta 1

我将尝试在片段中实现过渡效果,但使用的图像没有过渡效果,而是正常弹出。我创建了一个简单的应用程序来尝试解决这个问题。我有两个片段 ListMovieFragment 和 DetailMovieFragment,以及一个 MainActivity。用户将点击 ListMovieFragment 中的图像以转换到 DetailMovieFragment。
这是我的过渡 xml change_image_transform:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform/>
</transitionSet>

ListMovieFragment:

public class ListMovieFragment extends Fragment {
    public interface MovieSelectedListener {
        void onMovieSelected(int movieId);
    }
    private MovieSelectedListener mMovieSelectedListener;

    public ListMovieFragment() {
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mMovieSelectedListener = (MovieSelectedListener)context;
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mMovieSelectedListener = null;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        final View view = inflater.inflate(R.layout.fragment_list, container, false);
        final ImageView ivMoviePoster = (ImageView)view.findViewById(R.id.ivMoviePoster);

        ivMoviePoster.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mMovieSelectedListener != null) {
                    mMovieSelectedListener.onMovieSelected(12345);
                }
            }
        });

        Glide.with(getActivity())
                .load("https://image.tmdb.org/t/p/w185/qjiskwlV1qQzRCjpV0cL9pEMF9a.jpg")
                .placeholder(R.drawable.placeholder_poster)
                .centerCrop()
                .crossFade()
                .into(ivMoviePoster);

        return view;
    }
}

DetailMovieFragment

public class DetailMovieFragment extends Fragment {
    public DetailMovieFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_detail, container, false);

        final ImageView ivMovieDetailPoster = (ImageView)view.findViewById(R.id.ivMovieDetailPoster);

        Glide.with(getActivity())
                .load("https://image.tmdb.org/t/p/w185/qjiskwlV1qQzRCjpV0cL9pEMF9a.jpg")
                .placeholder(R.drawable.placeholder_poster)
                .centerCrop()
                .crossFade()
                .into(ivMovieDetailPoster);

        return view;
    }
}

主活动

public class MainActivity extends AppCompatActivity implements ListMovieFragment.MovieSelectedListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if(savedInstanceState == null) {
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.add(R.id.activity_main, new ListMovieFragment(), "listmoviefragment");
            fragmentTransaction.commit();
        }
    }

    @Override
    public void onMovieSelected(int movieId) {
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            /* Get the fragments that will be using the transition */
            ListMovieFragment listMovieFragment = new ListMovieFragment();
            DetailMovieFragment detailMovieFragment = new DetailMovieFragment();

            /* Inflate the transition */
            Transition changeTransition = TransitionInflater
                    .from(MainActivity.this)
                    .inflateTransition(R.transition.change_image_transform);

            Transition explodeTransition = TransitionInflater
                    .from(MainActivity.this)
                    .inflateTransition(android.R.transition.explode);

            /* Set the exit and return on the source fragment (ListMovieFragment) */
            listMovieFragment.setSharedElementReturnTransition(changeTransition);
            listMovieFragment.setExitTransition(explodeTransition);

            /* Set the enter on the destination fragment (MovieDetailFragment) */
            detailMovieFragment.setSharedElementEnterTransition(changeTransition);
            detailMovieFragment.setEnterTransition(explodeTransition);

            /* Get the shared imageview from the source fragment (MovieListFragment) */
            final ImageView ivSharedImage = (ImageView)findViewById(R.id.ivMoviePoster);

            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
            fragmentTransaction.addToBackStack("detailmoviefragment");
            fragmentTransaction.addSharedElement(ivSharedImage, getResources().getString(R.string.transition_poster_image));
            fragmentTransaction.commit();
        }
        else {
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
            fragmentTransaction.addToBackStack("detailmoviefragment");
            fragmentTransaction.commit();
        }
    }

    @Override
    public void onBackPressed() {
        if(getSupportFragmentManager().getBackStackEntryCount() > 0) {
            getSupportFragmentManager().popBackStackImmediate();
        }
        else {
            super.onBackPressed();
        }
    }
}

ListMovieFragment的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="6dp">

    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ivMoviePoster"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/placeholder_poster"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:transitionName="@string/transition_poster_image">
    </ImageView>
</LinearLayout>

DetailMovieFragment的布局:

<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"
    tools:context="me.androidbox.fragmenttransitions.detail.DetailMovieFragment">
    <ImageView
        android:id="@+id/ivMovieDetailPoster"
        android:layout_width="140dp"
        android:layout_height="160dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="112dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:layout_gravity="end"
        android:transitionName="@string/transition_poster_image"/>
</FrameLayout>

转换名称的字符串名称:

<string name="transition_poster_image">imagePoster</string>

实现看起来很简单,所以我认为我的错误是我忽略了某些东西。

非常感谢任何建议。

2个回答

12

在你的onMovieSelected方法中有两个问题:

  1. 你正在创建一个ListMovieFragment新实例,然后对其应用转场逻辑。 但忘记了你已经有了这个片段的实例(你在onCreate方法中创建了它)。 所以你需要从FragmentManager中检索现有的ListMovieFragment对象,并将你的转换应用于它。
  2. 你正在将转场逻辑应用于一个DetailMovieFragment实例,但随后又突然替换了该实例的ListMoveFragment

所以你修正后的onMovieSelected方法将是:

@Override
public void onMovieSelected(int movieId) {
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        /* Get the fragments that will be using the transition */
        ListMovieFragment listMovieFragment = (ListMovieFragment) getSupportFragmentManager().findFragmentByTag("listmoviefragment");
        DetailMovieFragment detailMovieFragment = new DetailMovieFragment();

        /* Inflate the transition */
        Transition changeTransition = TransitionInflater
                .from(MainActivity.this)
                .inflateTransition(R.transition.change_image_transform);

        Transition explodeTransition = TransitionInflater
                .from(MainActivity.this)
                .inflateTransition(android.R.transition.explode);

        /* Set the exit and return on the source fragment (ListMovieFragment) */
        listMovieFragment.setSharedElementReturnTransition(changeTransition);
        listMovieFragment.setExitTransition(explodeTransition);

        /* Set the enter on the destination fragment (MovieDetailFragment) */
        detailMovieFragment.setSharedElementEnterTransition(changeTransition);
        detailMovieFragment.setEnterTransition(explodeTransition);

        /* Get the shared imageview from the source fragment (MovieListFragment) */
        final ImageView ivSharedImage = (ImageView)findViewById(R.id.ivMoviePoster);

        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.activity_main, detailMovieFragment, "detailmoviefragment");
        fragmentTransaction.addToBackStack("detailmoviefragment");
        fragmentTransaction.addSharedElement(ivSharedImage, getResources().getString(R.string.transition_poster_image));
        fragmentTransaction.commit();
    } else {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
        fragmentTransaction.addToBackStack("detailmoviefragment");
        fragmentTransaction.commit();
    }
}

现在应该可以正常工作了。

附言:我使用了你的代码并运行了它,注意到你有一些奇怪的转换,所以如果你遇到问题,可以查看这篇很棒的文章,如何使片段之间的转换更加流畅和用户友好:)


谢谢,这很有帮助。 - ant2009
在进行了所有更正之后,转换进入detailFragment看起来很棒。但是当按下返回按钮时,转换不会发生。我以为当从后堆栈中弹出片段时,这会自动发生。这正确吗? - ant2009
是的,你可能需要在 detailMovieFragment 中添加返回转换,像这样:detailMovieFragment.setSharedElementReturnTransition(changeTransition);。猜测这应该可以解决你的问题。 - romtsn
那实际上并没有起作用。不过,感谢你的帮助。 - ant2009
嗯,有一件事 - 如果您从“MainActivity”中删除“onBackPressed”方法的实现怎么办?但是保留返回转换。 - romtsn
我已经测试了使用onBackPressed和不使用它的情况,结果是相同的。我在这篇新文章中放置了一个git动画,您可以在这里看到发生了什么:https://dev59.com/J1gR5IYBdhLWcg3wbcv1 - ant2009

3

在添加到片段事务时不要创建新的Fragment对象,而是重复使用应用了进入和退出转换效果的现有片段。

      public class MainActivity extends AppCompatActivity implements ListMovieFragment.MovieSelectedListener {

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                if(savedInstanceState == null) {
                    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        ListMovieFragment listMovieFragment = new ListMovieFragment();
                        Transition changeTransition = TransitionInflater
                                .from(MainActivity.this)
                                .inflateTransition(R.transition.change_image_transform);

                        Transition explodeTransition = TransitionInflater
                                .from(MainActivity.this)
                                .inflateTransition(android.R.transition.explode);
                        listMovieFragment.setSharedElementReturnTransition(changeTransition);
                        listMovieFragment.setExitTransition(explodeTransition);
                        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        //don't create new  ListMovieFragment use existing listMovieFragment instance
                        fragmentTransaction.add(R.id.activity_main, listMovieFragment, "listmoviefragment");
                        fragmentTransaction.commit();
                    }else {
                        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.add(R.id.activity_main, new ListMovieFragment(), "listmoviefragment");
                        fragmentTransaction.commit();
                    }
                }
            }

            @Override
            public void onMovieSelected(int movieId) {
                if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    /* Get the fragments that will be using the transition */
                    ListMovieFragment listMovieFragment = new ListMovieFragment();
                    DetailMovieFragment detailMovieFragment = new DetailMovieFragment();

                    /* Inflate the transition */
                    Transition changeTransition = TransitionInflater
                            .from(MainActivity.this)
                            .inflateTransition(R.transition.change_image_transform);

                    Transition explodeTransition = TransitionInflater
                            .from(MainActivity.this)
                            .inflateTransition(android.R.transition.explode);

                    /* Set the exit and return on the source fragment (ListMovieFragment) */
                    listMovieFragment.setSharedElementReturnTransition(changeTransition);
                    listMovieFragment.setExitTransition(explodeTransition);

                    /* Set the enter on the destination fragment (MovieDetailFragment) */
                    detailMovieFragment.setSharedElementEnterTransition(changeTransition);
                    detailMovieFragment.setEnterTransition(explodeTransition);

                    /* Get the shared imageview from the source fragment (MovieListFragment) */
                    final ImageView ivSharedImage = (ImageView)findViewById(R.id.ivMoviePoster);

                    FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                    //don't create new  DetailMovieFragment use existing detailMovieFragment instance
                    fragmentTransaction.replace(R.id.activity_main, detailMovieFragment, "detailmoviefragment");
                    fragmentTransaction.addToBackStack("detailmoviefragment");
                    fragmentTransaction.addSharedElement(ivSharedImage, getResources().getString(R.string.transition_poster_image));
                    fragmentTransaction.commit();
                }
                else {
                    FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                    fragmentTransaction.replace(R.id.activity_main, new DetailMovieFragment(), "detailmoviefragment");
                    fragmentTransaction.addToBackStack("detailmoviefragment");
                    fragmentTransaction.commit();
                }
            }
            @Override
            public void onBackPressed() {
                if(getSupportFragmentManager().getBackStackEntryCount() > 0) {
                    getSupportFragmentManager().popBackStackImmediate();
                }
                else {
                    super.onBackPressed();
                }
            }
        }

3
谢谢,这很有帮助。 - ant2009

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接