介绍:导航栏从左侧滑入。这是Google应用中常见的模式,并且遵循列表的键盘和指标。通常代表应用程序在屏幕左边缘的主要导航选项。它大部分时间都是隐藏的,但是当用户从屏幕的左边缘滑动手指时会显示,或者在应用的顶层,用户触摸工具栏中的应用程序图标。
NavigationView
介绍:被设计用于应用导航,提供了一种通用的导航方式,体现了设计的一致性。而NavigationView的典型用途就是配合之前v4包的DrawerLayout,作为其中的Drawer部分,即导航菜单的本体部分。NavigationView是一个导航菜单框架,使用menu资源填充数据,使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header。
Toolbar
介绍:Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在Activity的顶部,而是可以放到界面的任意位置。除此之外,在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍。
使用
一.在build.gradle文件中添加
compile ‘com.android.support:appcompat-v7:X.X.X’
compile ‘com.android.support:design:X.X.X’
compile ‘com.android.support:support-v4:X.X.X’
// X.X.X specify the version
二.style样式
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<!-- 箭头 -->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<!--返回键样式-->
<item name="android:fitsSystemWindows">true</item>
</style>
<!-- 左边的箭头指示-->
<style name="DrawerArrowStyle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
三.xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<!--
//为了效果更好,toolbar使用单独的theme
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
//修改的是弹出菜单项的theme
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<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:menu="@menu/buttom_navigation"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
四.menu代码
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="@+id/nav_notification"
android:title="通知" />
<item
android:id="@+id/nav_message"
android:title="私信" />
</group>
<group
android:id="@+id/group_manage"
android:checkableBehavior="none">
<item
android:id="@+id/nav_manage"
android:title="应用管理" />
</group>
<group
android:id="@+id/group_settings"
android:checkableBehavior="none">
<item
android:id="@+id/nav_theme"
android:title="主题风格" />
<item
android:id="@+id/nav_setting"
android:title="设置" />
<item
android:id="@+id/nav_suggestion"
android:title="意见反馈" />
<item
android:id="@+id/nav_about"
android:title="关于" />
</group>
</menu>
五.Activity代码
public class DrawerLayoutActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener {
@BindView(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
@BindView(R.id.toolbar)
Toolbar mToolbar;
@BindView(R.id.navigation_view)
NavigationView mNavigationView;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected int attachLayoutRes() {
return R.layout.activtiy_drawer_layout;
}
@Override
protected void initView() {
//设置toolbar标题文本
mToolbar.setTitle("首页");
//设置toolbar
setSupportActionBar(mToolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
//设置左上角图标是否可点击
actionBar.setHomeButtonEnabled(true);
//左上角加上一个返回图标
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
@Override
protected void initDate() {
//创建返回键,并实现打开关/闭监听
/**
* drawerLayout左侧菜单(或者右侧)的展开与隐藏可以被DrawerLayout.DrawerListener的实现监听到,
* 这样你就可以在菜单展开与隐藏发生的时刻做一些你希望做的事情。
* 如果你的activity有actionbar的话,还是建议你用ActionBarDrawerToggle来监听,ActionBarDrawerToggle实现了DrawerListener,所以他能做DrawerListener可以做的任何事情,
* 同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来,当展开与隐藏的时候图标有一定的平移效果,点击图标的时候还能展开或者隐藏菜单。
* */
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
mNavigationView.setNavigationItemSelectedListener(this);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
String mString = null;
switch (id) {
case R.id.nav_notification:
mString = "通知";
break;
case R.id.nav_message:
mString = "私信";
break;
case R.id.nav_manage:
mString = "应用管理";
break;
case R.id.nav_theme:
mString = "主题风格";
break;
case R.id.nav_setting:
mString = "设置";
break;
case R.id.nav_suggestion:
mString = "意见反馈";
break;
case R.id.nav_about:
mString = "关于";
break;
}
mToolbar.setTitle(mString);
mDrawerLayout.closeDrawer(GravityCompat.START);
return true;
}
}
总结与注意
- DrawerLayout允许放入两个直接子控件,第一个控件是主屏幕显示的内容,第二个控件是滑动菜单中显示的内容。
- DrawerLayout中android:layout_gravity=”start”属性的意思,表示会根据系统语言进行判断,如果系统语言是从左往右(如汉语、英语),滑动菜单就在左边;如果系统语言是从右往左(如阿拉伯语),滑动菜单就在右边。
- 点击ToolBar icon打开侧滑菜单,需要在onOptionsItemSelected()中添加如下代码,意思是交给
ActionBarDrawerToggle去处理app icon的点击事件。由于ActionBarDrawerToggle实现了DrawerListener,所以他能做DrawerListener可以做的任何事情,控制打开和关闭。
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
- 当使用NavigationView时,style中不可以自定义textColorPrimary这个字段,因为我的理解是使用“android:textColorPrimary”需要最小的version为21。所以会报 Error inflating class android.support.design.widget.NavigationView 这个错误。
- 如果想打造一个比较好看的菜单,NavigationView这个可以添加menu和headerLayout来实现市面上比较好看的效果。
- NavigationView.setCheckedItem()将菜单某个item设置为默认选中。