炫酷侧滑菜单+Toolbar完美整合
2017-05-09 本文已影响424人
菜鸟窝
本文为菜鸟窝作者 吴威龙 的连载
菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程
如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。
[toc]
前言
侧滑菜单想必大家都不陌生，最著名的 Google Play 就是使用了由 DrawerLayout+NavigationView 实现的侧滑菜单，如下图所示：
image
看了 Google play 的炫酷侧滑菜单，有没有冲动自己写一个呢？
下面来看看 菜鸟手机助手 实现的效果：
image
是不是毫不逊色于 Google Play 呢？下面我们用代码来实现这个效果吧！
DrawerLayout 介绍
Google 老爹推出的侧滑菜单控件（有的称为抽屉控件）
该布局控件以 android.support.v4.widget.DrawerLayout 为根控件DrawerLayout 布局控件下包裹两个控件.第一个控件是内容控件（主界面）,第二个是侧滑控件（就是侧滑的菜单,这里使用 NavigationView 作为布局控件）
使用 android:layout_gravity 属性来指定它的滑动位置, start 表示从左滑出, end 表示从右滑出；
设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener)
NavigationView 介绍
是什么:
以前做侧滑菜单的时候，左边滑出来的那一部分布局都是自己来定义的，浪费时间得同时还很难看。于是 Google 老爹在 5.0 之后推出了 NavigationView,这个菜单整体分为两部分，上面一部分为 HeaderLayout,下面的点击项为 menu.这样极大的方便了我们的开发效率啊。
常用属性如下：
app:headerLayout=“@layout/header_layout” 表示引用一个头布局文件
app:menu=“@menu/main” 表示引用一个 menu 作为下面的点击项
获取头部 View headerView = navigationView.getHeaderView(0);
item 点击 navigationView.setNavigationItemSelectedListener（）
代码实现步骤：
主布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cniao5.cniao5play.ui.activity.MainActivity">
<!--第一个控件为内容控件 -->
<android.support.design.widget.CoordinatorLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="@string/app_name"
android:theme="@style/AppTheme.ToolBar"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabTextColor="@color/md_white_1000"
app:tabSelectedTextColor="@color/md_white_1000"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
<!--第二个控件为侧滑布局控件 -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="320dp"
android:layout_height="match_parent"
app:headerLayout="@layout/layout_header"
app:menu="@menu/menu_left"
android:layout_gravity="start"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
NavigationView 侧滑控件所引用的 headerLayout 布局文件 layout_header.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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:gravity="center"
>
<ImageView
android:id="@+id/img_avatar"
android:layout_marginTop="10dp"
android:layout_width="100dp"
android:layout_height="100dp"
app:ico_size="100dp"
app:ico_color="#ffffff"
/>
<TextView
android:id="@+id/txt_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="未登录"
android:textColor="@color/white"/>
</LinearLayout>
NavigationView 侧滑控件所引用的 menu 菜单文件 menu_left.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single" android:id="@+id/group1" >
<item
android:id="@+id/menu_app_update"
android:title="@string/apps_update"/>
<item
android:id="@+id/menu_download_manager"
android:title="@string/download_manager"/>
<item
android:id="@+id/menu_app_uninstall"
android:title="@string/app_uninstall"/>
<item
android:id="@+id/menu_setting"
android:title="@string/sys_setting"/>
</group>
MainActivity.java 文件核心代码段
public class MainActivity extends BaseActivity {
.
.
.
@Override
public int setLayout() {
return R.layout.activity_main;
}
.
.
.
/**
* 初始化 Toolbar
*/
private void initToolbar(){
//给 ToolBar 设置布局
mToolBar.inflateMenu(R.menu.toolbar_menu);
// Menu menu = mToolBar.getMenu();
mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if(item.getItemId() == R.id.action_download){
startActivity(new Intent(MainActivity.this,AppManagerActivity.class));
}
return true;
}
});
}
/**
* 初始化 DrawerLayout
*/
private void initDrawerLayout() {
headerView = mNavigationView.getHeaderView(0);
mUserHeadView = (ImageView) headerView.findViewById(R.id.img_avatar);
mUserHeadView.setImageDrawable(new IconicsDrawable(this, Cniao5Font.Icon.cniao_head).colorRes(R.color.white));
mTextUserName = (TextView) headerView.findViewById(R.id.txt_username);
mNavigationView.getMenu().findItem(R.id.menu_app_update).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_loop));
mNavigationView.getMenu().findItem(R.id.menu_download_manager).setIcon(new IconicsDrawable(this, Cniao5Font.Icon.cniao_download));
mNavigationView.getMenu().findItem(R.id.menu_app_uninstall).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_trash_outline));
mNavigationView.getMenu().findItem(R.id.menu_setting).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_gear_outline));
mNavigationView.getMenu().findItem(R.id.menu_logout).setIcon(new IconicsDrawable(this, Cniao5Font.Icon.cniao_shutdown));
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//部分点击事件的监听
switch (item.getItemId()) {
case R.id.menu_logout:
logout();
break;
case R.id.menu_download_manager:
toAppManagerActivity();
break;
}
return false;
}
});
/**
* 侧滑菜单与 ToolBar 整合
*/
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.open, R.string.close);
drawerToggle.syncState();
mDrawerLayout.addDrawerListener(drawerToggle);
}
.
.
.
}
总结
侧滑菜单的实现就是如此简单了，本文只是抛砖引玉一下，大家只需要稍微改改就可以满足业务需求了。
