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

Question

我的应用程序主屏幕包含图像的 GridView 。当用户选择图像，使用共享元素启动详细信息 Activity 将所选网格图像动画化为位于详细 Activity 中的 CardView。

在升级我的详细 View XML 布局以包含 CoordinatorLayout 之后使用 CollapsingToolbarLayout，共享元素转换移动图像查看详细信息 Activity (“输入” Activity )中的错误位置。这框架似乎忽略了整个 AppBarLayout 和内部的偏移量CollapsingToobarLayout 并动画到图像的大致位置如果 CardView 上方没有 CollapsingToolBarLayout包含目标 ImageView 。

该问题可以在 Chris Banes 的 cheesesquare sample app 中重复出现通过添加一个 ImageView(带有 transitionName)到 activity_detail.xml 中的 3 个 CardView 中的任何一个:

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

然后在 onBindViewHolder 中设置共享元素转换CheeseListFragment.java 如下:

@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);
    }

如果您运行该应用程序，并单击奶酪列表项，您将如何过渡动画将图像移动到不正确(太高)的偏移量目的地 Activity View 。动画完成后，图像将出现“扭曲”到正确的位置。

我们非常欢迎任何关于可能的解决方法的想法。

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 代码中更改。