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

• 生活家

文章目录

  • 前言
  • DrawerLayout的单独使用（简单使用）
        • 效果图
        • 具体实现
        • 补充
  • DrawerLayout搭配RecycleView实现列表侧滑菜单的使用（仿QQ消息列表）
        • 效果图
        • 具体实现

前言

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

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

效果图

图中实现的效果汇总：
1.左右侧滑的实现
2.点击按钮打开侧滑栏（单个）
3.点击按钮关闭所有侧滑栏（以及单个关闭）

具体实现

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.侧滑出置顶按钮和删除按钮，并且实现两个按钮效果

具体实现

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

赞 (0)
上一篇 2022年3月22日
下一篇 2022年3月22日

相关推荐