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. 前端每日实战:48# 视频演示如何用纯 CSS 创作一盘传统蚊香

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVpvMz 可交互视频教程 此视频 ...

  2. proxyTable的配置

    在dev环境下面: proxyTable: { '/api': { target: 'http://api.douban.com/v2', //主域名,以前我都写192.168.2.57:80,这里跨 ...

  3. flask之三:视图高级

    视图高级 app.route和app.add_url_rule app.add_url_rule app.add_url_rule('/list/',endpoint='myweb',view_fun ...

  4. 怎么用一行HTML代码搭建一个谷歌镜像?

    <iframe src="google.com"></iframe>

  5. 有关js的date的相关知识

    最近做项目,用了new Date().getTime()获取本地时间,但是如果用户篡改了手机时间,程序漏洞明显暴露.所以如果为保证程序的稳健安全性,应该是要使用网络时间的,也就是服务器时间.原理就是使 ...

  6. seo搜索优化教程14-seo搜索优化实战

    为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉信息科技强势推出seo搜索优化教程.此为seo教程第14课 根据前面学习的seo搜索优化内容,星辉科技进行总结性的分析,形成一份标准的se ...

  7. Python编程 从入门到实践-3列表下

    笔记出处(学习UP主视频记录) https://www.bilibili.com/video/av35698354?p=5 3.2.3 从列表中删除元素-使用del语句删除元素 motorcycles ...

  8. 一致性hash算法之php实现

    源码地址:https://github.com/killallspree/myFrame/blob/master/framework/components/Flexihash.php

  9. Fabric 源码学习:如何实现批量管理远程服务器?

    前不久,我写了一篇<Fabric教程>,简单来说,它是一个用 Python 开发的轻量级的远程系统管理工具,在远程登录服务器.执行 Shell 命令.批量管理服务器.远程部署等场景中,十分 ...

  10. ggplot2(10) 减少重复性工作

    10.1 简介 灵活性和鲁棒性的敌人是:重复! 10.2 迭代 last_plot()用于获取最后一次绘制或修改的图形. 10.3 绘图模板 gradient_rb <- scale_colou ...