您的位置:

RecyclerView横向详解

一、横向滑动模式

我们都知道,RecyclerView是一种展示列表数据的视图,而它有三种滑动模式:VERTICAL、HORIZONTAL和网格布局。它们中的横向滑动模式就是指RecyclerView可以横向滑动展示数据。

下面是横向滑动的实现代码示例:

LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);

通过上述代码,我们可以将RecyclerView的滑动模式设置为横向展示数据。

二、横向滑动操作

在横向滑动模式下,我们可以进行各种滑动操作,例如:删除、添加、移动等等。下面我们分别来介绍一下这些滑动操作:

1.删除操作

可以通过RecyclerView的Adapter及ItemTouchHelper实现删除操作。删除操作代码示例:

//初始化时需要传入自己的Adapter
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT) {
    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        return false;
    }

    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        adapter.removeItem(viewHolder.getAdapterPosition());
    }
});
itemTouchHelper.attachToRecyclerView(recyclerView);

上述代码,我们通过设置ItemTouchHelper.SimpleCallback,将滑动方向设置为ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT,当用户向左或右滑动Item时,会回调onSwiped方法,我们在onSwiped方法中删除对应的Item。

2.添加操作

我们可以在横向RecyclerView的尾部添加新的Item,如下代码:

adapter.addItem();
adapter.notifyItemInserted(adapter.getItemCount());

上述代码,我们通过Adapter的addItem()方法向数据源中添加新的Item,并通过notifyItemInserted()方法通知Adapter更新视图列表,展示新的Item。

3.移动操作

为了支持移动操作,我们需要实现拖拽和长按拖拽的效果,如下代码:

ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.SimpleCallback(
        ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT,
        ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {
    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        adapter.moveItem(viewHolder.getAdapterPosition(), target.getAdapterPosition());
        return true;
    }

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

    }
});
itemTouchHelper.attachToRecyclerView(recyclerView);

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

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        // do something
        return false;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        // do something
    }
};

ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recyclerView);

上述代码,我们在ItemTouchHelper.SimpleCallback的onMove方法中,通过Adapter的moveItem()方法实现Item移动操作。而在ItemTouchHelper.Callback中,则是实现了拖拽移动的效果。拖拽移动的效果实现通过拖拽时的手势和手指抬起后确认移动的位置实现。

三、横向滑动实现效果

在RecyclerView横向滑动实现中,我们还需要注意到一些展示效果问题。如:全屏展示、半屏展示、滑动列表展示等等。以下是一些常见效果实现的代码示例:

1.全屏展示

RecyclerView横向全屏展示可通过以下代码实现:

LinearLayoutManager layoutManager = new LinearLayoutManager(this,
        LinearLayoutManager.HORIZONTAL, false) {
    @Override
    public boolean checkLayoutParams(RecyclerView.LayoutParams lp) {
        //设置全屏展示效果
        lp.width = getWidth() / 3;
        lp.height = getHeight();
        return true;
    }
};
recyclerView.setLayoutManager(layoutManager);

上述代码通过调用LinearLayoutManager.checkLayoutParams方法来设置全屏展示效果,其中lp.width指定单个Item的宽度,而lp.height指定单个Item的高度,通过控制lp.width的值,我们可以实现Item全屏或者半屏展示效果。

2.半屏展示

RecyclerView横向半屏展示可通过以下代码实现:

LinearLayoutManager layoutManager = new LinearLayoutManager(this,
        LinearLayoutManager.HORIZONTAL, false) {
    @Override
    public boolean checkLayoutParams(RecyclerView.LayoutParams lp) {
        //设置半屏展示效果
        lp.width = getWidth() / 2;
        lp.height = getHeight();
        return true;
    }
};
recyclerView.setLayoutManager(layoutManager);

同样地,通过控制lp.width的大小,我们可以实现Item的半屏展示效果。

3.滑动列表展示

滑动列表展示效果可通过RecyclerView的滚动实现。如下所示代码:

recyclerView.smoothScrollToPosition(position)

上述代码会将RecyclerView滚动到指定位置,并在滑动过程中实现动画效果。我们可以通过控制position的值来实现滑动展示的效果。