Android 模仿QQ消息列表拖拽滑动和侧滑效果简单实现

前言:

相信大家都用过QQ 我们在消息列表里面可以使用拖拽滑动改变当前聊天联系人的位置最近我有模仿做了一个相同的效果，所以现在分享给大家废话不多说我们正式开始

效果图:

TIM图片20200218150857.jpg

TIM图片20200218150724.gif

具体实现

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

     <android.support.v7.widget.RecyclerView
         android:id="@+id/main_ryview"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
     </android.support.v7.widget.RecyclerView>
</RelativeLayout>

TIM截图20200218151148.png

首先我们在MainActivity 布局文件中写一个 RecyclerView 来实现滑动的列表

package com.materialdesign_demo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import java.util.List;

public class MainActivity extends AppCompatActivity  {
    private RecyclerView recyclerView;
    private  Myadapter myadapter;
    ItemTouchHelper itemTouchHelper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initview();
    }

    private void initview() {
        recyclerView=findViewById(R.id.main_ryview);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        List<QQmessage>list=DataUtils.list();
        myadapter=new Myadapter(list, new StartdragCallback() {
            @Override
            public void startdrag(RecyclerView.ViewHolder viewHolder) {
                itemTouchHelper.startDrag(viewHolder);
            }
        });
        recyclerView.setAdapter(myadapter);
        ItemTouchHelper.Callback callback=new 
        MessageitemtochCallback(myadapter);
        itemTouchHelper=new ItemTouchHelper(callback);
        itemTouchHelper.attachToRecyclerView(recyclerView);
    }
}

我们定义一个
MessageitemtochCallback 继承 ItemTouchHelper.Callback
通过重写 getMovementFlags 方法和 onMove来处理 RecyclerView item的拖拽和滑动

package com.materialdesign_demo;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;




public class MessageitemtochCallback extends ItemTouchHelper.Callback {
    private  ItemTouchAdapterCallback itemTouchAdapterCallback;
    public MessageitemtochCallback(ItemTouchAdapterCallback itemTouchAdapterCallback) {
        this.itemTouchAdapterCallback = itemTouchAdapterCallback;
    }

    /**
     * @param recyclerView
     * @param viewHolder
     * @return
     * 判断是否需要监听哪个动作 侧滑 拖拽
     */
    @Override
    public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
       int  dragFlags=ItemTouchHelper.UP|ItemTouchHelper.DOWN;
       int  swipeFlags=ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT;
        return makeMovementFlags(dragFlags,swipeFlags);

    }

    /**
     *
     * @param recyclerView
     * @return
     * 拖拽的时候回调这个方法
     *
     */

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder srcholder,
                          @NonNull RecyclerView.ViewHolder targethodler) {

        /**
         * 刷新数据
         * 刷新界面(刷新adapter)
         *
         */
        itemTouchAdapterCallback.onitemmove(srcholder.getAdapterPosition(),targethodler.getAdapterPosition());
        return false;
    }

    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
     itemTouchAdapterCallback.onitemSwiped(viewHolder.getAdapterPosition());

    }

    @Override
    public boolean isLongPressDragEnabled() {
        return true;
    }
}

我们在 onMove 方法和 onSwiped方法里面通过itemTouchAdapterCallback 回调处理刷新数据

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder srcholder,
                          @NonNull RecyclerView.ViewHolder targethodler) {
        /**
         * 刷新数据
         * 刷新界面(刷新adapter)
         *
         */
        itemTouchAdapterCallback.onitemmove(srcholder.getAdapterPosition(),targethodler.getAdapterPosition());
        return false;
    }
    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
     itemTouchAdapterCallback.onitemSwiped(viewHolder.getAdapterPosition());
  }

我们在 Myadapter 里面需要实现 ItemTouchAdapterCallback来具体的实现的具体的 onitemmove 方法和onitemSwiped方法来刷新界面

package com.materialdesign_demo;
public interface ItemTouchAdapterCallback {
    boolean onitemmove(int fromposition , int toposition);
    void  onitemSwiped(int position);
}

Myadapter 具体实现

package com.materialdesign_demo;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.Collections;
import java.util.List;


public class Myadapter extends RecyclerView.Adapter<Myadapter.MyViewHodler> implements ItemTouchAdapterCallback{
   private List<QQmessage> data;
   private StartdragCallback satrtdragCallback;
    public Myadapter(List<QQmessage> data, StartdragCallback satrtdragCallback) {
        this.data = data;
        this.satrtdragCallback = satrtdragCallback;
    }
    @NonNull
    @Override
    public Myadapter.MyViewHodler onCreateViewHolder(@NonNull ViewGroup parent, int i) {
       View  view=LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem,parent,false);
        return new MyViewHodler(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final Myadapter.MyViewHodler myViewHodler, int position) {

          QQmessage qqmessage=data.get(position);
          myViewHodler.imageView.setImageResource(qqmessage.getLogo());
          myViewHodler.textView.setText(qqmessage.getName());
          myViewHodler.imageView.setOnTouchListener(new View.OnTouchListener() {
             @Override
             public boolean onTouch(View v, MotionEvent event) {
                satrtdragCallback.startdrag(myViewHodler);
                 return false;
             }
         });
    }
    @Override
    public int getItemCount() {
        return data.size();
    }
    public class  MyViewHodler extends RecyclerView.ViewHolder{
     ImageView imageView;
     TextView textView;
        public MyViewHodler(@NonNull View itemView) {
            super(itemView);
            imageView=itemView.findViewById(R.id.item_imageview);
            textView=itemView.findViewById(R.id.item_textview);
        }
    }
    @Override
    public boolean onitemmove(int fromposition, int toposition) {
        Collections.swap(data ,fromposition,toposition);
           notifyItemMoved(fromposition,toposition);
        return false;
    }

    @Override
    public void onitemSwiped(int position) {

        data.remove(position);
        notifyItemRemoved(position);
    }

}

在 onitemmove 方法里面调用

//改变集合中元素的位置  
 Collections.swap(data ,fromposition,toposition);
//刷新适配器
 notifyItemMoved(fromposition,toposition);

    @Override
    public boolean onitemmove(int fromposition, int toposition) {
        Collections.swap(data ,fromposition,toposition);
           notifyItemMoved(fromposition,toposition);
        return false;
    }

在 onitemSwiped 来调用 data.remove(position);删除集合数据

 @Override
    public void onitemSwiped(int position) {
      //删除集合中某一条数据 
        data.remove(position);
      //  刷新适配器 
        notifyItemRemoved(position);
    }

然后我们在MainActivity 中对itemTouchHelper 进行处理即可

 recyclerView=findViewById(R.id.main_ryview);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        List<QQmessage>list=DataUtils.list();
        myadapter=new Myadapter(list, new StartdragCallback() {
            @Override
            public void startdrag(RecyclerView.ViewHolder viewHolder) {
                itemTouchHelper.startDrag(viewHolder);
            }
        });
        recyclerView.setAdapter(myadapter);
        ItemTouchHelper.Callback callback=new 
        MessageitemtochCallback(myadapter);
        itemTouchHelper=new ItemTouchHelper(callback);
        itemTouchHelper.attachToRecyclerView(recyclerView);

到此我们需要实现仿造QQ的拖拽滑动和侧滑删除已经实现了

最后总结:

这个是模仿QQ里面拖拽滑动和侧滑效果是materialdesign材料设计的里面的 ItemTouchHelper.Callback android.support.v7包里面的提供的方法
我们需要继承重写 getMovementFlags onMove onSwiped 等方法来是实现相应的效果 ,到此整个效果我们就实现完成了, 有兴趣的同学可以留言
项目地址 :https://gitee.com/qiuyu123/FileGit.git