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

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

不多说先上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) {

            }
        });
发布了40 篇原创文章 · 获赞 295 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44720366/article/details/105035559