Fragment 和 Activity 之间的 ImageView 共享元素转换

Question

我正在查看器中显示电影图像。每当用户选择图像时，它将被动画化（调整大小）并绘制在另一个活动上。问题是我无法正确实现动画。

这是我的 viewpager 的代码（在 MoviesPager.java 片段内）：

View v = inflater.inflate(R.layout.pager_fragment, container, false);
poster = (ImageView) v.findViewById(R.id.selectedMoviePoster);
final View sharedView=poster;
final String transitionName=y.getOriginalTitle();
ActivityCompat.startActivity(getActivity(),sendMovie, ActivityOptions.makeSceneTransitionAnimation(getActivity(),sharedView,transitionName).toBundle());

这里的“y”是要显示的电影对象。

这是实现viewpager的MainActivity.java的代码：

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);//=<item name="android:windowActivityTransitions">true</item>*/
getWindow().setExitTransition(new Fade());//=<item name="android:windowExitTransition">@transition/fade</item>
getWindow().setSharedElementExitTransition(new ChangeImageTransform());//same as above

这是显示电影详情的Movie.java代码

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
getWindow().setEnterTransition(new Fade());
getWindow().setSharedElementEnterTransition(new ChangeImageTransform());

过渡名称设置为：

1) 在 activity_main.xml

中

    <android.support.v4.view.ViewPager
    android:id="@+id/currentMoviesViewPager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:transitionName="viewPagerTransition"/>

2) 在 activity_movie.xml

中

    <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorAccent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll">

        <ImageView
            android:id="@+id/selectedMoviePoster"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="1"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="@android:color/white"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="1"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

3) 在 pager_fragment.xml 这是 viewpager 片段的 xml

    <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    card_view:cardElevation="40dp"
    card_view:cardCornerRadius="4dp"
    android:clipChildren="false"
    android:clipToPadding="false">


    <ImageView
        android:id="@+id/selectedMoviePoster"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ProgressBar
        android:id="@+id/loadPosterProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</android.support.v7.widget.CardView>

我在这两个活动中都使用Universal Image Loader 来下载和显示图像。

如果可能的话，我可以在加载之前存储图像，这样我就不必每次都下载。将图像大小调整为 imageview 也无法正常工作。

我为这两个活动使用了两个不同的主题，这里是代码。

4) styles.xml：

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@android:color/darker_gray</item>
    <item name="android:windowContentTransitions">true</item>
</style>

<style name="Theme.AppCompat.Light.FullScreen">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowBackground">@android:color/darker_gray</item>
    <item name="android:windowContentTransitions">true</item>
</style>

Answer 1

你可以为这个过渡做的是：

                    View sharedView = holder.event_pic;
                    String transitionName = mContext.getString(R.string.event_image);
                    Intent intent_event_description = new Intent(mContext, EventDescription.class);
                    if (Build.VERSION.SDK_INT >= 21) {
                        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(activity, sharedView, transitionName);
                        mContext.startActivity(intent_event_description, transitionActivityOptions.toBundle());
                    }

确保为两张图片提供相同的 ID。

在您的风格主题中：

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

请为两张图片提供相同的过渡名称：

           <ImageView
            android:id="@+id/selectedMoviePoster"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax"
            android:transitionName="selectedMoviePoster"
            app:layout_collapseParallaxMultiplier="1"/>

            <ImageView
             android:id="@+id/selectedMoviePoster"
             android:layout_width="match_parent"
             android:transitionName="selectedMoviePoster"
             android:layout_height="match_parent"/>