Android中侧栏好看的导航栏css代码用Navigation Drawer好还是library

粗略介绍Android NavigationDrawer抽屉导航 -- 简明现代魔法主题信息(必填)
主题描述(最多限制在50个字符)
申请人信息(必填)
申请信息已提交审核,请注意查收邮件,我们会尽快给您反馈。
如有疑问,请联系
CSDN &《程序员》编辑/记者,投稿&纠错等事宜请致邮
你只管努力,剩下的交给时光!
如今的编程是一场程序员和上帝的竞赛,程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止,上帝是赢的。个人网站:。个人QQ群:、
个人大数据技术博客:DrawerLayout和NavigationView使用详解 - 简书
DrawerLayout和NavigationView使用详解
Android Material Design Library 推出了很长时间,越来越多的APP使用了符合Library 包的控件,DrawerLayout绝对是热门之一,Material Design定义了一个抽屉导航应该有何种外观和感受,统一了侧滑菜单和样式。在Android原生手机上对DrawerLayout+NavigationView更是使用到了极致,如Gmail,Google Map
关于DrawerLayout和NavigationView的使用介绍博客有很多,这里主要是实现一些使用上的介绍,如让NavigationView在Toolbar下方,不显示Toolbar左侧按钮等。
下面开始看下DrawerLayout的如何使用,首先在build.gradle中引入Design包
compile 'com.android.support:design:24.2.1'
(一)、基本使用
新建一个Activity,这里我们选择使用Android Studio提供的模板,选择NavgationDrawer Activity
QQ截图54.jpg
查看下界面的xml文件
&?xml version="1.0" encoding="utf-8"?&
&android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"&
layout="@layout/app_bar_drawer_layout__one"
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_drawer_layout__one"
app:menu="@menu/activity_drawer_layout__one_drawer"/&
&/android.support.v4.widget.DrawerLayout&
可以看到我们的最外层是DrawerLayout,包含了两个内容:include为显示内容区域,NavigationView为侧边抽屉栏。
NavigationView有两个app属性,分别为app:headerLayout和app:menu,eaderLayout用于显示头部的布局(可选),menu用于建立MenuItem选项的菜单。
headerLayout就是正常的layout布局文件,我们查看下menu.xml
&?xml version="1.0" encoding="utf-8"?&
&menu xmlns:android="/apk/res/android"&
&group android:checkableBehavior="single"&
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import"/&
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery"/&
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow"/&
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools"/&
&item android:title="Communicate"&
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share"/&
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send"/&
menu可以分组,group的android:checkableBehavior属性设置为single可以设置该组为单选
Activity主题必须设置先这两个属性
&style name="AppTheme.NoActionBar"&
&item name="windowActionBar"&false&/item&
&item name="windowNoTitle"&true&/item&
未设置Activity主题会爆出错误信息:
vCaused by: java.lang.IllegalStateException: This Activity
already has an action bar supplied by the window decor.
Do not request Window.FEATURE_SUPPORT_ACTION_BAR
and set windowActionBar to false in your theme to use a Toolbar instead.
设置主题为android:theme="@style/AppTheme.NoActionBar"
最后java代码
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
(二)、监听和关闭NavigationView
NavigationView监听通过navigationView.setNavigationItemSelectedListener(this)方法去监听menu的点击事件
@SuppressWarnings("StatementWithEmptyBody")
public boolean onNavigationItemSelected(MenuItem item)
// Handle navigation view item clicks here.
int id = item.getItemId();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
每次点击一个Menu关闭DrawerLayout,方法为drawer.closeDrawer(GravityCompat.START);
通过onBackPressed方法,当点击返回按钮的时候,如果DrawerLayout是打开状态则关闭
public void onBackPressed()
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
super.onBackPressed();
(三)、NavigationView在Toolbar下方
大多数的APP都是使用NavigationView都是全屏的,当我们想让NavigationView在Toolbar下方的时候应该怎么做呢xml布局如下图,DrawerLayout在Toolbar的下方
&LinearLayout xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:id="@+id/sample_main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark" /&
&android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"&
&FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" &
android:padding="16dp"
android:text="NavigationView在Toolbar下方"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
&/FrameLayout&
&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_drawer_layout_one"
app:menu="@menu/activity_drawer_layout_one_drawer"/&
&/android.support.v4.widget.DrawerLayout&
&/LinearLayout&
NavigationView在Toolbar下方.gif
(四)、Toolbar上不显示Home旋转开关按钮
上图可以看到我们点击Home旋转开关按钮,显示和隐藏了侧滑菜单。那么如果我们想要不通过按钮点击,只能右划拉出菜单需要怎么做呢。我们先看下带Home旋转开关按钮的代码是如何写的:
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
//这是带Home旋转开关按钮
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer,
R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
这个Home旋转开关按钮实际上是通过ActionBarDrawerToggle代码绑定到toolbar上的,ActionBarDrawerToggle是和DrawerLayout搭配使用的,它可以改变android.R.id.home返回图标,监听drawer的显示和隐藏。ActionBarDrawerToggle的syncState()方法会和Toolbar关联,将图标放入到Toolbar上。进入ActionBarDrawerToggle构造器可以看到一个不传Toolbar参数的构造器
public ActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout,
@StringRes int openDrawerContentDescRes,
@StringRes int closeDrawerContentDescRes) {
this(activity, null, drawerLayout, null, openDrawerContentDescRes,
closeDrawerContentDescRes);
那么不带Home旋转开关按钮的代码如下
//这是不带Home旋转开关按钮
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer,
R.string.navigation_drawer_open, R.string.navigation_drawer_close);
当然我们把上面带Home旋转开关按钮的代码删除也是可以的。
Toolbar上不显示Home旋转开关按钮.gif
(五)、不使用NavigationView,使用DrawerLayout+其他布局
APP实际开发中往往不能完全按照Materialdesign的规则来,如网易云音乐的侧滑,底部还有两个按钮。这时候我们可以通过+其他布局来实现特殊的侧滑布局。
我们可以参考鸿杨大神的博客
我们自己实现个简单的,DrawerLayout包裹了一个FrameLayout和一个RelativeLayout,FrameLayout是我们的显示内容区域,RelativeLayout是我们的侧边栏布局。
&android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"&
&FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"&
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="16dp"
android:text="@string/title_activity_drawer_layout_other"/&
&/FrameLayout&
&RelativeLayout
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
android:fitsSystemWindows="true"&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="这是顶部按钮"/&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这是中间的按钮"/&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="这是底部按钮"/&
&/RelativeLayout&
&/android.support.v4.widget.DrawerLayout&
如果需要监听DrawerLayout的侧滑状态监听,那么代码如下:
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
* 也可以使用DrawerListener的子类SimpleDrawerListener,
* 或者是ActionBarDrawerToggle这个子类
mDrawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
效果图如下:
DrawerLayout+其他布局.gif
最后上github地址
Android程序员【图片】NavigationView侧边栏使用教程【aide吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:27,316贴子:
NavigationView 在studio的时候创建非常容易(在start a new Android Studio Paroject 选择activity类型的时候选择NavigationView系统自动生成代码 ),而且用menu文件加载item很好用,但有时候功能真的太&封闭&它所有的方法都给封装好了,又不提供其他接口供使用者调用配置.
个人意见勿喷。 不知道md里有没有。 说实话可能我这并不是最好的办法但是这也是我一步步摸索好久才明白的,发帖是因为我曾百度好久终究没人解释这些详细的内容。
大皇帝页游新区入口,三国SLG战争页游,点击领取礼包,新服送首冲高返利!
NavigationView 侧边栏,他是由多个布局或控件组成的控件主要有三部分:1:DrawerLayout布局,负责部分,监听全屏幕触屏事件。将符合的滑动事件拦截。调出NavigationView[drawer.openDrawer()]2:Toolbar(Actionbar):负责部分,左上角显示打开按钮。点击事件调出NavigationView3:NavigationView:负责部分,显示的布局。以menu的形式NavigationView与drawerLayout和Toolbar没有任何直接关系。但必须与其中一个配合使用。因为NavigationView本身不监听OnTiuchEvent事件也没有OnClickLintener事件当然它的子控件有
studio创建时navigationview位置
NavigationView使用方法: app:headerLayout=&@layout/nav_header_main& 加载一个头布局.你可以自己写一个布局可以不加app:menu=&@menu/activity_main_drawer&(这是重点)加载一个menu菜单文件作为item使用.其中&include导入的是另一个布局主要包含Toolbar&其他无关不讲
顶个,as我都不会用。
menu相信都会用。如果连menu都不会用那学好基础吧。 &group android:checkableBehavior=&single&&组.android:checkableBehavior=&single&表示单选这一组内不能选中多个
如果我们要改变出票事件比如NavigationView和ViewPager同事使用时事件冲突,方法:继承drawerlayout.这里必须重写三个构造方法(好像两个就行)重写覆盖父类的OnTouchEvent事件(父类所写的OnTouchEvent事件将不会调用){这样的话你什么都不做的话NavigationView就没人去打开,如果你想打开就调用父类的onTouchEvent事件吧,或者使用drawer.openDrawer()}重写覆盖父类的onInterceptTouchEvent(作用是否拦截事件。拦截我们直接返回false不拦截的话调用父类方法让父类去处理)我们要定义一个boolean变量并写好get,set方法。供使用者调用。在OnTouchEvent事件中我们就可以根据这个boolean值来判断是什么都不做把事件交给下一个子控件。还是调用父类的方法让父类打开NavigationView
改变toolbar上打开按钮。这里toolbar中没有提供任何方法返回imagebutton供我们使用,因为它是通过ActionBarDrawerToggle来控制的(Google这是想干嘛呢???我找了一个星期!!!).方法:先让ActionBArDrawerToogle和DrawerLayout关联和Toolbar关联ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);通过toggle.setDrawerIndicatorEnabled(false);设置打开按钮是否显示.想要改变他的图片得用toolbar.setNavigationIcon(Drawable);一个在ActionBarDrawerToggle一个在Toolbar我是无语了.
NavigationView的事件监听:通过setOnNavigationItemSelected()来监听。其中的所有选项都是用menuitem
drawerlayout.closeDrawer(GravityCompat.START);通过动画关闭NavigationView到指定位置
你选对了吗?
把布局中的DrawerLayout改成我们的布局MyDrawerLayout这样我们才可以对touch事件进行修改
补充。toolbar的设置。其实我觉得没必要使用Toolbar我们完全可以把左上角安卓机器人按钮弄出来该个图片用toggle.opendraw()打开侧边栏就可以了。
。。有个小瑕疵 这是点击回退建退出或者关闭navigationview事件代码肆意:找到drawerlayout。判断是不是打开状态。是:关闭navigationview不是调用父类的方法。父类会把这个activity。finish调。@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
super.onBackPressed();
}源码里我把 if (drawer.isDrawerOpen(GravityCompat.START))改成 if (drawer.isDrawerOpen(GravityCompat.END))了。导致不能用。看到的可以改回来
来学侧滑栏
厉害可是我什么都不会啊求师傅QQ。明天正好放假我想学习安卓
顶   --来自助手版贴吧客户端
刚刚网上看一个帖子是基于 Drawerlayout里布置Navigation和主界面,效果也不错
直接发源码,出来可以吗?
侧边栏是不是就是抽屉呀
加个滑动时的动画
楼主求私法源码
楼主,Toolbar左上角的AppName和那个图标要怎么改成白色?萌新求教
楼主我想问一下navigationview的headlayout里面的组件怎么实现监听
这个其实不难AS模板上面有挺好
十分感谢楼主的精彩讲解,这个是不是就可以通过像QQ一样的侧滑唤醒navigationview了?楼主有没有这个demo的源码链接可以分享一下。
登录百度帐号推荐应用Android NavigationDrawer 开发详解-实现侧滑效果 - amoscxy的博客 - CSDN博客
Android NavigationDrawer 开发详解-实现侧滑效果
NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来可能很抽象,我们直接来看看 网易云音乐 的侧滑导航栏效果
Google 为了支持这样的导航效果,推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前,需求中需要实现侧滑导航效果时,我们必然会选择去选择一些成熟的第三方开源库(如最有名的 )来完成开发 。效果上,普遍都像 手Q 那样:
在对比过 DrawerLayout 和 SlidingMenu 的实现效果后,基于以下的几点,我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu:
从动画效果上看,你会发现两者仅仅是在移动的效果上有些差别外,其他地方并没有太大的差异
在交互效果上,我认为这两者都差不多的,就算你把 网易云音乐 的效果套到了 手Q 上,也不会影响到用户的交互
DrawerLayout 用起来比 SlidingMenu 更简单,代码量更少(往下看就知道了)
DrawerLayout 是向下兼容的,所以不会存在低版本兼容性问题
Google 亲儿子,没理由不支持啊!!!!!!
初识 DrawerLayout
一般情况下,在 DrawerLayout 布局下只会存在两个子布局,一个 内容布局 和 一个 侧滑菜单布局,这两个布局关键在于 android:layout_gravity 属性的设置。如果你想把其中一个子布局设置成为左侧滑菜单,只需要设置 android:layout_gravity=”start” 即可(也可以是 left,右侧滑则为 end 或 right ),而没有设置的布局则自然成为 内容布局 。那么,使用 DrawerLayout 到底有多简单呢,我们先直接看看下面的布局文件
layout/activity_simple_drawer.xml
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"&
android:id="@+id/simple_navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"&
android:id="@+id/tv_content"
layout="@layout/drawer_content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
layout="@layout/drawer_menu_layout"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start" /&
layout="@layout/drawer_menu_layout"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="end" /&
到此,你在 Activity 里面什么都不用做,就已经完成了下面侧滑效果的实现了。
Google 也为我们提供了 DrawerLayout 很多常用的API,其中包括:打开或关闭侧滑栏、控制侧滑栏的方向、设置滑动时渐变的阴影颜色和监听滑动事件等,效果如下图。
具体详细代码请参加工程中的 SimpleDrawerActivity,此处就不贴代码了。还有一处 DrawerLayout 使用的小细节需要温馨提醒一下,有一次,我手误把 DrawerLayout 的 android:layout_width 设置成 wrap_content,就出现下面的异常了
只需要把 android:layout_width 设置成 match_parent 即可。
在 Google 推出 NavigationDrawer 设计中,NavigationView 和 DrawerLayout 是官方推荐的最佳组合。在使用 NavigationView 前,因为它是在 Material Design 的兼容包中,所以需要先在 build.gradle 中引入
compile 'com.android.support:design:25.3.1'
这里因为我工程配置的 compileSdkVersion 是25 ,所以需要引入 com.android.support:design:25.x.x 的版本。
接下来简单的介绍一下 NavigationView 的使用,我们继续看看几个相关布局文件 layout/activity_simple_navigation_drawer.xml、layout/navigation_drawer_header.xml、menu/navigation_drawer_menu.xml 和 实现效果:
layout/activity_simple_navigation_drawer.xml
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="NavigationDrawerContent" /&
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_drawer_header"
app:menu="@menu/navigation_drawer_menu" /&
layout/navigation_drawer_header.xml
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/color_512da8"&
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:text="HeaderLayout"
android:textColor="@android:color/white"
android:textSize="18sp" /&
menu/navigation_drawer_menu.xml
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"&
android:checkableBehavior="single"&
android:id="@+id/item_green"
android:icon="@mipmap/green"
android:title="Green" /&
android:id="@+id/item_blue"
android:icon="@mipmap/blue"
android:title="Blue" /&
android:id="@+id/item_pink"
android:icon="@mipmap/pink"
android:title="Pink" /&
android:title="SubItems"&
android:id="@+id/subitem_01"
android:icon="@mipmap/ic_launcher"
android:title="SubItem01" /&
android:id="@+id/subitem_02"
android:icon="@mipmap/ic_launcher"
android:title="SubItem02" /&
android:id="@+id/subitem_03"
android:icon="@mipmap/ic_launcher"
android:title="SubItem03" /&
android:title="SubItems"&
android:id="@+id/subitem_04"
android:icon="@mipmap/ic_launcher"
android:title="SubItem04" /&
android:id="@+id/subitem_05"
android:icon="@mipmap/ic_launcher"
android:title="SubItem05" /&
android:id="@+id/subitem_06"
android:icon="@mipmap/ic_launcher"
android:title="SubItem06" /&
最终得到下面的效果
总的来说,NavigationView 比较关键的属性就只有 app:headerLayout 和 app:menu ,它们分别对应效果图中顶部的 紫色区域(layout/navigation_drawer_header.xml) 和 下方的 填充菜单项(menu/navigation_drawer_menu.xml)。其实是用起来也和 DrawerLayout 一样,非常简单。
其实谈到 NavigationView,个人认为它的app:headerLayout 和 app:menu 属性设计并不实用,而且是比较呆板的。最直接的一点是,它的菜单图标
第一次运行代码的时候,把我五颜六色的图标居然跑出来这效果,好在代码中可以调用下面这个API
mNavigationView.setItemIconTintList(null);
还原菜单图标庐山真面目。(着实看不懂 Google 的设计了…)
其次,是关于菜单项中图标大小和文字间距之类的设置,从 Google 的设计文档来看,
NavigationView 基本已经规定设置好了大小距离,留给我们可以改动的空间并不多。如果你想调整一下菜单的布局宽高之类的,基本是不可能的了(即使可能,也估计非常蛋疼)。所以,目前我基本还没见过国内哪个 app 是直接使用了 NavigationView 来做导航(如果有的话,欢迎告知一下)。
先来看看网易云音乐的效果
主要就是一个线性布局的菜单并结合了 Translucent System Bar 的特性,下面就直接看看大致实现的布局文件 :
layout/activity_cloud_music.xml
&?xml version="1.0" encoding="utf-8"?&
&android.support.v4.widget.DrawerLayout xmlns:android="/apk/res/android"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_cd3e3a"&
&LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"&
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="@color/color_cd3e3a"
android:gravity="center"
android:text="网易云音乐"
android:textColor="@android:color/white"
android:textSize="18sp" /&
&LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical"&
&/LinearLayout&
&/LinearLayout&
&LinearLayout
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
android:fitsSystemWindows="true"
android:orientation="vertical"&
&ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/topinfo_ban_bg" /&
&LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_vertical"
android:orientation="horizontal"&
&ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@mipmap/topmenu_icn_msg" /&
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的消息"
android:textColor="@android:color/black"
android:textSize="15sp" /&
&/LinearLayout&
&/LinearLayout&
&/android.support.v4.widget.DrawerLayout&
最终即可实现类似网易云音乐的效果。
彩蛋一:左上角的导航动画效果实现
经常会看有些 app 的左上角有这些带感的导航动画,之前想要引入这种效果,都是来自第三方的开源代码,诸如下面两个比较有名的:
而现在再也不需要了,Google 推出的 ActionBarDrawerToggle 也能实现这样的效果了,具体查看 NavigationDrawerAnimationActivity 中的实现代码
如果你对上面这种动画,效果不满意,也可以考虑一下
的另一种实现效果。
彩蛋二:比 NavigationView 更好的选择
前面提到 NavigationView 的不实用性,如果你真的要实现 NavigationView那样的效果,又渴望比较高的自由度。这个功能强大且自由度很高的开源库
应该是个很不错的选择。
我的热门文章}

我要回帖

更多关于 好看的导航栏样式 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信