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