NavigationView 的使用
From:http://laobie.github.ioNavigationView 的引入让 Android 侧边栏实现起来相当方便,最近公司项目中也使用这个新的控件完成了侧边栏的改版。在使用过程中遇到一些坑,写篇博文记录一下。本文分为两大主要部分,第一部分是基本使用,第二部分是各种使用小细节(坑),如果你对其使用已经熟悉了,可以跳过第一部分。基本使用1. Nav
·
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
的基本使用就差不多搞定了,效果就是前面图片显示的效果。接下来是各种填坑环节。
更多推荐
已为社区贡献6条内容
所有评论(0)