Android随笔-RecyclerView实现拖拽换位功能_android 拖拽交换位置

概述

RecyclerView除了有强大的列表功能外，自身还带有Item拖拽和滑动功能，对于有这方面需求的开发来讲，可以节省不少时间。

使用

1. 创建RecyclerView

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_drag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

1
2
3
4
5
6
7
8
9
10

2. 创建ItemView

    <androidx.cardview.widget.CardView
        android:layout_width="66dp"
        android:layout_height="66dp"
        app:cardBackgroundColor="#1dd9c4"
        app:cardCornerRadius="12dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="36sp"
            android:textStyle="bold" />

    </androidx.cardview.widget.CardView>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 创建Adapter

public class DragAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private List data = new ArrayList();
    private Context context;

    public DragAdapter(Context context) {
        this.context = context;
        initData();
    }
        /**
     * 添加数据
     */
    private void initData() {
        data.clear();
        for (int i = 1; i < 10; i++) {
            data.add(i);
        }
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.item_drag, null);
        return new CardViewHold(inflate);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        CardViewHold viewHold = (CardViewHold) holder;
        viewHold.tvContent.setText("" + data.get(position));

    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    class CardViewHold extends RecyclerView.ViewHolder {
        TextView tvContent;

        public CardViewHold(@NonNull View itemView) {
            super(itemView);
            tvContent = itemView.findViewById(R.id.tv_content);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4. 设置Adapter

        // 表格布局，3列
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
        recyclerView.setLayoutManager(gridLayoutManager);
        DragAdapter dragAdapter = new DragAdapter(this);
        recyclerView.setAdapter(dragAdapter);
1
2
3
4
5

设置为3x3的表格布局。

5. 定义拖拽事件

public interface ItemDragTouchHelper {
    /**
     * 交换
     *
     * @param source  
     * @param target
     */
    void onItemMove(RecyclerView.ViewHolder source, RecyclerView.ViewHolder target);

    /**
     * 选中
     *
     * @param source
     */
    void onItemSelect(RecyclerView.ViewHolder source);

    /**
     * 状态清除
     *
     * @param source
     */
    void onItemClear(RecyclerView.ViewHolder source);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

定义三种事件，Item交换，Item被选中，Item选中状态清除。若是有其他需求，可以自行添加，比如删除，左右滑动等。

6. 实现拖拽事件回调

public class ItemDragTouchHelperCallback extends ItemTouchHelper.Callback {
    private ItemDragTouchHelper helper;

    public ItemDragTouchHelperCallback(ItemDragTouchHelper helper) {
        this.helper = helper;
    }

    @Override
    public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
        // 上下左右都可以拖拽
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        return makeMovementFlags(dragFlags, 0);
    }

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        helper.onItemMove(viewHolder, target);
        return true;
    }

    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {

    }

    /**
     * @return
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return true;
    }

    @Override
    public boolean isItemViewSwipeEnabled() {
        return false;
    }


    @Override
    public void clearView(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);
        if (!recyclerView.isComputingLayout()) {
            helper.onItemClear(viewHolder);
        }
    }

    @Override
    public void onSelectedChanged(@Nullable RecyclerView.ViewHolder viewHolder, int actionState) {
        super.onSelectedChanged(viewHolder, actionState);
        if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            helper.onItemSelect(viewHolder);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

通过继承ItemTouchHelper.Callback可以实现具体的拖拽功能回调。这里设置的是可以在四个方向进行长按拖拽，但不可滑动。

getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder)

 /**
         * Should return a composite flag which defines the enabled move directions in each state
         * (idle, swiping, dragging).
         * <p>
         * Instead of composing this flag manually, you can use {@link #makeMovementFlags(int,
         * int)}
         * or {@link #makeFlag(int, int)}.
         * <p>
         * This flag is composed of 3 sets of 8 bits, where first 8 bits are for IDLE state, next
         * 8 bits are for SWIPE state and third 8 bits are for DRAG state.
         * Each 8 bit sections can be constructed by simply OR'ing direction flags defined in
         * {@link ItemTouchHelper}.
         * <p>
         * For example, if you want it to allow swiping LEFT and RIGHT but only allow starting to
         * swipe by swiping RIGHT, you can return:
         * <pre>
         *      makeFlag(ACTION_STATE_IDLE, RIGHT) | makeFlag(ACTION_STATE_SWIPE, LEFT | RIGHT);
         * </pre>
         * This means, allow right movement while IDLE and allow right and left movement while
         * swiping.
         *
         * @param recyclerView The RecyclerView to which ItemTouchHelper is attached.
         * @param viewHolder   The ViewHolder for which the movement information is necessary.
         * @return flags specifying which movements are allowed on this ViewHolder.
         * @see #makeMovementFlags(int, int)
         * @see #makeFlag(int, int)
         */
        public abstract int getMovementFlags(@NonNull RecyclerView recyclerView,
                @NonNull ViewHolder viewHolder);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• ItemTouchHelper.UP ：往上拖
• ItemTouchHelper.DOWN：往下拖
• ItemTouchHelper.LEFT：往左拖
• ItemTouchHelper.RIGHT：往右拖

同时取这几个值就可以实现多个方向的拖拽，若是对方向有要求可以根据需要单独设置。

makeMovementFlags(int dragFlags, int swipeFlags)

        /**
         * Convenience method to create movement flags.
         * <p>
         * For instance, if you want to let your items be drag & dropped vertically and swiped
         * left to be dismissed, you can call this method with:
         * <code>makeMovementFlags(UP | DOWN, LEFT);</code>
         *
         * @param dragFlags  The directions in which the item can be dragged.
         * @param swipeFlags The directions in which the item can be swiped.
         * @return Returns an integer composed of the given drag and swipe flags.
         */
        public static int makeMovementFlags(int dragFlags, int swipeFlags) {
            return makeFlag(ACTION_STATE_IDLE, swipeFlags | dragFlags)
                    | makeFlag(ACTION_STATE_SWIPE, swipeFlags)
                    | makeFlag(ACTION_STATE_DRAG, dragFlags);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• dragFlags：拖拽方向
• swipeFlags：滑动方向

onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target)

        /**
         * Called when ItemTouchHelper wants to move the dragged item from its old position to
         * the new position.
         * <p>
         * If this method returns true, ItemTouchHelper assumes {@code viewHolder} has been moved
         * to the adapter position of {@code target} ViewHolder
         * ({@link ViewHolder#getAbsoluteAdapterPosition()
         * ViewHolder#getAdapterPositionInRecyclerView()}).
         * <p>
         * If you don't support drag & drop, this method will never be called.
         *
         * @param recyclerView The RecyclerView to which ItemTouchHelper is attached to.
         * @param viewHolder   The ViewHolder which is being dragged by the user.
         * @param target       The ViewHolder over which the currently active item is being
         *                     dragged.
         * @return True if the {@code viewHolder} has been moved to the adapter position of
         * {@code target}.
         * @see #onMoved(RecyclerView, ViewHolder, int, ViewHolder, int, int, int)
         */
        public abstract boolean onMove(@NonNull RecyclerView recyclerView,
                @NonNull ViewHolder viewHolder, @NonNull ViewHolder target);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• recyclerView：有长按拖拽功能的recyclerView
• viewHolder：手指长按后被拖拽的Item
• target：拖拽目标位置的Item

当返回true时，进行拖拽从一个位置到另一个位置会调用该方法，具体变换逻辑用户自行处理。

onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction)

        /**
         * Called when a ViewHolder is swiped by the user.
         * <p>
         * If you are returning relative directions ({@link #START} , {@link #END}) from the
         * {@link #getMovementFlags(RecyclerView, ViewHolder)} method, this method
         * will also use relative directions. Otherwise, it will use absolute directions.
         * <p>
         * If you don't support swiping, this method will never be called.
         * <p>
         * ItemTouchHelper will keep a reference to the View until it is detached from
         * RecyclerView.
         * As soon as it is detached, ItemTouchHelper will call
         * {@link #clearView(RecyclerView, ViewHolder)}.
         *
         * @param viewHolder The ViewHolder which has been swiped by the user.
         * @param direction  The direction to which the ViewHolder is swiped. It is one of
         *                   {@link #UP}, {@link #DOWN},
         *                   {@link #LEFT} or {@link #RIGHT}. If your
         *                   {@link #getMovementFlags(RecyclerView, ViewHolder)}
         *                   method
         *                   returned relative flags instead of {@link #LEFT} / {@link #RIGHT};
         *                   `direction` will be relative as well. ({@link #START} or {@link
         *                   #END}).
         */
        public abstract void onSwiped(@NonNull ViewHolder viewHolder, int direction);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• viewHolder：滑动Item
• direction：滑动方向，建议使用START or END代替LEFT or RIGHT

若是没有滑动功能就不做处理。

isLongPressDragEnabled

返回true可长按拖动，即本文指的拖拽功能。

isItemViewSwipeEnabled

返回false即Item不可滑动。

clearView(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder)

        /**
         * Called by the ItemTouchHelper when the user interaction with an element is over and it
         * also completed its animation.
         * <p>
         * This is a good place to clear all changes on the View that was done in
         * {@link #onSelectedChanged(RecyclerView.ViewHolder, int)},
         * {@link #onChildDraw(Canvas, RecyclerView, ViewHolder, float, float, int,
         * boolean)} or
         * {@link #onChildDrawOver(Canvas, RecyclerView, ViewHolder, float, float, int, boolean)}.
         *
         * @param recyclerView The RecyclerView which is controlled by the ItemTouchHelper.
         * @param viewHolder   The View that was interacted by the user.
         */
        public void clearView(@NonNull RecyclerView recyclerView, @NonNull ViewHolder viewHolder) {
            ItemTouchUIUtilImpl.INSTANCE.clearView(viewHolder.itemView);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

交互完成后调用该方法，此时可以做相关处理，关闭动画，开启其他动画，恢复正常状态等，但需要等RecycleView计算布局完成后再。

onSelectedChanged(@Nullable ViewHolder viewHolder, int actionState)

        /**
         * Called when the ViewHolder swiped or dragged by the ItemTouchHelper is changed.
         * <p/>
         * If you override this method, you should call super.
         *
         * @param viewHolder  The new ViewHolder that is being swiped or dragged. Might be null if
         *                    it is cleared.
         * @param actionState One of {@link ItemTouchHelper#ACTION_STATE_IDLE},
         *                    {@link ItemTouchHelper#ACTION_STATE_SWIPE} or
         *                    {@link ItemTouchHelper#ACTION_STATE_DRAG}.
         * @see #clearView(RecyclerView, RecyclerView.ViewHolder)
         */
        public void onSelectedChanged(@Nullable ViewHolder viewHolder, int actionState) {
            if (viewHolder != null) {
                ItemTouchUIUtilImpl.INSTANCE.onSelected(viewHolder.itemView);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• viewHolder：被选中的Item
• actionState：行为状态， ACTION_STATE_IDLE, ACTION_STATE_SWIPE ：滑动行为，ACTION_STATE_DRAG：拖拽行为

Item被选中后调用该方法，作用和clearView(RecyclerView, RecyclerView.ViewHolder)差不多。
需要重写的方法还有一些，可根据具体需求选择性重写。

7. Adapter进行具体的拖拽逻辑处理

public class DragAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements ItemDragTouchHelper {
    ...
    @Override
    public void onItemMove(RecyclerView.ViewHolder source, RecyclerView.ViewHolder target) {
        int fromPosition = source.getBindingAdapterPosition();
        int toPosition = target.getBindingAdapterPosition();
        if (fromPosition < data.size() && toPosition < data.size()) {
            Collections.swap(data, fromPosition, toPosition);
            notifyItemMoved(fromPosition, toPosition);
        }
        onItemClear(source);
    }

    @Override
    public void onItemSelect(RecyclerView.ViewHolder source) {
        source.itemView.setScaleX(1.2f);
        source.itemView.setScaleY(1.2f);
    }

    @Override
    public void onItemClear(RecyclerView.ViewHolder source) {
        source.itemView.setScaleX(1.0f);
        source.itemView.setScaleY(1.0f);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

通过让Adapter实现ItemDragTouchHelper接口，进行具体的逻辑逻辑处理。

• onItemMove：通过获取被拖拽的item和目标item的绑定位置，通过swap(List<?> list, int i, int j)对数据进行交换，再调用notifyItemMoved进行页面酸性和换位动画。
• onItemSelect：Item被选中后让被选中的Item变大为原来的1.2倍。
• onItemClear：换位完成后，让被选中的Item恢复到原来的样子。

8. 开启拖拽功能

     // 表格布局，3列
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
        recyclerView.setLayoutManager(gridLayoutManager);
        // 默认动画
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        // 设置item偏移量
        recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
                super.getItemOffsets(outRect, view, parent, state);
                // 边距16
                outRect.set(16, 16, 16, 16);
            }
        });
        DragAdapter dragAdapter = new DragAdapter(this);
        recyclerView.setAdapter(dragAdapter);
        // 适配器添加拖拽回调
        ItemTouchHelper.Callback callback = new ItemDragTouchHelperCallback(dragAdapter);
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
        // 为recyclerView添加拖拽功能
        itemTouchHelper.attachToRecyclerView(recyclerView);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• addItemDecoration：设置item的装饰，这里设置上下左右的偏移量为16px，若有特殊需要用户可自定义ItemDecoration。
• ItemDragTouchHelperCallback(dragAdapter)：创建之前定义好的拖拽逻辑处理回调。
• attachToRecyclerView：连接RecyclerView的拖拽事件，实现定义好的功能。

预览