DrawerLayout 和 NavigationView 的使用

参考:

1.NavigationView 的使用

2.NavigationView更改菜单icon和title颜色变化效果

3.Android 自己实现 NavigationView

转了第一篇

NavigationView 的引入让 Android 侧边栏实现起来相当方便,最近公司项目中也使用这个新的控件完成了侧边栏的改版。在使用过程中遇到一些坑,写篇博文记录一下。

本文分为两大主要部分,第一部分是基本使用,第二部分是各种使用小细节(坑),如果你对其使用已经熟悉了,可以跳过第一部分。

基本使用

1. NavigationView 在 design 库中,添加依赖(最新的是 23.2.0);

compile ‘com.android.support:design:23.1.1‘ 

2. 然后在 DrawerLayout 布局中添加 NavigationView ;

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

           ......

        </LinearLayout>
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/activity_main_drawer"/>

</android.support.v4.widget.DrawerLayout>

其中需要注意给 NavigationView 设置 android:layout_gravity="start" 属性。

3.然后注意到 NavigationView 其实是分两个部分的,一个是头部,一个是下面的菜单列表部分,如下图所示:

app:headerLayout="@layout/nav_header" 属性添加,nav_header 的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="192dp"
             android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/nav_header_bg"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp"
        android:padding="8dp"
        android:src="@drawable/ic_avatar"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:padding="16dp"
        android:text="Jaeger"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</FrameLayout>

下面的菜单列表部分是一个 menu 文件,通过 app:menu="@menu/activity_main_drawer"属性添加。

activity_main_drawer.xml 文件在 menu 文件夹下,内容为:

<?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/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import"/>
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery"/>
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow"/>
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools"/>
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share"/>
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send"/>
        </menu>
    </item>

</menu>

4. 菜单列表的点击事件

菜单列表的点击事件设置代码如下:

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
               switch (item.getItemId()){
                   case R.id.nav_personal_info:
                           // do something
                       break;
                   ...
               }
                return false;
            }
        });

至此,NavigationView 的基本使用就差不多搞定了,效果就是前面图片显示的效果。接下来是各种填坑环节。??

使用小细节(和坑)

1. 获得头部(header)内控件

ImageView,你可以在 activity 中直接调用 findViewById() 方法来获得。但是在 Support Library 23.1.0 版本之后,这个不再适用,在我使用的 Support Library 23.1.1 版本中,可以直接调用 getHeaderView()方法先得到 Header,然后在通过header来获得头部内的控件。

View headerView = navigationView.getHeaderView(0);
ImageView ivAvatar = (ImageView) headerView.findViewById(R.id.nav_avatar);

然后就可以进行各种愉快的头像设置,用户名设置了~

关于这个问题,如果你用的不是23.1.1版本的话,你可以看 stackoverflow 上的讨论NavigationView get/find header layout,针对其他版本也有解决方法说明。

2. 菜单列表中的图标不显示原始颜色

当设计师为每一项的图标都设置了不同的颜色时,你将切好的彩色图标文件放进去,运行后发现全变成灰色了。此时可以通过 app:itemIconTint="@color/blue" 为图标统一设置颜色,前后效果如下:

然而这还不是我们需要的效果,我们需要的是彩色的图标,而不是统一的图标颜色。

解决方法是调用 NavigationView 的 setItemIconTintList(ColorStateList tint) 方法,传入 null 参数:

navigationView.setItemIconTintList(null);

最终效果如下:

3. 添加分割线

如上面的截图所示,菜单列表分成了两个部分,中间用一个分割线隔开。解决方法是在 menu 文件中分成多个 group ,且为每个 group 设置 id ,如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/first_group"
        android:checkableBehavior="none">
        <item
            android:id="@+id/nav_personal_info"
            android:icon="@drawable/nav_personal_info"
            android:title="@string/personal_info_setting"/>

        ...

        <item
            android:id="@+id/nav_system_setting"
            android:icon="@drawable/nav_setting"
            android:title="@string/system_setting"/>
    </group>

    <group android:id="@+id/second_group">
        <item
            android:id="@+id/nav_score"
            android:icon="@drawable/nav_score"
            android:title="@string/score"/>
        <item
            android:id="@+id/nav_feedback"
            android:icon="@drawable/nav_feedback"
            android:title="@string/feedback"/>
    </group>

</menu>

4. 隐藏某个菜单列表项

公司项目会根据你是否是管理员,来控制某个菜单列表项的显示和隐藏,因此就出现了这个问题。

原以为比较麻烦,后来搜了下,也比较简单地解决了,直接上代码:

MenuItem menuItem = navigationView.getMenu().findItem(R.id.some_menu_item);
menuItem.setVisible(false);    // true 为显示,false 为隐藏

这个问题也就这么解决了。??

5. 使用 NavigationView 时透明状态栏的处理

这个问题可以看我上一篇文章来解决Android App 沉浸式状态栏解决方案,里面会讲到如何处理抽屉视图的透明状态栏的实现。

写在最后感谢原作者的分享。我在此仅作学习记录之用~

时间: 2024-10-26 17:36:20

DrawerLayout 和 NavigationView 的使用的相关文章

(转载) 使用DrawerLayout和NavigationView从右侧出现

使用DrawerLayout和NavigationView从右侧出现 2016-07-21 17:53 957人阅读 评论(0) 收藏 举报  分类: android(9)  版权声明:本文为博主原创文章,未经博主允许不得转载. 本文地址:http://blog.csdn.net/u011181236/article/details/51985242 1.布局要注意的就是 Android:layout_gravity="right" <android.support.design

DrawerLayout和NavigationView的简单实用

1.添加依赖: compile 'com.android.support:design:25.3.0' //5.0特性 compile 'de.hdodenhof:circleimageview:2.1.0' //用于图片显示的圆形化 2.创建一个menu文件的nav_menu.xml文件 <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.a

Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

[转载请注明出处:http://blog.csdn.net/feiduclear_up/article/details/46514791 CSDN 废墟的树] 上一篇博客我们学习了Android Design Support Library库中的 是个简单的组件,不了解的童鞋可以参考之前的博客 Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用. 这篇博客我们继续学习Design库中的其他四个组件,分别是

Android Design Support Library详解(SnackBar、NavigationView、FloatActionButton等)

Material Design 设计风格非常受欢迎,那么支持其效果的Design Support Library(Android 2.1  API  level 7及其以上)库又有哪些控件呢.主要包括SnackBar.Navigation View.FloatActionbutton.CoordinatorLayout.CollapsingToolBarLayout等.我在Git上看见一个非常炫的效果 谷歌官网介绍:http://android-developers.blogspot.com.e

Android侧滑菜单

1.使用Android Support Library实现 Android目前提供了很方便的侧滑集成,效果如下图所示 具体实现如下: 如果你使用Android Studio,在你的build.gradle文件中添加 dependencies { ... compile 'com.android.support:design:22.2.0' } 如果使用Eclipse(其实Android官方已经不推荐使用,如果要使用的话,可以参考http://developer.android.com/tools

Android控件使用 — 12个Material Design风格控件的使用

项目在GitHub上的地址: https://github.com/Hebin320/MaterialDesignUse 1.AppBarLayout.ToolBar AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作. AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用. ToolBar是谷歌新推出的代替Action

Android 5.X新特性

首先,如果要使用Android 5.X的新特性,我们必须导入5.X的支持包 FloatingActionButton Android 的新的设计规范中具有阴影效果的悬浮窗按钮. 使用之前需要先引入design包. FloatingActionButton是ImageView子类 我们先来看布局中的属性设置 <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout

Android Design Support Library 使用详解

概述 Android Design Support Library 是Google在2015年的IO大会上,带来的全新适应Material Design设计规范的支持库.在这个支持库中,给我们提供了更加规范的MD设计风格控件.重要的是,Android Design Support Library中,支持所有的Android 2.1以上版本系统.在这个支持库中,主要包含下面几大控件: Snackbar,FloatingActionButton,TextInputLayout,TabLayout,A

第二行代码

---恢复内容开始--- 一.开始启程--你的第一行Android代码 Android的四层架构 1.linux内核层--为Android设备的各种硬件提供底层驱动 2.系统运行库层--通过一些C/C++库来为Android系统提供主要的特性支持 Android运行时库,提供一些核心库,允许开发者使用java语言编写Android应用 Dalvik--运行时编译 ART--安装时编译 3.应用框架层--提供构建应用程序时可能遇到的各种API 4.应用层--应用程序 二.先从看得到的入手--探究活