支持左滑菜单栏的 RecyclerView

iOS 有一个自己的交互方式,左滑菜单栏的数据列表,手机 QQ 也是这样的交互方式,但是 Android 自身却没有这样的控件,需要我们自己去封装,笔者这里封装了一个简易版的,需要自取。

先放效果图
在这里插入图片描述

优点

轻量:该库比较轻量,不会因为引库导致应用庞杂

简单:使用简单,Activity 内只需要几行代码实现

依赖

  • 克隆本项目,然后在你的 IDE 中依赖本项目的 slide_recyclerview Module

  • 使用 maven 方式依赖

​ 在根目录的 build.gradle 中添加:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

​ 在 app 或者要使用的 Module 的 build.gradle 中添加:

implementation 'com.github.YoungTime:SlideRecyclerview:1.0.1'

用法

  1. 在布局文件中使用 SlideRecyclerview:
<com.ryan.slide_recyclerview.SlideRecyclerView
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/jsr_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:item_margin_bottom="2dp"
        app:item_margin_right="10dp"
        app:item_margin_left="10dp"
        app:item_padding_right="10dp"
        app:item_background="#FAFD"/>
  1. 继承 SlideViewAdapter,并实现方法:
public class MyAdapter extends SlideViewAdapter<MsgEntity> {

    /**
     * MsgEntity 为你的数据源数据类型
     */
    private List<MsgEntity> mDatas; // 数据源
    private Context mContext;

    public MyAdapter(List<MsgEntity> mDatas, Context mContext) {
        this.mDatas = mDatas;
        this.mContext = mContext;
    }

    /**
     * @return 你需要在 Item 中使用的数据列表
     */
    @Override
    protected List<MsgEntity> getDataList() {
        return mDatas;
    }

    /**
     * 绑定 Item 布局,也可根据 data 类型返回不同的 View
     * @param parent 父布局
     * @param data 单个布局的 Item 的数据
     * @return 返回单个 Item 的布局
     */
    @Override
    protected View bindContent(ViewGroup parent, MsgEntity data,int pos) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_slide_view,parent,false);
        // 操作 Item 中的子 View
        TextView textView = view.findViewById(R.id.tv_slide);
        textView.setText(data.getName());
        return view;
    }

    /**
     * @return 需要返回使用 SlideRecyclerview 的上下文,不能为空
     */
    @Override
    protected Context getContext() {
        return mContext;
    }
}
  1. 在 Activity 中使用:
   recyclerView = findViewById(R.id.jsr_list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        final List<MsgEntity> list = new ArrayList<>();

        /**
         * 这里是模拟的数据源
         */
        MsgEntity entity1 = new MsgEntity();
        entity1.setName("第一个");
        MsgEntity entity2 = new MsgEntity();
        entity2.setName("第二个");
        MsgEntity entity3 = new MsgEntity();
        entity3.setName("第三个");
        MsgEntity entity4 = new MsgEntity();
        entity4.setName("第四个");
        list.add(entity1);
        list.add(entity2);
        list.add(entity3);
        list.add(entity4);


        MyAdapter adapter = new MyAdapter(list,this);
        /**
         * 支持的 SlideItem,可以自定义 Item 背景,textColor,textSize,以及点击事件
         * 背景暂时只支持 ResourceID
         */
        adapter.addSlideItem(new SlideItem("Edit", R.drawable.edit,new SlideItemAdapter.OnItemClickListener() {
            @Override
            public void onClick(View view, int pos) {
                Toast.makeText(MainActivity.this,"Edit "+list.get(pos).getName(),Toast.LENGTH_SHORT).show();
            }
        })).addSlideItem(new SlideItem("Delete",  R.drawable.delete,R.color.colorAccent,0,0, new SlideItemAdapter.OnItemClickListener() {
            @Override
            public void onClick(View view, int pos) {
                Toast.makeText(MainActivity.this,"Delete "+list.get(pos).getName(),Toast.LENGTH_SHORT).show();
            }
        }));
        recyclerView.setAdapter(adapter);
  1. 给布局使用元素

    如果你需要给 SlideRecyclerView 设置 bg、margin、padding 等,如果你不想你使用的元素作用到 左滑菜单栏 SlideItem,可以直接使用原生的 RecyclerView 自带的布局元素。如果你想布局元素也作用到左滑菜单栏 SlideItem,请使用已下元素。

    元素名称作用
    item_margin_left距左边的 margin
    item_margin_right距右边的 margin
    item_margin_top距上边的 margin
    item_margin_bottom距下边的 margin
    item_padding_left距左边的 padding
    item_padding_right距右边的 padding
    item_padding_top距上边的 padding
    item_padding_bottom距下边的 padding
    item_backgrounditem 的背景

项目地址:GitHub

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用SwipeLayout实现左滑出现菜单栏,可以按照以下步骤进行: 1. 在布局文件中添加SwipeLayout控件,设置其宽高和位置等属性。 2. 在SwipeLayout中添加两个子控件,一个是主要显示内容的布局,另一个是菜单栏的布局。 3. 设置SwipeLayout的滑动方向为左滑。 4. 为SwipeLayout设置OnSwipeListener监听器,监听滑动事件。 5. 在滑动事件中判断当前滑动的状态,如果是打开状态,则关闭菜单栏,否则打开菜单栏。 例如,以下是一个简单的示例代码: ``` <com.daimajia.swipe.SwipeLayout android:id="@+id/swipe_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" app:drag_edge="left" app:swipe_mode="left" app:leftSwipeView="@+id/left_swipe" app:rightSwipeView="@+id/right_swipe" app:show_mode="lay_down"> <RelativeLayout android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- 主要显示内容的布局 --> </RelativeLayout> <LinearLayout android:id="@+id/left_swipe" android:layout_width="80dp" android:layout_height="match_parent" android:orientation="vertical"> <!-- 菜单栏的布局 --> </LinearLayout> </com.daimajia.swipe.SwipeLayout> ``` ``` SwipeLayout swipeLayout = (SwipeLayout) findViewById(R.id.swipe_layout); swipeLayout.setShowMode(SwipeLayout.ShowMode.LayDown); swipeLayout.addDrag(SwipeLayout.DragEdge.Left, findViewById(R.id.left_swipe)); swipeLayout.addDrag(SwipeLayout.DragEdge.Right, findViewById(R.id.right_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) { // 滑动中 } @Override public void onHandRelease(SwipeLayout layout, float xvel, float yvel) { // 手指离开 } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值