美文网首页android自定义
Android 侧滑菜单(侧滑删除)总结

Android 侧滑菜单(侧滑删除)总结

作者: Topone | 来源:发表于2020-12-28 10:49 被阅读0次

    基本实现思路

    通过自定义View的方式实现步骤:
    1、自定义ViewGroup
    2、在onLayout 中,获取childView并对他们进行布局,这一步比较重要,content 占满屏幕,菜单View 在屏幕之外,当滑动的时候,content滑屏幕,menu 进入屏幕,就达到了我需要的效果,布局草图如下:


    image

    3、重写dispatchTouchEvent和onInterceptTouchEvent方法拦截事件和处理滚动。滑动效果的实现既可以用Scroller,也可以用属性动画ValueAnimator。

    添加依赖

    //侧滑SwipeRecyclerView
        implementation 'com.yanzhenjie:recyclerview-swipe:1.1.4'
    

    1、SwipeRevealLayout

    SwipeRevealLayout 使用简单、代码入侵低,不但支持左右侧滑菜单,还支持上下滑出菜单。可以配合各种布局使用,包括RecyclerView 、ListView、ScrollView 等,效果很赞

    地址:https://github.com/chthai64/SwipeRevealLayout

    使用方式:

    <com.chauthai.swipereveallayout.SwipeRevealLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:mode="same_level"
            app:dragEdge="left">
    
            <!-- Your secondary layout here -->
            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />
    
            <!-- Your main layout here -->
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
                
    </com.chauthai.swipereveallayout.SwipeRevealLayout>
    

    在adapterclass 中:

    public class Adapter extends RecyclerView.Adapter {
      // This object helps you save/restore the open/close state of each view
      private final ViewBinderHelper viewBinderHelper = new ViewBinderHelper();
      
      public Adapter() {
        // uncomment the line below if you want to open only one row at a time
        // viewBinderHelper.setOpenOnlyOne(true);
      }
      
      @Override
      public void onBindViewHolder(ViewHolder holder, int position) {
        // get your data object first.
        YourDataObject dataObject = mDataSet.get(position); 
        
        // Save/restore the open/close state.
        // You need to provide a String id which uniquely defines the data object.
        viewBinderHelper.bind(holder.swipeRevealLayout, dataObject.getId()); 
    
        // do your regular binding stuff here
      }
    }
    
    private class ViewHolder extends RecyclerView.ViewHolder {
            private SwipeRevealLayout swipeLayout;
            private View frontLayout;
            private View deleteLayout;
            private TextView textView;
    
            public ViewHolder(View itemView) {
                super(itemView);
                swipeLayout = (SwipeRevealLayout) itemView.findViewById(R.id.swipe_layout);
                frontLayout = itemView.findViewById(R.id.front_layout);
                deleteLayout = itemView.findViewById(R.id.delete_layout);
                textView = (TextView) itemView.findViewById(R.id.text);
            }
    
            public void bind(final String data) {
                deleteLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mDataSet.remove(getAdapterPosition());
                        notifyItemRemoved(getAdapterPosition());
                    }
                });
    
                textView.setText(data);
    
                frontLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        String displayText = "" + data + " clicked";
                        Toast.makeText(mContext, displayText, Toast.LENGTH_SHORT).show();
                        Log.d("RecyclerAdapter", displayText);
                    }
                });
            }
        }
    

    效果图:

    image
    image
    image

    2、SwipeDelMenuLayout

    地址:https://github.com/mcxtzhang/SwipeDelMenuLayout

    和SwipeRevealLayout差不多。

    使用方式:
    在RecyclerView、ListView 可直接使用,在Adapter 中,在item布局最外层包上
    SwipeMenuLayout就好。

    <?xml version="1.0" encoding="utf-8"?>
    <com.mcxtzhang.swipemenulib.SwipeMenuLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:clickable="true"
        android:paddingBottom="1dp">
    
        <TextView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?android:attr/selectableItemBackground"
            android:gravity="center"
            android:text="项目中我是任意复杂的原ContentItem布局"/>
    
        <!-- 以下都是侧滑菜单的内容依序排列 -->
        <Button
            android:id="@+id/btnTop"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:background="#d9dee4"
            android:text="置顶"
            android:textColor="@android:color/white"/>
    
        <Button
            android:id="@+id/btnUnRead"
            android:layout_width="120dp"
            android:layout_height="match_parent"
            android:background="#ecd50a"
            android:clickable="true"
            android:text="标记未读"
            android:textColor="@android:color/white"/>
    
        <Button
            android:id="@+id/btnDelete"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:background="@color/red_ff4a57"
            android:text="删除"
            android:textColor="@android:color/white"/>
    
    </com.mcxtzhang.swipemenulib.SwipeMenuLayout>
    

    效果图:


    image
    image

    3、AndroidSwipeLayout

    地址:https://github.com/daimajia/AndroidSwipeLayout

    出自代码家大神,功能强大,支持上下左右四个方向滑出菜单,可单独使用,也支持RecyclerView 和 ListView等列表,Adapter需要继承RecylerViewAdapter或者BaseSwipeAdapter。

    使用:

    <com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="80dp">
        <!-- Bottom View Start-->
         <LinearLayout
            android:background="#66ddff00"
            android:id="@+id/bottom_wrapper"
            android:layout_width="160dp"
            android:weightSum="1"
            android:layout_height="match_parent">
            <!--What you want to show-->
        </LinearLayout>
        <!-- Bottom View End-->
    
        <!-- Surface View Start -->
         <LinearLayout
            android:padding="10dp"
            android:background="#ffffff"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--What you want to show in SurfaceView-->
        </LinearLayout>
        <!-- Surface View End -->
    </com.daimajia.swipe.SwipeLayout>
    

    代码中:

    SwipeLayout swipeLayout =  (SwipeLayout)findViewById(R.id.sample1);
    
    //set show mode.
    swipeLayout.setShowMode(SwipeLayout.ShowMode.LayDown);
    
    //add drag edge.(If the BottomView has 'layout_gravity' attribute, this line is unnecessary)
    swipeLayout.addDrag(SwipeLayout.DragEdge.Left, findViewById(R.id.bottom_wrapper));
    
    swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
                @Override
                public void onClose(SwipeLayout layout) {
                    //when the SurfaceView totally cover the BottomView.
                }
    
                @Override
                public void onUpdate(SwipeLayout layout, int leftOffset, int topOffset) {
                   //you are swiping.
                }
    
                @Override
                public void onStartOpen(SwipeLayout layout) {
    
                }
    
                @Override
                public void onOpen(SwipeLayout layout) {
                   //when the BottomView totally show.
                }
    
                @Override
                public void onStartClose(SwipeLayout layout) {
    
                }
    
                @Override
                public void onHandRelease(SwipeLayout layout, float xvel, float yvel) {
                   //when user's hand released.
                }
            });
    

    配合RecyclerView 和ListView 等列表的使用,请看github给出的 Samples
    效果图:


    image

    4、SwipeRecyclerView

    地址:https://github.com/yanzhenjie/SwipeRecyclerView

    本库的一大特色是它滑出的菜单可以是左右排列的,也可以是上下排列,提供多种选择,不过侵入性稍微有点高,需要使用本库提供的SwipeRecyclerView,但是使用方式与提供的api和原生的RecyclerView是一样的。还有它通过代码来创建划出的菜单。如下:

    // 设置监听器。
    swipeRecyclerView.setSwipeMenuCreator(mSwipeMenuCreator);
    
    // 创建菜单:
    SwipeMenuCreator mSwipeMenuCreator = new SwipeMenuCreator() {
        @Override
        public void onCreateMenu(SwipeMenu leftMenu, SwipeMenu rightMenu, int position) {
            SwipeMenuItem deleteItem = new SwipeMenuItem(mContext)
                ...; // 各种文字和图标属性设置。
            leftMenu.addMenuItem(deleteItem); // 在Item左侧添加一个菜单。
    
            SwipeMenuItem deleteItem = new SwipeMenuItem(mContext)
                ...; // 各种文字和图标属性设置。
            leftMenu.addMenuItem(deleteItem); // 在Item右侧添加一个菜单。
            
            // 注意:哪边不想要菜单,那么不要添加即可。
        }
    };
    
    // 菜单点击监听。
    swipeRecyclerView.setOnItemMenuClickListener(mItemMenuClickListener);
    
    OnItemMenuClickListener mItemMenuClickListener = new OnItemMenuClickListener() {
        @Override
        public void onItemClick(SwipeMenuBridge menuBridge, int position) {
            // 任何操作必须先关闭菜单,否则可能出现Item菜单打开状态错乱。
            menuBridge.closeMenu();
            
            // 左侧还是右侧菜单:
            int direction = menuBridge.getDirection();
            // 菜单在Item中的Position:
            int menuPosition = menuBridge.getPosition();
        }
    };
    

    效果图:

    image
    image
    image

    5、RecyclerViewUndoSwipe

    地址:https://github.com/HoneyNeutrons/RecyclerViewUndoSwipe

    一个可以拖拽和侧滑的UI效果,动画非常炫。
    效果图:


    image

    它没有封装成库,是一个效果demo,具体使用方式和实现,可以去看源码

    相关文章

      网友评论

        本文标题:Android 侧滑菜单(侧滑删除)总结

        本文链接:https://www.haomeiwen.com/subject/ioeznktx.html