随着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' ... }
|
设置项目主题
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.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">
<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" android:icon="@drawable/ic_menu_calendar" android:title="Calendario"/> </group> </menu>
|
在MainActivity.java
中,将Toolbar
安装在ActionBar
位置,把ToolBar
和NavigationView
绑定,在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 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 actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer); drawerLayout.setDrawerListener(actionBarDrawerToggle); 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: break; ... } return true; } });
|
一些遇到的坑
在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文件中设置好不同颜色的图标后,调用NavigationView
的 setItemIconTintList(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);
|
参考:
0.Navigation View - Design Support Library
1.NavigationView 的使用
2.Design Support Library (I): Navigation View的使用