RecyclerSwipeAdapterDemo【使用AndroidSwipeLayout用于列表项侧滑功能】

前言

记录AndroidSwipeLayout搭配Recyclerview实现列表项侧滑功能。

效果图

代码分析

适配器类中设置SwipeLayout显示BottomView的动画效果代码（YoYo.with(Techniques.Tada).duration(500).delay(100).playOn(layout.findViewById(R.id.bottom_wrapper));）可以隐藏。

使用步骤

一、项目组织结构图

注意事项：

1、导入类文件后需要change包名以及重新import R文件路径

2、 Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖

二、导入步骤

（1）在build.gradle中引用recyclerview【版本号和appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.recyclerswipeadapterdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //RecyclerView
    compile "com.android.support:recyclerview-v7:27.1.1"
}

（2）在项目中实现Recyclerview基本数据展现

1、创建Bean类

package com.why.project.recyclerswipeadapterdemo.bean;

/**
 * Created by HaiyuKing
 * Used 列表项的bean类
 */

public class NewsBean {
    private String newsId;//id值
    private String newsTitle;//标题

    public String getNewsId() {
        return newsId;
    }

    public void setNewsId(String newsId) {
        this.newsId = newsId;
    }

    public String getNewsTitle() {
        return newsTitle;
    }

    public void setNewsTitle(String newsTitle) {
        this.newsTitle = newsTitle;
    }
}

NewsBean.java

2、创建Adapter以及item的布局文件【此时的Adapter和布局文件都只是最开始的基本写法，后续还需要修改】

package com.why.project.recyclerswipeadapterdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.why.project.recyclerswipeadapterdemo.R;
import com.why.project.recyclerswipeadapterdemo.bean.NewsBean;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 列表适配器
 */

public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    /**上下文*/
    private Context myContext;
    /**集合*/
    private ArrayList<NewsBean> listitemList;

    /**
     * 构造函数
     */
    public NewsAdapter(Context context, ArrayList<NewsBean> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 获取总的条目数
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 创建ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.news_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    /**
     * 声明grid列表项ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = (LinearLayout) view.findViewById(R.id.listitem_layout);
            mChannelName = (TextView) view.findViewById(R.id.tv_channelName);
        }

        LinearLayout listItemLayout;
        TextView mChannelName;
    }

    /**
     * 将数据绑定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判断属于列表项
        if(viewHolder instanceof ItemViewHolder){
            NewsBean newsBean = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            itemViewHold.mChannelName.setText(newsBean.getNewsTitle());

            //如果设置了回调，则设置点击事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position);
                    }
                });
                //长按事件
                itemViewHold.listItemLayout.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onItemLongClick(itemViewHold.listItemLayout, position);
                        return false;
                    }
                });
            }

        }
    }

    /**
     * 添加Item--用于动画的展现*/
    public void addItem(int position,NewsBean listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 删除Item--用于动画的展现*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回调================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
        void onItemLongClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}

NewsAdapter.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listitem_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="1dp"
    android:background="#ffffff">

    <TextView
        android:id="@+id/tv_channelName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textSize="18sp"
        android:padding="20dp"/>

</LinearLayout>

news_list_item.xml

3、在Activity布局文件中引用Recyclerview控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4F4F4">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="#00000000"
        android:divider="@null"
        android:listSelector="#00000000"
        android:scrollbars="none"
        />

</RelativeLayout>

4、在Activity类中初始化recyclerview数据【此时只是最基本的写法，后续还需要修改】

package com.why.project.recyclerswipeadapterdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

import com.why.project.recyclerswipeadapterdemo.adapter.NewsAdapter;
import com.why.project.recyclerswipeadapterdemo.bean.NewsBean;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private ArrayList<NewsBean> mNewsBeanArrayList;
    private NewsAdapter mNewsAdapter;

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

    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recycler_view);
    }

    private void initDatas() {
        //初始化集合
        mNewsBeanArrayList = new ArrayList<NewsBean>();
        for(int i=0; i<10;i++){
            NewsBean newsBean = new NewsBean();
            newsBean.setNewsId("123"+i);
            newsBean.setNewsTitle("标题"+i);

            mNewsBeanArrayList.add(newsBean);
        }

        //设置布局管理器
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(linearLayoutManager);

        //设置适配器
        if(mNewsAdapter == null){
            //设置适配器
            mNewsAdapter = new NewsAdapter(this, mNewsBeanArrayList);
            mRecyclerView.setAdapter(mNewsAdapter);
            //添加分割线
            //设置添加删除动画
            //调用ListView的setSelected(!ListView.isSelected())方法，这样就能及时刷新布局
            mRecyclerView.setSelected(true);
        }else{
            mNewsAdapter.notifyDataSetChanged();
        }
    }

    private void initEvents() {
        //列表适配器的点击监听事件
        mNewsAdapter.setOnItemClickLitener(new NewsAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {

            }

            @Override
            public void onItemLongClick(View view, int position) {

            }
        });
    }
}

MainActivity.java

（3）在build.gradle中引用swipelayout

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.recyclerswipeadapterdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //RecyclerView
    compile "com.android.support:recyclerview-v7:27.1.1"

    //swipelayout侧滑
    compile 'com.daimajia.swipelayout:library:1.2.0@aar'
    //swipelayout动画效果相关
    compile 'com.daimajia.easing:library:1.0.1@aar'
    compile 'com.daimajia.androidanimations:library:1.1.2@aar'
    compile 'com.nineoldandroids:library:2.4.0'
}

（4）修改列表项布局文件news_list_item.xml

1、SwipeLayout的最后一个孩子是SurfaceView（上层），其他孩子都是BottomView（底层）

2、surfaceView基本上和之前的布局代码一致【绿色标记的】

3、在BottomView中布局侧滑后显示的控件【橙色标记的】

4、注意黄色标记的id值，在适配器中用得到

<?xml version="1.0" encoding="utf-8"?>
<!-- SwipeLayout的最后一个孩子是SurfaceView（上层），其他孩子都是BottomView（底层）
BottomView最好添加上android:layout_gravity属性 -->
<com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:swipe="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    swipe:leftEdgeSwipeOffset="0dp"
    swipe:rightEdgeSwipeOffset="0dp">

    <!-- Bottom View Start-->
    <LinearLayout
        android:id="@+id/bottom_wrapper"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right|center_vertical"
        android:orientation="horizontal"
        android:weightSum="1">

        <!-- 置顶 -->
        <LinearLayout
            android:id="@+id/swipe_top_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#0195C5"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/swipe_top"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:text="置顶"
                android:textColor="#ffffff"
                android:textSize="18sp" />

        </LinearLayout>

        <!-- 删除 -->
        <LinearLayout
            android:id="@+id/swipe_del_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#FF5D5D"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/swipe_del"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:text="删除"
                android:textColor="#ffffff"
                android:textSize="18sp" />

        </LinearLayout>

    </LinearLayout>
    <!-- Bottom View End-->

    <!--surfaceView Start-->
    <LinearLayout
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="1dp"
        android:background="#ffffff">

        <TextView
            android:id="@+id/tv_channelName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题"
            android:textSize="18sp"
            android:padding="20dp"/>

    </LinearLayout>
    <!--surfaceView End-->
</com.daimajia.swipe.SwipeLayout>

（5）修改适配器NewsAdapter

1、继承RecyclerSwipeAdapter

2、重写getSwipeLayoutResourceId方法

3、在ItemViewHolder中添加SwipeLayout、bottom_wrapper等控件的声明

4、在onBindViewHolder中设置SwipeLayout以及添加点击事件监听

5、在OnItemClickLitener中声明侧滑区域按钮的点击事件监听

package com.why.project.recyclerswipeadapterdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;
import com.daimajia.swipe.SimpleSwipeListener;
import com.daimajia.swipe.SwipeLayout;
import com.daimajia.swipe.adapters.RecyclerSwipeAdapter;
import com.why.project.recyclerswipeadapterdemo.R;
import com.why.project.recyclerswipeadapterdemo.bean.NewsBean;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 列表适配器
 */

public class NewsAdapter extends RecyclerSwipeAdapter<RecyclerView.ViewHolder> {
    /**上下文*/
    private Context myContext;
    /**集合*/
    private ArrayList<NewsBean> listitemList;

    /**
     * 构造函数
     */
    public NewsAdapter(Context context, ArrayList<NewsBean> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 获取总的条目数
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 创建ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.news_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    @Override
    public int getSwipeLayoutResourceId(int position) {
        return R.id.swipeLayout;//实现只展现一条列表项的侧滑区域
    }

    /**
     * 声明grid列表项ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = (LinearLayout) view.findViewById(R.id.surfaceView);
            mChannelName = (TextView) view.findViewById(R.id.tv_channelName);

            swipeLayout = (SwipeLayout) view.findViewById(R.id.swipeLayout);
            bottom_wrapper = (LinearLayout) view.findViewById(R.id.bottom_wrapper);
            mTop = (LinearLayout) view.findViewById(R.id.swipe_bottom_top_layout);
            mDelete = (LinearLayout) view.findViewById(R.id.swipe_bottom_del_layout);
        }

        LinearLayout listItemLayout;
        TextView mChannelName;

        SwipeLayout swipeLayout;
        LinearLayout bottom_wrapper;//侧滑区域
        LinearLayout mTop;//置顶
        LinearLayout mDelete;//删除
    }

    /**
     * 将数据绑定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判断属于列表项
        if(viewHolder instanceof ItemViewHolder){
            NewsBean newsBean = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            itemViewHold.mChannelName.setText(newsBean.getNewsTitle());

            //设置侧滑显示模式
            itemViewHold.swipeLayout.setShowMode(SwipeLayout.ShowMode.PullOut);
            //设置侧滑显示位置方向
            //itemViewHold.parentLayout.addDrag(SwipeLayout.DragEdge.Right,itemViewHold.bottom_wrapper);

            itemViewHold.swipeLayout.addSwipeListener(new SimpleSwipeListener() {
                @Override
                public void onOpen(SwipeLayout layout) {
                    //实现动画效果展现隐藏层
                    YoYo.with(Techniques.Tada).duration(500).delay(100).playOn(layout.findViewById(R.id.bottom_wrapper));
                }
            });

            //如果设置了回调，则设置点击事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.swipeLayout.getSurfaceView().setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        itemViewHold.swipeLayout.close();//隐藏侧滑菜单区域
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onItemClick(itemViewHold.swipeLayout, position);
                    }
                });
                //长按事件
                itemViewHold.swipeLayout.getSurfaceView().setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View view) {
                        itemViewHold.swipeLayout.close();//隐藏侧滑菜单区域
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onItemLongClick(itemViewHold.swipeLayout, position);
                        return false;
                    }
                });

                //置顶
                itemViewHold.mTop.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        itemViewHold.swipeLayout.close();//隐藏侧滑菜单区域
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onTopClick(position);
                    }
                });

                //删除
                itemViewHold.mDelete.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        itemViewHold.swipeLayout.close();//隐藏侧滑菜单区域
                        int position = itemViewHold.getLayoutPosition();//在增加数据或者减少数据时候，position和index就不一样了
                        mOnItemClickLitener.onDeleteClick(position);
                    }
                });
            }
            mItemManger.bindView(viewHolder.itemView, index);//实现只展现一条列表项的侧滑区域
        }
    }

    /**
     * 添加Item--用于动画的展现*/
    public void addItem(int position,NewsBean listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 删除Item--用于动画的展现*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回调================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
        void onItemLongClick(View view, int position);
        /**置顶*/
        void onTopClick(int position);
        /**删除*/
        void onDeleteClick(int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}

三、使用方法

在MainActivity中使用如下【基本上没有变化】

package com.why.project.recyclerswipeadapterdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;

import com.daimajia.swipe.util.Attributes;
import com.why.project.recyclerswipeadapterdemo.adapter.NewsAdapter;
import com.why.project.recyclerswipeadapterdemo.bean.NewsBean;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity{

    private RecyclerView mRecyclerView;
    private ArrayList<NewsBean> mNewsBeanArrayList;
    private NewsAdapter mNewsAdapter;

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

    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recycler_view);
    }

    private void initDatas() {
        //初始化集合
        mNewsBeanArrayList = new ArrayList<NewsBean>();
        for(int i=0; i<10;i++){
            NewsBean newsBean = new NewsBean();
            newsBean.setNewsId("123"+i);
            newsBean.setNewsTitle("标题"+i);

            mNewsBeanArrayList.add(newsBean);
        }

        //设置布局管理器
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(linearLayoutManager);

        //设置适配器
        if(mNewsAdapter == null){
            //设置适配器
            mNewsAdapter = new NewsAdapter(this, mNewsBeanArrayList);
            mNewsAdapter.setMode(Attributes.Mode.Single);//设置只有一个拖拽打开的时候，其他的关闭
            mRecyclerView.setAdapter(mNewsAdapter);
            //添加分割线
            //设置添加删除动画
            //调用ListView的setSelected(!ListView.isSelected())方法，这样就能及时刷新布局
            mRecyclerView.setSelected(true);
        }else{
            mNewsAdapter.notifyDataSetChanged();
        }
    }

    private void initEvents() {
        //列表适配器的点击监听事件
        mNewsAdapter.setOnItemClickLitener(new NewsAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this,"点击",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongClick(View view, int position) {
                Toast.makeText(MainActivity.this,"长按",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTopClick(int position) {
                Toast.makeText(MainActivity.this,"置顶",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDeleteClick(int position) {
                Toast.makeText(MainActivity.this,"删除",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

混淆配置

无

参考资料

AndroidSwipeLayout

项目demo下载地址

https://github.com/haiyuKing/RecyclerSwipeAdapterDemo