Material Design 组件之 AppBarLayout
AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势。
AppBarLayout 一般直接用作 CoordinatorLayout 的直接子对象,如果 AppBarLayout 在别的布局中使用,其大部分功能会失效,AppBarLayout 需要一个标示才能够知道滚动视图什么时候滚动,这个标示过程是通过绑定 AppBarLayout.ScrollingViewBehavior 类完成的,这意味着应该将滚动视图的行为设置为 AppBarLayout.ScrollingViewBehavior的一个实例,这里设置包含完整类名的字符串资源,具体如下:
//设置layout_behavior属性
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
AppBarLayout 的子 View 应该设置一个可供滚动的 behavior,可以通过代码和 xml 属性设置,具体如下:
//代码
setScrollFlags(int)
//xml attribute
app:layout_scrollFlags
layout_scrollFlags 属性主要是指定 AppBarLayout 子 View 当滑动手势变化时,AppBarLayout 的子 View 执行什么动作,layout_scrollFlags 属性有 5 个值,分别是:
1. scroll
2. enterAlways
3. enterAlwaysCollapsed
4. exitUntilCollapsed
5. snap
在介绍这几个属性值之前,这些属性值的效果将以下面布局效果为例,布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.manu.materialdesignsamples.samples.SampleCoordinatorAppBarActivity">
<!--AppBarLayout——>子View设置layout_scrollFlags属性-->
<android.support.design.widget.AppBarLayout
android:id="@+id/ablBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!--NestedScrollView——>设置layout_behavior属性-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvAppBarData"
android:clipToPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
scroll: 当设置 layout_scrollFlags 的属性为如下时:
app:layout_scrollFlags="scroll"
此时,上滑时先隐藏 AppBarLayout,然后再开始滚动,下滑时直到滚动视图的顶部出现 AppBarLayout 才开始显示,效果如下:

enterAlways: enterAlways 必须配合 scroll 来使用,当设置 layout_scrollFlags 属性为如下时:
app:layout_scrollFlags="scroll|enterAlways"
此时,上滑时先隐藏AppBarLayout,然后再开始滚动,下滑时先显示AppBarLayout,然后再开始滚动,效果如下:

enterAlwaysCollapsed: 使用 enterAlwaysCollapsed 属性值时,必须配合 scroll 和 enterAlways 来使用,此外还需设置 AppBarLayout 的子 View (这里是 Toolbar)一个最小高度 来提供 enterAlwaysCollapsed 的功能支持,当设置 layout_scrollFlags 的属性为如下时:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
此时,上滑时先隐藏AppBarLayout,然后再开始滚动,下滑时 AppBarLayout 先显示子 View 最小高度,然后直到滚动视图的顶部出现 AppBarLayout 全部显示,效果如下:

exitUntilCollapsed: 使用 exitUntilCollapsed 属性值时,必须配合 scroll 来使用,此外还需设置 AppBarLayout 的子 View (这里是 Toolbar)一个最小高度 来提供 exitUntilCollapsed 的功能支持,当设置 layout_scrollFlags 的属性为如下时:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
此时,上滑时先隐藏 AppBarLayout 至最小高度,然后再开始滚动,下滑时直到滚动视图的顶部出现 AppBarLayout 才开始显示,效果如下:

snap: 使用 snap 属性值时,必须配合 scroll 来使用,主要作用是在滚动结束时,如果伸缩的视图只是部分可见,那么它将自动滚动到最近的边缘,当设置 layout_scrollFlags 属性为如下时:
app:layout_scrollFlags="scroll|snap"
此时,伸缩的视图(这里是 Toolbar)如果部分可见,那么伸缩的视图将自动滚动到最近的边缘,即要么隐藏、要么显示,效果如下:

关于 layout_scrollFlags 属性就介绍完了,当然上面只是为了说明属性值的效果,还可以结合 CollapsingToolbarLayout 等其他 Material Design 实现酷炫的效果,上面是在布局文件对 layout_scrollFlags 属性的设置,顺便说一下如何在代码中设置 layout_scrollFlags 呢,具体如下:
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) appBarLayout
.getChildAt(0).getLayoutParams();
//上滑时先隐藏AppBarLayout,然后再开始滚动,下滑时先显示AppBarLayout,然后再开始滚动
params.setScrollFlags(
AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL |
AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
//...
AppBarLayout 的使用及其重要属性已经介绍完了,实际开发中肯定要复杂的多,希望上面的内容能够对你有所帮助。可以选择关注个人微信公众号:jzman-blog 获取最新更新,一起交流学习!

Material Design 组件之 AppBarLayout的更多相关文章
- Material Design 组件之 CollapsingToolbarLayout
CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏,一般作为 AppBarLayout 的子 View 来使用,下面总结一下 CollapsingToolbarLayout ...
- Material Design 组件之NavigationView
今天来看一下 NavigationView 的使用,NavigationView 是一个标准的导航菜单,其菜单内容由菜单资源文件来填充,NavigationView 一般和 DrawerLayout ...
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout 该控件也是De ...
- Material Design 组件之 FloatingActionButton
Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,力求平滑 ...
- Material Design with the Android Design Support Library
Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...
- Jquery之家5个顶级Material Design框架
谷歌Material Design在如今的前端页面设计中非常流行.Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案. Material Design是如此的简洁美 ...
- Top 15 - Material Design框架和类库(译)
_Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...
- Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
随机推荐
- 前端每日实战:48# 视频演示如何用纯 CSS 创作一盘传统蚊香
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVpvMz 可交互视频教程 此视频 ...
- proxyTable的配置
在dev环境下面: proxyTable: { '/api': { target: 'http://api.douban.com/v2', //主域名,以前我都写192.168.2.57:80,这里跨 ...
- flask之三:视图高级
视图高级 app.route和app.add_url_rule app.add_url_rule app.add_url_rule('/list/',endpoint='myweb',view_fun ...
- 怎么用一行HTML代码搭建一个谷歌镜像?
<iframe src="google.com"></iframe>
- 有关js的date的相关知识
最近做项目,用了new Date().getTime()获取本地时间,但是如果用户篡改了手机时间,程序漏洞明显暴露.所以如果为保证程序的稳健安全性,应该是要使用网络时间的,也就是服务器时间.原理就是使 ...
- seo搜索优化教程14-seo搜索优化实战
为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉信息科技强势推出seo搜索优化教程.此为seo教程第14课 根据前面学习的seo搜索优化内容,星辉科技进行总结性的分析,形成一份标准的se ...
- Python编程 从入门到实践-3列表下
笔记出处(学习UP主视频记录) https://www.bilibili.com/video/av35698354?p=5 3.2.3 从列表中删除元素-使用del语句删除元素 motorcycles ...
- 一致性hash算法之php实现
源码地址:https://github.com/killallspree/myFrame/blob/master/framework/components/Flexihash.php
- Fabric 源码学习:如何实现批量管理远程服务器?
前不久,我写了一篇<Fabric教程>,简单来说,它是一个用 Python 开发的轻量级的远程系统管理工具,在远程登录服务器.执行 Shell 命令.批量管理服务器.远程部署等场景中,十分 ...
- ggplot2(10) 减少重复性工作
10.1 简介 灵活性和鲁棒性的敌人是:重复! 10.2 迭代 last_plot()用于获取最后一次绘制或修改的图形. 10.3 绘图模板 gradient_rb <- scale_colou ...