欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  互联网

荐 DrawerLayout（侧滑栏）详解，仿QQ消息列表（置顶、删除）

程序员文章站 2022-06-15 21:38:18
QQ消息列表的侧滑栏菜单，以及置顶效果、删除效果有没有想过怎么做？来吧，仅需5分钟！...

文章目录

前言

本篇文章大致可分为三个部分（可选择性阅读）：
一：DrawerLayout的单独使用（简单使用）
二：DrawerLayout搭配RecycleView实现列表侧滑菜单的使用（仿QQ消息列表）

DrawerLayout的单独使用（简单使用）

效果图

图中实现的效果汇总：
1.左右侧滑的实现
2.点击按钮打开侧滑栏（单个）
3.点击按钮关闭所有侧滑栏（以及单个关闭）
荐 DrawerLayout（侧滑栏）详解，仿QQ消息列表（置顶、删除）

具体实现

XML布局
这里需要注意
1.内容区（也就是你不用任何操作显示的区域），布局需要设置成占满父布局match_parent
2.两侧的侧滑栏布局的LinearLayout需要给到android:layout_gravity="start(end)"属性

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--内容区-->
    <LinearLayout
        android:id="@+id/view_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />

        <Button
            android:id="@+id/btn_open"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="打开侧滑栏" />

    </LinearLayout>

    <!--左侧滑区-->
    <LinearLayout
        android:id="@+id/view_left"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#3F51B5"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关闭所有侧滑栏" />

        <Button
            android:id="@+id/btn_left_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关闭当前侧滑栏" />

    </LinearLayout>

    <!--右侧滑区-->
    <LinearLayout
        android:id="@+id/view_right"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="#2196F3"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_right_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关闭当前侧滑栏" />

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Java后台
由于其余部分都是控件的声明，所以这里只贴出核心

//View.OnClickListener接口的实现
@Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_open://打开侧滑栏
                drawerLayout.openDrawer(GravityCompat.START);//打开左边
                drawerLayout.openDrawer(GravityCompat.END);//打开右边
                break;
            case R.id.btn_close://关闭所有侧滑栏
                drawerLayout.closeDrawers();
                break;
            case R.id.btn_left_close://关闭左侧
                drawerLayout.closeDrawer(GravityCompat.START);
                break;
            case R.id.btn_right_close://关闭右侧
                drawerLayout.closeDrawer(GravityCompat.END);
                break;
        }
    }

补充

这里补充几个常用方法：
1.侧滑栏滑出后，内容区的覆盖颜色（侧滑栏滑出后，内容区会有一层灰色覆盖，下面是直接设置成透明覆盖，也就相当于没有覆盖）

//去除侧滑栏滑出后灰色覆盖
drawerLayout.setScrimColor(Color.TRANSPARENT);

2.判断侧滑栏当前状态（是否展开）

//判断左边侧滑栏状态（是否打开）
drawerLayout.isDrawerOpen(GravityCompat.START);
//判断右边侧滑栏状态（是否打开）
drawerLayout.isDrawerOpen(GravityCompat.END);

3.DrawerLayout监听器

drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                //滑动
            }

            @Override
            public void onDrawerOpened(@NonNull View drawerView) {
                //打开
            }

            @Override
            public void onDrawerClosed(@NonNull View drawerView) {
                //关闭
            }

            @Override
            public void onDrawerStateChanged(int newState) {
                //状态改变
            }
        });

DrawerLayout搭配RecycleView实现列表侧滑菜单的使用（仿QQ消息列表）

效果图

图中实现的效果汇总：
1.RecycleView结合DrawerLayout实现仿QQ消息列表效果
2.侧滑出置顶按钮和删除按钮，并且实现两个按钮效果
荐 DrawerLayout（侧滑栏）详解，仿QQ消息列表（置顶、删除）

具体实现

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

XML布局（Item）

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl"
    android:layout_width="match_parent"
    android:layout_height="100dp">

    <LinearLayout
        android:id="@+id/ll_item"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="100dp"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/txv_name"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="end">

        <TextView
            android:id="@+id/top"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFEB3B"
            android:gravity="center"
            android:text="置顶"
            android:textSize="26sp" />

        <TextView
            android:id="@+id/del"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#F10001"
            android:gravity="center"
            android:text="删除"
            android:textSize="26sp" />

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Adapter适配器（核心功能区）
功能点汇总：
1.利用DrawerLayout的监听事件实现了RecycleView的子项随着侧滑而向左滑动的效果
2.点击侧滑栏置顶子项
3.置顶后，RecycleView移动到首项
4.点击侧滑栏删除子项
注意：这里的置顶和删除功能最容易出错的就是position容易因为置顶和删除操作导致错乱，所以这里记得每次进行子项的操作要进行局部刷新

置顶功能实现思路：把当前子项内容加到List第一个位置，并且删除当前子项，最后利用LinearLayoutManager让RecycleView滚动到第一项的位置。
为了避免position错乱，先保存好当前子项的值，再删除，最后添加到第一个的位置

public class AdapterDrawer extends RecyclerView.Adapter<AdapterDrawer.ViewHolder> {

    List<BeanDrawer> list;
    LinearLayoutManager manager;

    public AdapterDrawer(List<BeanDrawer> list, LinearLayoutManager manager) {
        this.list = list;
        this.manager = manager;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycle_drawer, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull final ViewHolder holder, final int position) {
        holder.ivIcon.setImageResource(list.get(position).getIcon());
        holder.txvName.setText(list.get(position).getName());
        //实现仿QQ消息列表，整个子项左移的效果
        holder.dl.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                //DrawerLayout滑动监听
                holder.llItem.setTranslationX(-(drawerView.getMeasuredWidth() * slideOffset));
            }

            @Override
            public void onDrawerOpened(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerClosed(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
        holder.top.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //置顶思路，把当前子项内容加到List第一个位置，并且删除当前子项（避免position错乱，先保存好值，再删除，再添加）
                String name = list.get(position).getName();
                int icon = list.get(position).getIcon();
                list.remove(position);
                notifyItemRemoved(position);
                //RecycleView局部更新，防止position错乱
                notifyItemRangeChanged(position, 1);
                BeanDrawer beanDrawer = new BeanDrawer();
                beanDrawer.setName(name);
                beanDrawer.setIcon(icon);
                list.add(0, beanDrawer);
                notifyItemInserted(0);
                //RecycleView局部更新，防止position错乱
                notifyItemRangeChanged(0, 1);
                //RecycleView移动到第一项
                manager.scrollToPositionWithOffset(0, 0);
                //关闭侧滑栏
                holder.dl.closeDrawers();
            }
        });
        holder.del.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //List移除当前数据,防止更新时出现数据错乱
                list.remove(position);
                //RecycleView移除当前子项（有动画效果）
                notifyItemRemoved(position);
                //RecycleView局部更新，防止position错乱
                notifyItemRangeChanged(position, 1);
                //关闭侧滑栏，防止删除一项后，侧滑栏还处于开启状态
                holder.dl.closeDrawers();
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private DrawerLayout dl;
        private LinearLayout llItem;
        private ImageView ivIcon;
        private TextView txvName;
        private TextView top;
        private TextView del;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            dl = (DrawerLayout) itemView.findViewById(R.id.dl);
            llItem = (LinearLayout) itemView.findViewById(R.id.ll_item);
            ivIcon = (ImageView) itemView.findViewById(R.id.iv_icon);
            txvName = (TextView) itemView.findViewById(R.id.txv_name);
            top = (TextView) itemView.findViewById(R.id.top);
            del = (TextView) itemView.findViewById(R.id.del);

            //设置侧滑栏划出后，内容区的覆盖颜色（这里设置成透明）
            dl.setScrimColor(Color.TRANSPARENT);
        }
    }
}

Java后台
这里没什么好说的，就是加了10条数据，然后设置了布局管理器，加上了子项的分割线，很简单

public class RecycleDrawerActivity extends AppCompatActivity {

    private RecyclerView recycleView;

    BeanDrawer beanDrawer;
    AdapterDrawer adapterDrawer;
    List<BeanDrawer> list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycle_drawer);
        initView();
        initData();
        //布局管理器
        LinearLayoutManager manager = new LinearLayoutManager(this);
        //设置成竖直
        manager.setOrientation(RecyclerView.VERTICAL);
        recycleView.setLayoutManager(manager);
        //子项分割线
        recycleView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
        adapterDrawer = new AdapterDrawer(list,manager);
        recycleView.setAdapter(adapterDrawer);
    }

    private void initData() {
        for (int i = 0; i < 10; i++) {
            beanDrawer = new BeanDrawer();
            beanDrawer.setIcon(R.mipmap.ic_launcher);
            beanDrawer.setName("天问" + i + "号");
            list.add(beanDrawer);
        }
    }

    private void initView() {
        recycleView = (RecyclerView) findViewById(R.id.recycle_view);
    }
}

本文地址：https://blog.csdn.net/qq_44720366/article/details/107935739

相关标签： Android

上一篇： 5G 改变我们的生活，5G网络优化工程师如何发挥作用

下一篇： 手机能连上无线网电脑能连上但上不了网

推荐阅读