不得不說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) {
}
});