ToolBar+NavigationDraw实现炫酷的侧边栏

Android Studio自带的Navigation Drawer主题撑满了整个界面的高度把ToolBar挡住了，很遗憾左上角那个炫酷的动态Icon看不见了。有兴趣的同学可以去创建一个project，什么都不用写，直接run就可以看到效果了。

如图，就是Android Studio自带的Navigation Drawer样式。

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:openDrawer="start"><include
        layout="@layout/app_bar_main"android:layout_width="match_parent"android:layout_height="match_parent" /><android.support.design.widget.NavigationView
        android:id="@+id/nav_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"android:fitsSystemWindows="true"app:headerLayout="@layout/nav_header_main"app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

我们可以看到这是把ToolBar放在DrawerLayout主界面里的方式，所以会被NavigationView给遮挡住。
本文主要是重新编排DrawerLayout的位置，让ToolBar显示出来。
首先新建一个project，（注：最好选择Navigation Drawer Activity，External Library中该有的都有了），
否则会出现Error:(16) No resource identifier found for attribute ‘headerLayout’ in package ‘com.example.xxx’。当然出现这个错误也不要急，只要在build.gradle(Module:app)的compil后面再加上一条即可。

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {exclude group: 'com.android.support', module: 'support-annotations'})compile 'com.android.support:appcompat-v7:25.0.1'compile 'com.android.support:design:25.0.1'    //添加testCompile 'junit:junit:4.12'
}

然后在activity_main.xml中布局，将DrawerLayout放在ToolBar下面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><!--Toolbar--><include layout="@layout/custom_toolbar" /><!--DrawerLayout--><include layout="@layout/custom_drawerlayout" /></LinearLayout>

这里ToolBar过于简单就不讲了。
custom_drawerlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"tools:openDrawer="start"><!--========================主界面内容========================--><TextView
        android:layout_width="match_parent"android:layout_height="match_parent"android:text="Hello World!"android:textSize="50sp"android:textColor="#0A8F08"android:gravity="center"/><!--========================侧边栏内容========================--><android.support.design.widget.NavigationView
        android:id="@+id/nav_view"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="start"android:scrollbars="none"app:headerLayout="@layout/nav_header_main"app:menu="@menu/my_menu"/></android.support.v4.widget.DrawerLayout>

为了美观，这里还加了一个header。nav_header_main.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="@dimen/nav_header_height"android:background="@drawable/side_nav_bar"android:gravity="bottom"android:orientation="vertical"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:theme="@style/ThemeOverlay.AppCompat.Dark"><ImageView
        android:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="@dimen/nav_header_vertical_spacing"app:srcCompat="@android:drawable/sym_def_app_icon" /><TextView
        android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="@dimen/nav_header_vertical_spacing"android:text="Android Studio"android:textAppearance="@style/TextAppearance.AppCompat.Body1" /><TextView
        android:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="android.studio@android.com" /></LinearLayout>

header可以放个头像、个人信息、邮箱什么的，比如QQ就是头像、QQ等级和签名。
放置完header以后可以通过menu设置一个带图标的菜单栏，（动态添加的方式为 navigationView.getMenu().add();只是不知道如何添加Icon，如果有大神知道，请告知）。
以下是my_menu.xml部分

<?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="Camera" /><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>

到这里，布局差不多完成了，不过还有一点要记住，那就是style里面的主题得选择NoActionBar，因为我们有ToolBar了，不再需要ActionBar。(尝试了一下，如果不改成NoActionBar，App会崩溃。)
最后来讲讲Activity。
MAinActivity.java

package com.example.zhan.navigationdraw2_demo;import android.graphics.Color;
import android.os.Bundle;
import android.support.design.internal.NavigationMenuView;
import android.support.v4.view.GravityCompat;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {//声明相关变量public Toolbar toolbar;public DrawerLayout mDrawerLayout;public ActionBarDrawerToggle mDrawerToggle;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViews(); //获取控件toolbar.setTitle("Toolbar");//设置Toolbar标题toolbar.setTitleTextColor(Color.parseColor("#FFFFFFFF")); //设置标题颜色setSupportActionBar(toolbar);   //绑定//创建返回键，并实现打开关/闭监听mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);}@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);}};mDrawerToggle.syncState();  //Synchronize the state of the drawer indicator/affordance with the linked DrawerLayoutmDrawerLayout.addDrawerListener(mDrawerToggle);     //监听DrawerLayout}private void findViews() {toolbar = (Toolbar) findViewById(R.id.tl_custom);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);
//        navigationView.setItemIconTintList(null);     //设置图标为本色disableNavigationViewScrollbars(navigationView);    //设置NavigationView滚动条隐藏}@Overridepublic void onBackPressed() {if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) {mDrawerLayout.closeDrawer(GravityCompat.START);} else {super.onBackPressed();}}@Overridepublic boolean onNavigationItemSelected(MenuItem item) {// Handle navigation view item clicks here.int id = item.getItemId();if (id == R.id.nav_camera) {// Handle the camera action} else if (id == R.id.nav_gallery) {} else if (id == R.id.nav_slideshow) {} else if (id == R.id.nav_manage) {} else if (id == R.id.nav_share) {} else if (id == R.id.nav_send) {}mDrawerLayout.closeDrawer(GravityCompat.START);return true;}private void disableNavigationViewScrollbars(NavigationView navigationView) {if (navigationView != null) {NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);if (navigationMenuView != null) {navigationMenuView.setVerticalScrollBarEnabled(false);}}}
}

其实Activity的工作很简单，就是监听ToolBar的点击，点击后展开侧边栏，侧边栏展开过程中ToolBar左侧Icon动态变化以及点击主界面侧边栏收回等功能无需复杂代码实现。再一个监听侧边栏的点击(点击后收回)和选中情况(选中不同的item执行不同的事件)。

新增圆形头像

资源下载：ToolBar+NavigationDraw实现炫酷的侧边栏

ToolBar+NavigationDraw+Circleimg侧边栏圆形头像动态图标

ToolBar+NavigationDraw实现炫酷的侧边栏相关推荐

迷笛音乐学校如何_适用于音乐迷的炫酷Vista侧边栏小工具
迷笛音乐学校如何 Personally I have never been a huge fan of the default gadgets in Windows Vista. Since Vi ...
纯css实现炫酷侧边栏
纯css实现炫酷侧边栏有疑问的小伙伴可以深入探讨学习
android动态波浪效果图,【炫酷】Android 波浪式扭曲侧边栏，窗帘(Curtain Menu)效果...
原标题:[炫酷]Android 波浪式扭曲侧边栏,窗帘(Curtain Menu)效果来自:Android技术杂货铺(微信号:Tech-Android) 排版整编作者:Android500 原文: ...
hexo的next主题个性化教程打造炫酷网站
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果主要有以下30种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景实 ...
「珍藏」老司机为你推荐10个炫酷的开源库，看完的人都收藏了
前言技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有同学私信给我说,大佬,怎么这些效果你都能找到?你是怎么搜索的,或者有其他什么秘方?会利用 ...
使用CoordinatorLayout打造一个炫酷的详情页
原文链接:http://www.jianshu.com/p/5287d090e777 开发中如果能恰当的使用material design的一些设计,不仅能让你的APP更炫酷,最重要的是开发起来eas ...
秒建炫酷的开源项目文档，这款神器用起来够优雅
学习过我的开源项目mall的朋友应该知道,我有一个使用Docsify 搭建的项目文档网站.使用Docsify搭建文档网站虽然简单,但是缺少分类.标签.SEO这类功能,随着文档越来越多,查找起来有点不方 ...
超酷的计步器APP（一）——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
超酷的计步器APP(一)--炫酷功能实现,自定义水波纹特效.自定义炫酷开始按钮.属性动画的综合体验好久没写博客了,没给大家分享技术了,真是有些惭愧.这段时间我在找工作,今年Android的行情也不怎 ...
基于Hexo和Github的炫酷个人博客（进阶篇）
基于Hexo和Github的炫酷个人博客(基础篇) 基于Hexo和Github的炫酷个人博客(进阶篇) 网页底部加上浏览量打开/themes/next/layout/_partials/footer ...

ToolBar+NavigationDraw实现炫酷的侧边栏

ToolBar+NavigationDraw实现炫酷的侧边栏相关推荐

最新文章

热门文章