ToolBar+NavigationDraw实现炫酷的侧边栏

最新推荐文章于 2021-06-02 19:10:01 发布
最新推荐文章于 2021-06-02 19:10:01 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Android 文章标签： android 侧边栏 ToolBar Navigation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012138272/article/details/53509483
版权

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

    @Override
    protected 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) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();  //Synchronize the state of the drawer indicator/affordance with the linked DrawerLayout
        mDrawerLayout.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滚动条隐藏
    }

    @Override
    public void onBackPressed() {
        if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public 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执行不同的事件)。

完成

GIF

新增圆形头像
圆形头像

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

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

Michael_Zhan_Tcys
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android代码-一个炫酷的侧边栏效果
08-06
FantasySlide 一个 DrawerLayout 的扩展,具有帅气的动画与创新的交互。一次手势完成滑出侧边栏与选择菜单。欢迎下载 demo 体验。 效果 使用方法 添加依赖 compile 'com.github.mzule.fantasyslide:library:1.0.5' 调用 调用方法基本与 DrawerLayout 一致. 本项目支持左右 (start left end right) 侧边栏同时定义。 <!-- 这里是 SideBar 的子视图--> <!-- 如果需要的话，可以添加右侧边栏--> 最外层的 FantasyDrawerLayout 的使用与官方的 DrawerLayout 完全一致。 SideBar 用来包装每一个菜单项，SideBar 本质上可以当做一个 vertical 的 LinearLayout 来使用。 效果图上的文字变色是表示该菜单处于 hover 状态, hover 状态默认会设定 view 的 pressed 状态为 true。可以通过 Listener 来改写, 下文会有详细说
『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-14 2546
ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar。虽然这样看上去好像和ActionBar外观上没什么两样，不过是我们还没用到Material Design中的特性，Toolbar的强大之处在于它可和其它控件联动实现强大的效果，之后再慢慢体验。这里其实学到了很多的新控件和新知识，例如Toolbar，然后复习了drawerLayout，学到了一个新的控件NavigationView以及一个处理图片成圆形格式的开源库circleimageview。
Toolbar的高级使用
WoAiLuoWenXin的专栏
07-17 646
Toolbar的基本使用随着android studio的盛行，eclipse退出历史舞台，material design已日渐流行，本文简单介绍一下toolbar的基本使用方法下面是本人封装后的toolbar代码块 此处本人使用自定义的title，setDisplayShowTitleEnabled为false ：private void initToolbar() { toolba
android动态波浪效果图,【炫酷】Android 波浪式扭曲侧边栏，窗帘(Curtain Menu)效果...
weixin_31081671的博客
05-25 328
原标题：【炫酷】Android 波浪式扭曲侧边栏，窗帘(Curtain Menu)效果来自：Android技术杂货铺(微信号：Tech-Android) 排版整编作者：Android500原文：https://www.jianshu.com/p/ca2331962b2e 写这篇文章的初衷是因为早些时候看到一款morning routine上的窗帘皱褶效果，自己也想去实现它，网上也有一些案例但是效果...
ToolBar+DrawerLayout + NavigationView
07-14
ToolBar+DrawerLayout + NavigationView
TooBar-DrawerLayout:使用Toolbar + DrawerLayout实现菜单侧滑
05-09
TooBar-DrawerLayout使用Toolbar + DrawerLayout实现菜单侧滑DrawerLayout的使用：
NavigationView+ToolBar+TabLayout+ViewPager+Fragment综合使用
02-25
NavigationView+ToolBar+TabLayout+ViewPager+Fragment的综合使用案例,有需要的可以下载看看,对于刚Android的初学者来说是个好的案例.
Toolbar基本使用及Toolbar+ListView实现滑动变色
07-29
Toolbar基本使用及Toolbar+ListView实现滑动变色
Android开发：最详细的 NavigationDrawer 开发实践总结
weixin_33978044的博客
03-10 197
最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后（有问题欢迎反馈哦）： Android开发：Translucent System Bar 的最佳实践 Android开发：最详细的 Toolbar 开发实践总结 接着来写写Android系统UI新特性，本文是我对最近开发过程中应用NavigationDrawer 特性的详细总结。本文涉及到的所有代码实现...
draft-js-side-toolbar-plugin
04-29
DraftJS工具栏插件 这是draft-js-plugins-editor 。 用法： import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin' ; const toolbarPlugin = createSideToolbarPlugin ( ) ;
[开源][安卓][炫酷菜单-2]Side-Menu.Android-master
02-28
[开源][安卓][炫酷菜单-2]Side-Menu.Android-master 安卓炫酷侧面菜单源码
android 开源项目GuillotineMenu酷炫的铡刀菜单
01-23
一个开源的android工程，编译器用的是android-studio。GuillotineMenu-Android我们暂且翻译为铡刀菜单吧.
Android酷炫侧滑菜单
12-12
android中一款酷炫侧滑菜单，切换过程中带有折叠动画效果。
android 侧边栏 简书,Android 侧划，如斯优雅
weixin_35523135的博客
06-02 233
SwipePanel(侧划控件)Background对市面上实现的侧划返回不是很满意(仿微信，QQ 通过修改窗口透明坑太多)，最终决定还是亲手写一个高实用性的吧，效果如下所示，换个图标，更多划动功能可以由你自己解锁，总共一个 600 多行代码的类，推荐通过阅读源码，你肯定会收获很多哈。PreviewlayoutbackDownload源码地址：SwipePanel，喜欢的记得给个小星星哈。Grad...
Android Studio中Intel HAXM的那些坑
热门推荐
Michael Zhan的博客
07-16 6万+
最近用过两台电脑折腾Android Studio，都是windows的系统，不知道为什么连着踩了两个坑。 第一台我结束了qemu-system-i386.exe这个倒霉的进程 导致我开启模拟器的时候一直提示我没有安装Intel HAXM，没办法咯，只好再安装一遍，然后奇葩的事情就发生了，出现了以下问题。 Excuse me？我CPU虚拟化是开启的呀。 这是什么鬼？安装了一次，不...
Android Studio打开Android Device Monitor中的DDMS没有内容显示
Michael Zhan的博客
12-12 1万+
Android Studio Version(2.2.2 || 2.2.3) Android Version(7.1.1 || 7.0) 以前写过SQLite的文章，那时候好像是用Android 6.0，DDMS打开很正常。然后换了电脑，重新安装了Android Studio，模拟器的系统也升到了Android 7.1.1。就在今天调试SQLite的时候发现，打开DDMS里面什么都没有？？？
FragmentManager+Fragment实现微信界面布局
Michael Zhan的博客
12-05 5332
比起侧边栏，个人感觉底部按钮切换界面的方式对于使用者来说，操作更方便，更直观，由此决定写个Demo备着。 主界面xml：<include layout="@layout/title_bar"/> <FrameLayout android:id="@+id/id_content" android:layout_width="match_parent"
在three.js editor编辑器侧边栏中使用src/components/Toolbar.js
最新发布
06-03
如果你想在 three.js editor 编辑器的侧边栏中使用 `src/components/Toolbar.js`，你需要在侧边栏组件中引入 Toolbar 组件，并将其渲染到侧边栏中。 具体来说，你可以在侧边栏组件的文件中添加以下代码： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值