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

Question

我的应用程序主屏幕包含图像的网格视图.当用户选择图像时,使用共享元素转换开始细节活动,该共享元素转换将所选择的网格图像动画化为位于细节活动中的CardView中的配对图像.

升级我的详细视图XML布局以包含CoordinatorLayout以及CollapsingToolbarLayout后,共享元素转换将图像视图移动到详细活动中的错误位置("enter"活动).如果在包含目标图像视图的CardView上方没有CollapsingToolBarLayout,框架似乎会将整个AppBarLayout和内部CollapsingToobarLayout的偏移量和动画放大到图像的大致位置.

通过将activityView(带有transitionName)添加到activity_detail.xml中的3个CardView中的任何一个,可以在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);
    }

如果运行应用程序,并单击奶酪列表项,您将了解过渡动画如何将图像移动到目标活动视图中的错误(太高)偏移.动画完成后,图像将"扭曲"到正确的位置.

任何关于可能的解决方法的想法都会非常受欢迎.

Answer 1

答案很简单，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 代码中进行更改。