Activity 从 recyclerview 项目到具有共享元素的其他 activity 的过渡不顺利

Question

我正在尝试为从 recyclerview 项目到具有该项目详细信息的 activity 的过渡设置动画。我遵循了这个例子：

https://developer.android.com/training/material/animations.html#Transitions

两个活动都使用共享视图元素。过渡是有效的，但不如我预期的那么顺利。我的意思是在转换过程中，文本很快就落在卡片视图之外，图像又回到原位。观看视频：

注意：我使用 android 数据绑定和 viewpagaer。我不确定这对我的问题是否重要。

在我看到人们使用的多个遮阳篷中：

 android:clipChildren="false"
 android:clipToPadding="false"

但即使我把它放在所有 parents 上，它仍然会发生。我做错了什么？

列表片段：

@Override
public void onViewCreated(final View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    //Adapter & recyclerview init
    mAdapter = new ProductListAdapter(productList, new     OnProductClickListener() {
        @Override
        public void onProductClick(View view1, Product product) {
            final View viewProductCv = view1.findViewById(R.id.list_product_cv);
            Intent intent = new Intent(getActivity(), ProductDetailPage.class);
            intent.putExtra(PRODUCT, product);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(getActivity(),
                        Pair.create(viewProductCv, "productCardView")); // similar name
                startActivity(intent, options.toBundle());
            } else
                startActivity(intent);
        }
    });
}

Recycler 查看项目布局

<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
    <variable
        name="product"
        type="com.icemobile.estimotemirror.model.Product" />
</data>

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/list_product_cv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:transitionName="productCardView" <!-- similar name -->
    android:layout_margin="@dimen/card_margin"
    card_view:cardCornerRadius="@dimen/card_corner_radius">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/list_product_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="fitCenter"
            android:src="@{product.image}"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="8dp">

            <TextView
                android:id="@+id/list_product_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@{product.name}"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/title_14" />

            <TextView
                android:id="@+id/list_product_distance"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@{product.distance}"
                android:textSize="@dimen/text_12" />
        </LinearLayout>

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

Activity 详细布局

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools">

<data>

    <variable
        name="product"
        type="com.icemobile.estimotemirror.model.Product" />
</data>

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:id="@+id/details_card_view"
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:transitionName="productCardView" <!-- similar name -->
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin"
                android:layout_marginTop="86dp"
                card_view:cardCornerRadius="@dimen/card_corner_radius">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="@dimen/activity_horizontal_margin">

                    <ImageView
                        android:id="@+id/list_product_image"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:scaleType="fitCenter"
                        android:src="@{product.image, default=@drawable/default_thumbnail}"/>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="75dp"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/detail_product_title"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="@{product.name}"
                            android:textColor="@color/colorPrimary"
                            android:textSize="@dimen/title_18" />

                        <TextView
                            android:id="@+id/detail_product_distance"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="@{product.distance}"
                            android:textSize="@dimen/text_14" />
                    </LinearLayout>

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


            <TextView
                android:id="@+id/detail_product_description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/details_card_view"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:gravity="center"
                android:padding="@dimen/activity_horizontal_margin"
                android:text="dedscription"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/title_14" />
        </RelativeLayout>
    </ScrollView>
</android.support.design.widget.CoordinatorLayout>
</layout>

我的 recyclerview 适配器：

public class ProductListAdapter extends RecyclerView.Adapter<ProductListAdapter.ViewHolder> {
private List<Product> productList;
private final OnProductClickListener listener;

public ProductListAdapter(List<Product> productList, OnProductClickListener listener) {
    this.productList = productList;
    this.listener = listener;
}

@Override
public ProductListAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
    ViewDataBinding binding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item_product, parent, false);
    return new ViewHolder(binding);
}

@Override
public void onBindViewHolder(final ProductListAdapter.ViewHolder viewHolder, final int position) {
    Product product = productList.get(position);
    viewHolder.bind(product, listener);
}

@Override
public int getItemCount() {
    return (productList != null) ? productList.size() : 0;
}

public void clear() {
    this.productList.clear();
}

public void add(Product product) {
    this.productList.add(product);
}


class ViewHolder extends RecyclerView.ViewHolder {
    private final ViewDataBinding binding;

    private ViewHolder(ViewDataBinding binding) {
        super(binding.getRoot());
        this.binding = binding;
    }

    void bind(final Product product, final OnProductClickListener listener) {
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.onProductClick(v, product);
            }
        });
        binding.setVariable(BR.product, product);
        binding.executePendingBindings();
    }
}

如有任何帮助，我们将不胜感激！

Answer 1

这是数据绑定和回收站视图的常见问题。 Data 不绑定在与 viewholder 相同的框架上，它稍等片刻。当您在 recyclerview.adapter 或 viewholder 中使用数据绑定时，您需要确保添加以下方法，以便它立即绑定。

public void bind(Product product){
        mBinding.getViewModel().setProduct(product);
        mBinding.executePendingBindings();
    }

Answer 2

在我的例子中，用于共享元素转换的 cardview 的子元素在第二个 activity 中的 xml 布局略有不同，这可能导致卡顿。现在我保持布局不变，过渡也很流畅。

Activity 从 recyclerview 项目到具有共享元素的其他 activity 的过渡不顺利

Activity transition from recyclerview Item to other activity with shared elements is not smooth

data-binding

android

android-animation

android-layout

android-recyclerview