在 android 中滑动以添加视图

Question

I want to achieve something like the below gif:

What I have done so far:

I am using a swipelayout using I am able to implement the part where if you swipe the row item, it shows you the "Add to Cart" icon but I am not able to implement the animation where it zooms in the cart icon and add it to cart (I am not able to create a hook where I can call the addToCart function).

Below is my code:

• Row XML File:

   <RelativeLayout android:id="@+id/swipe_view" android:layout_width="120dp" android:layout_height="match_parent" android:background="@color/colorPrimary" android:minWidth="96dp"> <ImageView android:id="@+id/add_to_cart" android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_margin" android:layout_marginStart="@dimen/activity_margin" android:background="?attr/selectableItemBackgroundBorderless" android:clickable="true" android:padding="@dimen/activity_margin" android:scaleType="center" android:src="@drawable/ic_menu_cart"/> </RelativeLayout> <RelativeLayout android:id="@+id/restaurant_menu_details_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/half_activity_margin" android:paddingLeft="@dimen/activity_margin" android:paddingRight="@dimen/activity_margin" android:paddingTop="@dimen/half_activity_margin"> <ImageView android:id="@+id/item_image" android:layout_width="56dp" android:layout_height="56dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:scaleType="centerCrop" tools:src="@drawable/placeholder_restaurant"/> <TextView android:id="@+id/item_price" style="@style/secondary_tv" fontPath="@string/ubuntu_light" android:layout_width="48dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginBottom="@dimen/half_activity_margin" android:layout_marginLeft="@dimen/half_activity_margin" android:gravity="center_horizontal" android:maxLines="2" tools:text="5KD"/> <LinearLayout android:id="@+id/restaurant_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@+id/item_image" android:layout_toLeftOf="@+id/item_price" android:layout_toRightOf="@+id/item_image" android:layout_toStartOf="@+id/item_price" android:orientation="vertical"> <TextView android:id="@+id/item_name" fontPath="@string/ubuntu_mono_regular" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/half_activity_margin" android:layout_marginTop="@dimen/half_activity_margin" android:gravity="start" android:textAllCaps="true" android:textColor="@color/black_primary_text_color" android:textSize="@dimen/medium_text" tools:text="Restaurant Name"/> <TextView android:id="@+id/item_desc" style="@style/secondary_tv" fontPath="@string/ubuntu_light" android:layout_marginBottom="@dimen/half_activity_margin" android:layout_marginLeft="@dimen/half_activity_margin" android:layout_marginTop="4dp" android:ellipsize="end" android:maxLines="2" tools:text="Restaurant Description, max 1 line"/> </LinearLayout> </RelativeLayout>

• Java Code

from RecyclerView Adapter:

SwipeLayout swipeLayout = (SwipeLayout) itemView.findViewById(R.id.swipe);
    swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
                            @Override
                            public void onStartOpen(SwipeLayout layout) {

                            }

                            @Override
                            public void onOpen(SwipeLayout layout) {

                            }

                            @Override
                            public void onStartClose(SwipeLayout layout) {

                            }

                            @Override
                            public void onClose(SwipeLayout layout) {

                            }

                            @Override
                            public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
        // i tried leveraging the leftOffset which tells me the position of the //layout on the screen but because it is called multiple times, It was //adding many entries to the cart in just one swipe :(
                            }

                            @Override
                            public void onHandRelease(SwipeLayout layout, float xvel, float yvel) {

                            }
                        });

I would really appreciate if anyone can suggest a better way to fix this or any open-source library which does such a thing.

Many thanks!

PS: Please add a comment if you need more information from me in order to help me. :)

Answer 1

what I'll write is a best guess based on the information you gave, but it seems that it's all right there:

@Override
public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
    float percent = ((float)leftOffset/((float)totalWidth));
    // use `percent` to animate the icon, something like:
    icon.setAlpha(percent);
}

@Override
public void onOpen(SwipeLayout layout) {
    // here is the swipe fully open
    addToCart(item); // create the method
    layout.close(); // close the layout again
}