从recyclelerview项目到具有共享元素的其他活动的活动转换并不顺利

时间:2017-03-24 08:43:45

标签: android android-layout data-binding android-recyclerview android-animation

我试图动画从回收者视图项目到具有该项目详细信息的活动的过渡动画。我跟着这个例子:

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

活动都使用共享视图元素。过渡是有效的,但不像我期望的那样顺利。我的意思是在过渡期间,文本很快落在了卡片视图之外,图像会快速恢复原位。观看视频:

Video exmaple

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

在我见过的人使用过的多个发烧器中:

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

但即使我把它放在所有父母身上,它仍然会发生。我做错了什么?

列表片段:

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

Recyclerview项目布局

<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>

活动详细信息布局

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

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:0)

这是数据绑定和recyclerviews的常见问题。数据不会与视图符在同一帧上绑定,它会等待一点点。当您在recyclerview.adapter或viewholder中使用数据绑定时,您需要确保添加以下方法,以便它立即绑定。

if($row = $teacher_check->fetch_object()){

答案 1 :(得分:0)

在我的情况下,用于共享元素转换的cardview的childeren在第二个活动中的xml布局略有不同,这可能导致口吃。现在我保持布局相同,转换顺利。