HOME. ANGDO ❤ VENKY.

0%

Android Design Support Library - Navigation View的使用

随着Google I/O 2015上 Material Design设计的发布,Google也带来了一个全新的支持库Android Design Support Library。中间包含了几个重要的Material Design组件,Navigation View便是其中之一。

安装 Android Design Support Library

在自己的Android Studio项目中修改Gradle脚本,添加支持包组件。

1
2
3
4
5
6
dependencies {
...
compile 'com.android.support:design:23.1.1'
compile 'de.hdodenhof:circleimageview:2.0.0' // 圆形ImageView 需要时添加
...
}

设置项目主题

NavigationView需要Toolbar配合使用,所以需要设置项目主题隐藏ActionBar

1
2
3
4
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

使用 NavigationView

在Material Design设计中,导航抽屉是一种常用的应用导航方式,使用NavigationView配合v4包中的DrawerLayout可以很简单的实现一个应用导航。将需要设置导航的页面修改为如下布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<!-- 需要呈现的内容 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- 工具栏 -->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
android:background="@color/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

<!-- 导航抽屉 -->
<!--android:layout_gravity="start" // 导航抽屉从右边滑出
app:itemBackground="@android:color/transparent" // 给menu设置背景资源
app:headerLayout="@layout/navigation_header_main" // 给NavigationView添加头部布局
app:menu="@menu/navigation_main"/> // 给NavigationView添加menu菜单布局-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
app:itemBackground="@android:color/transparent"
app:headerLayout="@layout/navigation_header_main"
app:menu="@menu/navigation_main"/>
</android.support.v4.widget.DrawerLayout>

新建navigation_header_main.xml文件设置导航抽屉头部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="@drawable/navigation_header_bg"
android:padding="@dimen/activity_horizontal_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<!--圆形ImageView-->
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/civ_username"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_above="@+id/text_username"
android:layout_marginBottom="16dp"
android:scaleType="centerCrop"
android:src="@drawable/user_profile"/>

<TextView
android:id="@+id/text_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/text_email"
android:text="Juan Carlos"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textStyle="bold"/>

<TextView
android:id="@+id/text_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="[email protected]"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</RelativeLayout>

新建navigation_main.xml设置导航抽屉菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" econding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<!--
<item
android:id="@+id/calendario" // 菜单项ID
android:icon="@drawable/ic_menu_calendar" // 菜单项图标
android:title="Calendario"/> // 菜单项文字
-->
<item
android:id="@+id/calendario"
android:icon="@drawable/ic_menu_calendar"
android:title="Calendario"/>
</group>
</menu>

MainActivity.java中,将Toolbar安装在ActionBar位置,把ToolBarNavigationView绑定,在ToolBar上设置NavigationView打开按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 将 Toolbar 安装在 ActionBar 位置
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
// 使用 ActionBarDrawerToggle 初始化 DrawerLayout 在 Toolbar 上的图标
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer);
// 设置 DrawerLayout 抽屉监听
drawerLayout.setDrawerListener(actionBarDrawerToggle);
// 同步 ActionBar图标
actionBarDrawerToggle.syncState();
}
// 设置返回按钮
@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}

设置导航抽屉菜单的点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
navigationView.setNavigationItemSelectedListener(new OnNavigationItemSelectedListene{
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true); //将点击菜单项设为选中
drawerLayout.closeDrawers(); // 关闭导航抽屉
switch (item.getItemId()){
case R.id.calendario: // menu中设置的菜单项ID
// 设置点击后的操作
break;
...
}
return true;
}
});

一些遇到的坑

获得头部(header)内控件

在23.1.0版本之后,需要调用 getHeaderView()方法先得到 Header,然后在通过header来获得头部内的控件。

1
2
View headerView = navigationView.getHeaderView(0);
CircleImageView ivAvatar = (CircleImageView) headerView.findViewById(R.id.civ_username);

菜单列表中的图标颜色

NavigationView的菜单颜色默认是灰色,此时可以通过app:itemIconTint="@color/blue"为图标统一设置颜色。
有时我们需要彩色的图标,在menu文件中设置好不同颜色的图标后,调用NavigationViewsetItemIconTintList(ColorStateList tint)方法,传入null参数就可以让NavigationView显示图标的原本颜色。

1
navigationView.setItemIconTintList(null);

NavigationView的菜单选中颜色默认是主题中设置的colorPrimary颜色。当需要的选中颜色和主题的colorPrimary颜色不同时可以给NavigationView单独设置主题app:theme="@style/MenuTheme"

隐藏某个菜单列表项

有时候需要隐藏某个菜单列表项,只需要得到那个菜单列表项设置为隐藏就可以了。

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

参考:

0.Navigation View - Design Support Library

1.NavigationView 的使用

2.Design Support Library (I): Navigation View的使用