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的更多相关文章

  1. Material Design 组件之 CollapsingToolbarLayout

    CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏,一般作为 AppBarLayout 的子 View 来使用,下面总结一下 CollapsingToolbarLayout ...

  2. Material Design 组件之NavigationView

    今天来看一下 NavigationView 的使用,NavigationView 是一个标准的导航菜单,其菜单内容由菜单资源文件来填充,NavigationView 一般和 DrawerLayout ...

  3. Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

    ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  该控件也是De ...

  4. Material Design 组件之 FloatingActionButton

    Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,力求平滑 ...

  5. Material Design with the Android Design Support Library

    Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...

  6. Jquery之家5个顶级Material Design框架

    谷歌Material Design在如今的前端页面设计中非常流行.Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案. Material Design是如此的简洁美 ...

  7. Top 15 - Material Design框架和类库(译)

    _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...

  8. Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...

  9. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

随机推荐

  1. 基于Vue的机器学习平台前端

    项目演示地址:http://vidanao.com/ml>注意1:前端兼容性不太好,360浏览器比较兼容; >注意2:此vidanao.com也是我的个人博文主页,但目前还没部署 源码地址 ...

  2. Yuchuan_Linux_C编程之六 Makefile项目管理

    一.整体大纲 二.makefile的编写 一个规则   两个函数  三个变量 1. 一个规则 三要素:目标, 依赖, 命令    目标:依赖    命令:            第一条规则是用来生成终 ...

  3. iOS开发 - 设立UIButton的Image为Aspect Fit

    Button setImage设置的图片默认是会拉伸缩放的,如果我想要Aspect Fit的效果,要如何做呢?一开始我想到了用contentMode属性,很可惜不起作用.后来我发现button有一个i ...

  4. PHP mysql事务问题实例分析

    本文实例分析了PHP的mysql事务问题.分享给大家供大家参考,具体如下: 对于myisam数据库,可以控制事务的进行: $mysqlrl = mysql_connect ( $db_config [ ...

  5. C#桌面开发的未来-WebWindow

    WebWindow源码作者博客基于Chromium的Edge体验体验方式一:体验方式二:预期目标:遗留的问题 WebWindow WebWindow是跨平台的库. Web Window的当前实验实现可 ...

  6. 使用 ALSAlib 播放 wav

    在 ARM 2440 开发板上正常播放 16bit  44100 采样率的wav , 为了程序简单,没有判断返回值. 补充,在 ubunto 上也能正常播放. 编译方法: arm-linux-gcc ...

  7. 实现Sobel算子滤波、Robers算子滤波、Laplace算子滤波

    前几天,老师布置了这样一个任务,读取图片并显示,反色后进行显示:进行Sobel算子滤波,然后反色,进行显示:进行Robers算子滤波,然后反色,进行显示.我最后加上了Laplace算子滤波,进行了比较 ...

  8. Angular介绍

    Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...

  9. [BUG]document.body.scrollTop=0不生效(回到顶部)

    描述 让body回滚到最顶部,设置 document.body.scrollTop = 0; . 微信内,安卓设备可以,ios设备不可以.   原因 MDN中 scrollTop是这样定义的 一个元素 ...

  10. react 脚手架装后 运行eject报错 的 正确运行方式

    git init git add . git commit -m 'init' npm run eject 或者 cnpm run eject