与CoordinatorLayout和CollapsingToolbarLayout组合使用时,共享元素转换不起作用。

13

我的应用程序主屏幕包含一组图像的网格视图。当用户选择图像时,将使用共享元素转换启动详细活动,该转换将所选网格图像动画到详细活动中的 CardView 中配对的图像。

在升级详细视图 XML 布局以包括 CoordinatorLayout 和 CollapsingToolbarLayout 后,共享元素转换将图像视图移动到详细活动(“进入”活动)中错误的位置。框架似乎忽略了整个 AppBarLayout 和内部 CollapsingToobarLayout 的偏移量,并将动画移动到目标图像视图所在的 CardView 上面没有 CollapsingToolBarLayout 的情况下图像大致的位置。

通过向 activity_detail.xml 的任何一个 CardView 添加 ImageView(具有 transitionName),可以在 Chris Banes 的 cheesesquare 示例应用程序 中复制此问题:

<ImageView
 android:id="@+id/imageView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/ic_launcher"
 android:transitionName="sharedImage" />

然后在CheeseListFragment.java的onBindViewHolder中设置共享元素过渡,如下所示:

@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.mBoundString = mValues.get(position);
        holder.mTextView.setText(mValues.get(position));

        holder.mView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Context context = v.getContext();
                Intent intent = new Intent(context, CheeseDetailActivity.class);
                intent.putExtra(CheeseDetailActivity.EXTRA_NAME, holder.mBoundString);

                holder.mImageView.setTransitionName("sharedImage");                        
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(
                                getActivity(v.getContext()),
                                            holder.mImageView,                     
                                            "sharedImage");
                ActivityCompat.StartActivity((MyActivity) context, intent, options.toBundle());
            }
        });

        Glide.with(holder.mImageView.getContext())
                .load(Cheeses.getRandomCheeseDrawable())
                .fitCenter()
                .into(holder.mImageView);
    }
如果您运行该应用程序并点击奶酪列表项,您将看到转换动画将图像移动到目标活动视图中过高的偏移量。一旦动画完成,图像将会“扭曲”到正确的位置。

如果您有任何可能的解决方法,请随时分享。


我已经找到了解决此问题的方法,它位于我的仓库https://github.com/lawloretienne/SharedElementTransition中。 - Etienne Lawlor
2个回答

2
答案很简单,cheesesquare activity_detail.xml 布局大致如下...
<android.support.design.widget.CoordinatorLayout 
    android:fitsSystemWindows="true"
    ...>

    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        ...>

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            ...>

            <ImageView
                android:fitsSystemWindows="true"
                ... />

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

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

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

     <android.support.v4.widget.NestedScrollView
         app:layout_behaviour="@string/appbar_scrolling_view_behaviour"
         ...>

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

这个布局的问题在于android:fitsSystemWindows属性需要向下传递到所有容器中,而在发布的演示应用程序中,NestedScrollView缺少此属性。需要修改NestedScrollView以

     <android.support.v4.widget.NestedScrollView
         app:layout_behaviour="@string/appbar_scrolling_view_behaviour"
         android:fitsSystemWindows="true"
         ...>

修复了这个问题。这个问题在Github演示代码中可能需要更改。

当我拥有类似于Cheesesquare详细屏幕布局的布局时,导航栏和状态栏仍会闪烁。如何为共享元素转换修复这个问题? - Etienne Lawlor
答案可以在这篇文章中找到。https://dev59.com/5V8d5IYBdhLWcg3woDYZ - Monte Creasor

-1

问题已解决!

如果有人遇到这个错误,即他们正在使用包含共享元素的协调器布局,在从先前的活动到包含协调器布局的活动进行共享元素转换期间,在转换动画期间被错误地放置。 这是设计支持库版本"com.android.support:design:22.2.0"中的错误。

解决方案:

更改build.gradle(app)中的版本"com.android.support:design:23.1.0"

一切都应该按预期正常工作。 在经过大量研究后,我找到了这个解决方案。


抱歉Udit,但你的解决方案并没有解决问题。我刚刚使用design:23.1.1进行了测试,它仍然出现了。只需进入手机的开发者选项,将动画减速5倍,您就能看到扭曲。我的测试是在Nexus 6 API 22(模拟器)上进行的。如我之前所述,向NestedScrollView添加fitSystemWindows属性可以解决问题。 - Monte Creasor
还是遇到了设计问题23.3.0 :( 有什么解决办法吗? - Sdghasemi

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