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

Question

我的应用程序主屏幕包含图像的网格视图。当用户 选择图像，使用共享元素启动详细活动 将选定的网格图像动画到位于 详细活动中的 CardView。

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

这个问题可以在 Chris Banes 的cheesesquare sample app 中复制，方法是添加 到 activity_detail.xml 中的 3 个 CardView 中的任何一个的 ImageView（带有 transitionName）：

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

如果您运行应用程序，然后单击奶酪列表项，您将如何 过渡动画将图像移动到不正确（太高）的偏移量 目的地活动视图。动画完成后，图像将出现 “变形”到正确的位置。

非常欢迎您对可能的解决方法提出任何想法。

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

Answer 2

解决了！

如果有人在使用由共享元素组成的协调器布局时遇到此错误，则在从前一个活动到包含协调器布局的活动的共享元素转换期间，这些共享元素在转换动画期间被错误地放置。这是设计支持库版本 "com.android.support:design:22.2.0"

中的错误

解决方案：

更改版本到 “com.android.support:design:23.1.0” .gradle(app)

一切都应按预期完美运行。这对我有用，经过大量研究找到了这个解决方案。