Material Design 实现拖拽排序 RecyclerView 的方法及示例

前言

Material Design 是 Google 推出的一种设计语言，旨在提供一致、可预测的用户体验。其中，拖拽排序是一种常见的交互方式。本文将介绍如何使用 Material Design 实现拖拽排序 RecyclerView，并提供示例代码。

实现步骤

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.google.android.material:material:1.0.0'

2. 创建 RecyclerView

在布局文件中添加 RecyclerView：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. 创建 Adapter

创建 RecyclerView 的 Adapter，并实现拖拽排序的逻辑。示例代码如下：

// javascriptcn.com 代码示例
public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ItemViewHolder> implements ItemTouchHelperAdapter {

    private List<String> mDataList;

    public ItemAdapter(List<String> dataList) {
        mDataList = dataList;
    }

    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) {
        holder.mTextView.setText(mDataList.get(position));
    }

    @Override
    public int getItemCount() {
        return mDataList == null ? 0 : mDataList.size();
    }

    @Override
    public void onItemMove(int fromPosition, int toPosition) {
        Collections.swap(mDataList, fromPosition, toPosition);
        notifyItemMoved(fromPosition, toPosition);
    }

    @Override
    public void onItemDismiss(int position) {
        mDataList.remove(position);
        notifyItemRemoved(position);
    }

    static class ItemViewHolder extends RecyclerView.ViewHolder {

        TextView mTextView;

        ItemViewHolder(@NonNull View itemView) {
            super(itemView);
            mTextView = itemView.findViewById(R.id.text_view);
        }
    }
}

4. 实现拖拽排序

使用 ItemTouchHelper.Callback 实现拖拽排序的逻辑。示例代码如下：

// javascriptcn.com 代码示例
public class ItemTouchHelperCallback extends ItemTouchHelper.Callback {

    private ItemTouchHelperAdapter mAdapter;

    public ItemTouchHelperCallback(ItemTouchHelperAdapter adapter) {
        mAdapter = adapter;
    }

    @Override
    public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
        int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END;
        return makeMovementFlags(dragFlags, swipeFlags);
    }

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

    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.onItemDismiss(viewHolder.getAdapterPosition());
    }
}

5. 实现 ItemTouchHelperAdapter 接口

创建 ItemTouchHelperAdapter 接口，并在 Adapter 中实现该接口。示例代码如下：

public interface ItemTouchHelperAdapter {

    void onItemMove(int fromPosition, int toPosition);

    void onItemDismiss(int position);
}

6. 设置 RecyclerView

在 Activity 或 Fragment 中设置 RecyclerView，并使用 ItemTouchHelper 实现拖拽排序。示例代码如下：

// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        List<String> dataList = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            dataList.add("Item " + (i + 1));
        }

        ItemAdapter adapter = new ItemAdapter(dataList);
        mRecyclerView.setAdapter(adapter);

        ItemTouchHelper.Callback callback = new ItemTouchHelperCallback(adapter);
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
        itemTouchHelper.attachToRecyclerView(mRecyclerView);
    }
}

总结

本文介绍了如何使用 Material Design 实现拖拽排序 RecyclerView，并提供了示例代码。使用 Material Design 的设计语言，可以提供一致、可预测的用户体验，为用户带来更好的交互体验。本文的示例代码可以供开发者参考，实现更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65688b16d2f5e1655d146d0e