Android--NavigationView+DrawerLayout实现侧滑(仿QQ)

xiaoxiao2021-02-28  26

1、首先导包

[java]  view plain  copy  print ? compile 'com.android.support:design:26.1.0'   2、 使用NavigationView

首先在主布局文件中使用DrawerLayout作为外包装,里面包含一个主页面和侧滑的菜单页面,而侧滑菜单页面用NavigationView实现,drawerLayout中包含了主页面和侧滑的菜单页面

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_na" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.app.ui.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/main_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/mm" android:background="@color/blue" android:layout_margin="20dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Demo" android:textColor="#ffffff" android:textSize="20sp" android:layout_marginLeft="16dp"/> <ImageView android:id="@+id/search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/three" android:background="@color/blue" android:layout_margin="20dp"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="主页" android:textSize="22sp" android:gravity="center"/> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav" android:layout_gravity="left" android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" xmlns:app="http://schemas.android.com/apk/res-auto" app:headerLayout="@layout/head" app:menu="@menu/new_menu" > </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> head.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@color/blue" > <ImageView android:id="@+id/person" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="42dp" android:src="@drawable/touxiang"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:layout_marginTop="24dp" android:textColor="#ffffff" android:text="超宇"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:layout_marginTop="12dp" android:textColor="#ffffff" android:layout_marginBottom="18dp" android:text="不忘初心,方得始终."/> </LinearLayout> <?xml version="1.0" encoding="UTF-8" ?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/favorite" android:icon="@drawable/huiyuan" android:checkable="true" android:title=" 会员"/> </group> <item android:id="@+id/wallet" android:icon="@drawable/money" android:title=" 钱包"/> <item android:id="@+id/photo" android:icon="@drawable/xiangce" android:title=" 相册"/> <item android:id="@+id/dress" android:icon="@drawable/zhuangban" android:title=" 装扮"/> <item android:id="@+id/file" android:icon="@drawable/wenjian" android:title=" 文件"/> </menu> import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.NavigationView; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.Toast; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private DrawerLayout drawerLayout; private NavigationView navigationView; ImageView menu; LinearLayout contentView ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawerLayout = (DrawerLayout) findViewById(R.id.activity_na); navigationView = (NavigationView) findViewById(R.id.nav); menu= (ImageView) findViewById(R.id.main_menu); View headerView = navigationView.getHeaderView(0);//获取头布局 menu.setOnClickListener(this); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { //item.setChecked(true); Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show(); drawerLayout.closeDrawer(navigationView); return true; } }); //为DrawerLayout控件添加监听器 drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() { //当侧滑菜单正在滑动时触发的方法 /** 第一个参数:正在滑动的侧滑菜单 第二个参数:菜单滑动的宽度的百分比 **/ @Override public void onDrawerSlide(View drawerView, float slideOffset) { super.onDrawerSlide(drawerView, slideOffset); //获得侧滑菜单的宽度 int drawerViewWidth = drawerView.getMeasuredWidth(); //根据滑动百分比计算内容部分应该向右边移动的距离 int marginLeft = (int)(drawerViewWidth * slideOffset) ; //获得内容部分的View对象(内容View对象是第一个,所以是0) contentView = (LinearLayout) drawerLayout.getChildAt(0); //修改内容部分的左边距 contentView.setLeft(marginLeft); //解决DrawerLayout不能全屏滑动的问题,displayWidthPercentage传 1,即可实现全屏滑动。 // 如果你想让右侧菜单也是全屏,只要将对应的 "mLeftDragger" 改为 "mRightDragger" setDrawerLeftEdgeSize(MainActivity.this,drawerLayout,1); } }); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.main_menu://点击菜单,跳出侧滑菜单 if (drawerLayout.isDrawerOpen(navigationView)){ drawerLayout.closeDrawer(navigationView); }else{ drawerLayout.openDrawer(navigationView); } break; } } @Override public void onPointerCaptureChanged(boolean hasCapture) { } private void setDrawerLeftEdgeSize (Activity activity, DrawerLayout drawerLayout, float displayWidthPercentage) { if (activity == null || drawerLayout == null) return; try { // 找到 ViewDragHelper 并设置 Accessible 为true Field leftDraggerField = drawerLayout.getClass().getDeclaredField("mLeftDragger");//Right leftDraggerField.setAccessible(true); ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout); // 找到 edgeSizeField 并设置 Accessible 为true Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize"); edgeSizeField.setAccessible(true); int edgeSize = edgeSizeField.getInt(leftDragger); // 设置新的边缘大小 Point displaySize = new Point(); activity.getWindowManager().getDefaultDisplay().getSize(displaySize); edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (displaySize.x * displayWidthPercentage))); } catch (NoSuchFieldException e) { } catch (IllegalArgumentException e) { } catch (IllegalAccessException e) { } } } 以上的此外,侧滑菜单头布局也可以设置点击事件,通过View  head = navigtionview .getHeaderView实现,这里的点击事件我没有写,这里我还将状态栏的颜色改成了标题栏的颜色,达到整体的界面协调。具体实现方法可以参考文章http://blog.csdn.net/s1674521/article/details/59480114

思考如何关闭手势滑动?NavigationView的确没有相关关闭侧滑手势的属性,但是别忘了,drawerLayout却可以,通过以下属性可以关闭滑动手势操作:在android抽屉开发中,需要关闭手势滑动,来滑出弹出框

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)//关闭手势滑动

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);//打开手势滑动

NavigationView Item图标不显示原始颜色解决办法:

navigationView.setItemIconTintList(null);

转载请注明原文地址: https://www.6miu.com/read-2250346.html

最新回复(0)