最近在做一款项目用到了抽屉，了解到NavigationView 的引入让 Android 侧边栏实现起来超级方便啊，主要是用DrawerLayout+NavigationView来实现了，今天主要扒一下NavigationView的一些基本使用
话不多说直接上布局还有效果图吧
07B2398AD0719AC765941DCFFCC85208.gif
由图我们可以看出NavigationView其实是分两个部分的，一个是头部，一个是下面的菜单列表部分。
xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<!--侧边栏样式-->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!--主页内容-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--标题栏样式一-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorPrimary"
app:subtitleTextColor="@android:color/white"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="样式"
app:titleTextColor="@android:color/white">
</android.support.v7.widget.Toolbar>
<!--主页内容-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<!--侧边栏内容-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigationview_header"
app:insetForeground="@android:color/transparent"
app:menu="@menu/menu_navigation">
<!--添加脚布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/footer_item_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:drawableStart="@drawable/ic_setting"
android:drawableLeft="@drawable/ic_setting"
android:drawablePadding="1dp"
android:gravity="center"
android:paddingLeft="5dp"
android:text="设置"
android:textAlignment="inherit"
android:textColor="@color/colorPrimary"/>
<Button
android:id="@+id/footer_item_out"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent"
android:drawableStart="@drawable/ic_out"
android:drawableLeft="@drawable/ic_out"
android:drawablePadding="1dp"
android:gravity="center"
android:paddingLeft="5dp"
android:text="退出"
android:textAlignment="center"
android:textColor="@color/colorPrimary"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
我们使用NavigationView的时候需要绑定绑定Header和菜单
app:headerLayout="@layout/navigationview_header"
app:menu="@menu/menu_navigation"
注意
HeaderLayout中的android:fitsSystemWindows="true"属性不起作用
如果需要实现header控件点击事件，需要通过NavigationView的getHeaderView(Int)方法可以获取到HeaderLayout对应的View，从而通过View的findViewById方法进一步操作子View。
View headerView = navigationview.getHeaderView(0);
//寻找头部里面的控件
ImageView ivHead = headerView.findViewById(R.id.iv_head);
菜单menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group
android:id="@+id/group1"
android:checkableBehavior="single">
<item
android:id="@+id/single_1"
android:icon="@drawable/ic_android_fill"
android:title="安卓"
app:actionLayout="@layout/bage_hint"/>
<item
android:id="@+id/single_2"
android:icon="@drawable/ic_apple_fill"
android:title="苹果"
app:actionLayout="@layout/vip_view"/>
</group>
<group
android:id="@+id/group2"
android:checkableBehavior="single">
<item
android:id="@+id/single_3"
android:icon="@drawable/ic_github_line"
android:title="github"/>
<item
android:id="@+id/single_4"
android:icon="@drawable/ic_wechat_fill"
android:title="wechat"/>
</group>
<item
android:title="子菜单">
<menu>
<item
android:id="@+id/item_2"
android:icon="@drawable/ic_taobao_fill"
android:title="淘宝"/>
<item
android:id="@+id/item_1"
android:icon="@drawable/ic_baidu_line"
android:title="百度"/>
<item
android:id="@+id/item_3"
android:icon="@drawable/ic_qq_fill"
android:title="腾讯"/>
</menu>
</item>
</menu>
<item>菜单项
<group>是对菜单进行分组
配置侧滑菜单中的头布局和item这个都很简单，下面主要讲一下NavigationView一些小细节
1、如何修改icon和文字之间的间距，以及icon大小（更改高度和边距）
<dimen name="design_navigation_icon_padding" tools:override="true">9dp</dimen><!--icon与文字间距-->
<dimen name="design_navigation_icon_size" tools:override="true">16dp</dimen><!--icon大小-->
2、如何添加item之间的分割线
<group>标签能够产生分割线,在menu文件中分成多个 group,且为每个group设置 id
<group android:id="@+id/g1">
3、菜单列表中的图标不显示原始颜色
添加完icon之后发现icon颜色并不是切图显示的颜色，全是灰色的了
我们可以在xml设置
app:itemIconTint="@null"
或者代码进行设置
NavigationView.setItemIconTintList(null)
这样icon就可以显示自身的效果了
4、动态隐藏item
使用NavigationView.getMenu().findItem(int id)即可获取到MenuItem对象，然后调用setVisible(boolean)方法设置即可。
MenuItem menuItem = navigationView.getMenu().findItem(R.id.some_menu_item);
menuItem.setVisible(false); // true 为显示，false 为隐藏
5、去掉菜单滚动条
当NavigationView的菜单条目很多的时候，上下滑动右边就会出现一个灰色滚动条，通过下面方法去除。
View menuView = navigationview.getChildAt(0);
if(menuView != null && menuView instanceof NavigationMenuView){
menuView.setVerticalScrollBarEnabled(false);
}
6、文字右侧添加图标或者其他的样式
通过添加layout来实现
app:actionLayout="@layout/menu_right_icon_layout"
menu_right_icon_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/msg_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/back_right"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="10sp" />
</LinearLayout>
效果如下图：
88280CA4E3FCED520CE553B973E235A1.png
网友评论