一行代码实现QQ聊天列表侧滑栏效果

2020-03-22

字数统计: 659字 | 阅读时长≈ 2分

title: 一行代码实现QQ聊天列表侧滑栏效果

不得不说DrawerLayout是个好东西！之前一直蠢蠢地用HorizontalScrollView来实现侧滑栏效果，问题那是百出啊，要设置滑动摩擦系数，要考虑右侧菜单栏怎样适配多种屏幕，我太难了！发现DrawerLayout以后才发现新世界~这里就来给大家演示一下效果：

GIF

简直帅得不要不要的！

不多说先上XML布局：

这里需要注意，根布局最好用DrawerLayout，不用这个可能会有焦点等问题~
然后原页面（也就是你正常显示的页面），宽度记得是**match_parent**
侧滑出的菜单栏宽度没有要求，但是android:layout_gravity="end"属性需要设置，这里，end=右边，start=左边，top=上面，bottom=下面，代表菜单栏相对于原页面的位置！

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

    <!--原页面-->
    <LinearLayout
        android:id="@+id/view_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="10dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/img_up" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="60dp"
            android:gravity="center"
            android:text="哈哈哈"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="18sp" />

    </LinearLayout>

    <!--侧滑栏-->
    <LinearLayout
        android:id="@+id/view_Right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end">

        <Button
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:text="删除" />

        <Button
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/btn_del"
            android:text="置顶" />

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

再来看JAVA代码：

首先给你的DrawerLayout加上一个监听器
然后在onDrawerSlide（滑动事件）里面设置你原页面的平移
原页面平移的距离 = 右侧菜单滑出的距离
距离计算：右侧菜单栏的宽度（drawerView.getMeasuredWidth()） * 滑出的百分比（slideOffset）
最后因为setTranslationX()方法是默认向右边移，而我们这里需要向左，所以我们把所得距离加上负号！

mDrawLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            //滑动事件
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
                /** 实现QQ列表侧滑功能
                 * 在addDrawerListener监听器中DrawSlide（滑动监听）事件中设置原页面进行平移
                 * 平移距离等于右侧菜单滑出的距离
                 * 右侧菜单滑出距离计算公式： 右侧菜单布局的宽度 * 滑出百分比
                 * 由于setTranslationX()方法默认是从左往右移，所以这边前面加了一个负号
                 */
                mViewItem.setTranslationX(-(drawerView.getMeasuredWidth()*(slideOffset)));
            }
            @Override
            public void onDrawerOpened(@NonNull View drawerView) {

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

            }
            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

本文作者： Android YU
本文链接： http://yoursite.com/2020/03/22/一行代码实现QQ聊天列表侧滑栏效果/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！