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 ...
随机推荐
- electron+vue制作桌面应用--自定义标题栏
electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...
- Yuchuan_Linux_C编程之六 Makefile项目管理
一.整体大纲 二.makefile的编写 一个规则 两个函数 三个变量 1. 一个规则 三要素:目标, 依赖, 命令 目标:依赖 命令: 第一条规则是用来生成终 ...
- C# 简单地使用下 音频解码器Bass.Net
在C#中有许多音频播放的方案,例如WinForm里调用系统自带MediaPlayer的COM组件和WPF的MediaPlayer(实质上还是WindowsMediaPlayer) 以及一堆API播放和 ...
- markdown简明语法1
目录 Cmd Markdown 简明语法手册 1. 斜体和粗体 2. 分级标题 3. 外链接 4. 无序列表 5. 有序列表 6. 文字引用 7. 行内代码块 8. 代码块 9. 插入图像 Cmd M ...
- java算法--稀疏数组
数据结构必要知识 线性结构 线性结构是最常用的数据结构,数据元素之间存在一对一的线性关系. 线性结构有两种不同的存储结构,即顺序存储结构和链式存储结构.顺序存储的线性表称为顺序表,顺序表中的存储元素是 ...
- django models中字段
AutoField:一个自动递增的整型字段,添加记录时它会自动增长.你通常不需要直接使用这个字段:如果你不指定主键的话,系统会自动添加一个主键字段到你的model.(参阅自动主键字段) Boolean ...
- Oracle 11g rac中关于crsctl stop cluster/crs/has的区别
转载至http://www.oracleplus.net/arch/1203.html,整理后得. 1 通过命令查看cluster/has/crs管理的内容 [root@11rac1 ~]# crsc ...
- Django 图片上传到数据库 并调用显示
环境:Django2.0 Python3.6.4 建立项目,数据库设置,就不说了. 直接上代码: 在models.py中,需要建立模型,这里使用了ImageField字段,用来存储图片路径,这个字段继 ...
- python第一次作业
import turtle turtle.pensize(2) turtle.pencolor("black") turtle.fillcolor("red") ...
- Ansible-免密登录与主机清单Inventory
Ansible的指定用户与密码登录.免密登录.指定ssh端口以及主机清单Inventory配置 在实际使用中并不需要对ansible配置进行修改,或者说只有需要的时候才修改ansible配置. 添加用 ...