一行代碼實現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) {

            }
        });