DrawerLayout+NavigationView的使用和一些坑

NavigationView 是google给出替换sliding的,非常易于实现侧边栏的控件;

首先NavigationView包含在design包中,先在studio的project structure中添加dependences  搜索design就可以了选择Android suport包;

DrawerLayout 是v4中的所以一般不用额外添加;

下面是代码编写过程:

DrawerLayout适合做根布局,他包含两部分,注意这两部分内容是按照代码的先后顺序自动区分的,所以一定要注意顺序:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        //第一部分会被识别为正常的主页面区域
    </LinearLayout>

//下面的代码是第二部分,这部分添加的视图会被认为是侧边栏
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/xx"
        app:menu="@menu/xx"
        android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>

注意android:layout_gravity="start"这个属性一定要有,我的代码不知道为什么在自动提示中展示的属性里没有然后我没有加结果侧边栏占据了整个页面把主页面区域都覆盖住了而且设置宽高无效,还好我直接写上这个属性也没有报错而且起作用了。。。。

NavigationView 把自身的视图分为了两部分,一部分是侧边栏唤出后的顶部区域,这部分区域通常会展示用户的头像 和用户名一类的信息,这部分的视图通过app:headerLayout="@layout/xx"引入

另外一部分是下部的功能选择项如一般会有的设置、修改密码、关于我们这些他是以menu的形式展示的可以通过自定义res/menu下的文件来定义每个功能项的图片、名字和ID(还可以分组等)然后通过app:menu="@menu/xx"  添加

添加了上面两部分那再手机上点击触发按钮唤出侧边栏后就会看到一个上部是头像用户信息下部是功能选项列表的一个页面;

好了下面是在activity中:

通过findviewbyid绑定DrawerLayout 和 NavitgationView 

DrawerLayout.closeDrawer(Gravity);//关闭

DrawerLayout.openDrawer(Gravity);//开启

DrawerLayout.isOpen();//检测当前是否开启

NavigationView.setNavigationItemSelectedListener()//处理NavigationView中的各项的点击事件,它的参数会返回被点击的控件通过getId()可以进行识别;

View view = navigationView.getHeaderView(0)可以获得上部的视图,通过view.findById()可以绑定上部的控件进行操作;

navigationView.setItemIconTintList(null);可以使得下部各项的图标显示原本的颜色;

https://developer.android.google.cn/training/implementing-navigation/nav-drawer  google的说明文档

猜你喜欢

转载自blog.csdn.net/ysthuigui/article/details/84854351
今日推荐