回收者视图滑动时,背景颜色和文本在滑动时不显示“矩形”

时间:2018-10-05 18:46:22

标签: android android-recyclerview swipe

如何实现如下图所示:

向右滑动(向左)

enter image description here

在向左滑动(向右)

enter image description here

代码:

这是我尝试的代码,但无法实现与图像相同的代码。如何设计具有背景颜色和圆角和文字的图像所示的图像?

@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {

        View itemView = viewHolder.itemView;
        Paint p = new Paint();

        if (dX > 0) {          

            c.drawRect((float) itemView.getLeft(), (float) itemView.getTop(), dX,
                    (float) itemView.getBottom(), p);

        } else {

            RectF rightButton = new RectF(itemView.getRight() , itemView.getTop(), itemView.getRight(), itemView.getBottom());
            p.setColor(Color.BLACK);
            c.drawRoundRect(rightButton, dX, dY, p);
            drawText(mContext.getString(R.string.cancel), c, rightButton, p);
        }

        // Fade out the view when it is swiped out of the parent
        final float alpha = ALPHA_FULL - Math.abs(dX) / (float) viewHolder.itemView.getWidth();
        viewHolder.itemView.setAlpha(alpha);
        viewHolder.itemView.setTranslationX(dX);

    } else {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }
}

private void drawText(String text, Canvas c, RectF button, Paint p) {
    float textSize = 30;
    p.setColor(Color.WHITE);
    p.setAntiAlias(true);
    p.setTextSize(textSize);

    float textWidth = p.measureText(text);
    c.drawText(text, button.centerX() - (textWidth / 2), button.centerY() + (textSize / 2), p);
}

3 个答案:

答案 0 :(得分:2)

您可以通过在ItemTouchHelper.SimpleCallback上设置Recyclerview来实现。

您可以在此处查看以下示例:

https://www.androidhive.info/2017/09/android-recyclerview-swipe-delete-undo-using-itemtouchhelper/

答案 1 :(得分:1)

您的矩形未绘制,因为new Rect()的左右与itemView.getRight()一致,请尝试以下代码。根据需要更改Rect的值。

RectF rightButton = new RectF(itemView.getRight() - 200 , itemView.getTop(), itemView.getRight(), itemView.getBottom());

答案 2 :(得分:0)

您可以这样做

像这样更改您的gradle文件

compile 'ru.rambler.android:swipe-layout:1.0.15'

在您的适配器中添加此

        holder.swipe_layout.setOnSwipeListener(new SwipeLayout.OnSwipeListener() {
            @Override
            public void onBeginSwipe(SwipeLayout swipeLayout, boolean moveToRight) {
                try {

                    if (lastSwipeLayout != holder.swipe_layout) {
                        lastSwipeLayout.animateReset();
                    }


                } catch (Exception e) {
                }

                lastSwipeLayout = holder.swipe_layout;

                Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            holder.swipe_layout.animateReset();
                        } catch (Exception e) {
                        }
                    }
                }, 3000);
            }

            @Override
            public void onSwipeClampReached(SwipeLayout swipeLayout, boolean moveToRight) {

            }

            @Override
            public void onLeftStickyEdge(SwipeLayout swipeLayout, boolean moveToRight) {

            }

            @Override
            public void onRightStickyEdge(SwipeLayout swipeLayout, boolean moveToRight) {

            }
        });

并在您的回收站项目xml中添加

<ru.rambler.libs.swipe_layout.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

 <!--put your layout codes here-->

    </LinearLayout>

           <!--this is your hidden button behind the item-->

    <FrameLayout
        android:id="@+id/item_delete"
        android:layout_width="125dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:gravity="right"
        app:bring_to_clamp="150dp"
        app:clamp="self"
        app:sticky="100dp">


            <ImageView
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:padding="8dp"
                android:tint="@color/white"
                android:layout_gravity="center"
                android:src="@mipmap/ic_delete"
                />

    </FrameLayout>


</ru.rambler.libs.swipe_layout.SwipeLayout>