Question

我想实现类似下面的gif：

到目前为止我做了什么：

我正在使用swipelayout使用我能够实现的部分如果你滑动行项目，它会显示“添加到购物车”图标，但我无法实现动画，它放大了购物车图标并将其添加到购物车（我无法创建一个可以调用addToCart函数的钩子。）

以下是我的代码：

行XML文件：

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

来自RecyclerView适配器的

：

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

                            }
                        });

我真的很感激，如果有人能提出更好的方法来解决这个或任何开源这样做的事情。

非常感谢！

PS：如果您需要我提供更多信息以帮助我，请添加评论。：）

Answer 1

根据您提供的信息，我写的是最好的猜测，但它似乎就在那里：

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

在Android

1 个答案: