Material Design之AppBarLayout总结

CoordinatorLayout

  1. 官方文档

  2. CoordinatorLayout 是一个加强型的FrameLayout.

  3. CoordinatorLayout 主要用于两种场景:

作为activity最外层布局

作为协调一个或多个具有特定交互的子view的父布局

子view之间的特定协调动作，通过app:layout_behavior指定，如，Google内部实现的@string/appbar_scrolling_view_behavior； 亦可以通过自定义实现特定的behavior效果（TODO： 单独作为另外一篇文章）。

<android.support.v4.widget.NestedScrollViewandroid:id="@+id/nest_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior">
复制代码

AppBarLayout

符合material design的加强版的垂直方向的LinearLayout，严重依赖于CoordinatorLayout；内部内置了响应动作，用于定义当某个可滑动的View（如：ScrollView ,ListView ,RecyclerView 等）发生滑动时，其他子view应该如何响应。（app:layout_scrollFlags）

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:title="behaviour"app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout>
复制代码

1.appbarLayout几个方法

  1. addOnOffsetChangedListener 当AppbarLayout 的偏移发生改变的时候回调，也就是子View滑动。

  2. getTotalScrollRange 返回AppbarLayout 所有子View的滑动范围

  3. removeOnOffsetChangedListener 移除监听器

  4. setExpanded (boolean expanded, boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画

  5. setExpanded (boolean expanded) 设置AppbarLayout 是展开状态还是折叠状态,默认有动画

AppBarLayout的ScrollFlg

注:滑动的NestedScrollView，简称 "滑动view"，设置了scorllFlag的子view，简称 "响应view"

1.scorll

app:layout_scrollFlags="scroll"

响应view相当于滑动view 的一部分，一起滑动。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

结合scroll一起使用。当滑动view 向下滑动时，响应view截断滑动view的滑动事件，待响应view自身全部显示完后，再把滑动事件还给滑动view； 当用户向下滑动是scrollView时，关注点不在滑动view本身，此时出现响应view的内容，符合material design设计理念

3.enterAlwaysCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...
复制代码

结合scroll和enterAlways一起使用。可理解为enterAlways的更灵活的版本；可通过android:minHeight="?attr/actionBarSize"设置最小高度，当滑动view 向下滑动时，响应view截断滑动view的滑动事件，待响应view自身最小高度显示完后，再把滑动事件还给滑动view

4.snap

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
...
复制代码

结合scroll一起使用。可理解为"四舍五入"的效果；当停止滑动时，响应view如果已显示了一大部分，则自动弹性滑动显示剩余的部分；若显示的部分很少，则自动收起隐藏

5.exitUntilCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...
复制代码

结合scroll一起使用。可理解为enterAlways的相反的效果；可通过android:minHeight="?attr/actionBarSize"设置最小高度，当滑动view 向上滑动时，响应view截断滑动view的滑动事件，待响应view缩到自身最小高度显示完后，再把滑动事件还给滑动view

CollapsingToolbarLayout

折叠式标题栏，丰富toolbar的效果，必须作为appbarLayout的直接子布局

1.parallax

有视觉效果的滚动：app:layout_collapseMode="parallax"

2.pin

子view固定：app:layout_collapseMode="pin"

    <android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:fitsSystemWindows="true"android:layout_width="match_parent"android:layout_height="250dp"><!--丰富效果的toolbar--><!--app:contentScrim 折叠后的背景色，即toolbar颜色--><!--app:statusBarScrim 折叠后的statusBar背景色，--><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapse_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="@color/colorPrimary"app:expandedTitleGravity="center|bottom"app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"app:collapsedTitleGravity="start"app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"app:layout_scrollFlags="scroll|exitUntilCollapsed"><!--app:layout_collapseMode="parallax" 折叠过程产生一点偏移--><!--android:fitsSystemWindows="true",伸到statusBar，但需要新建style将statusBar颜色改为透明--><!--一直到最外层都需要调用android:fitsSystemWindows="true"--><ImageViewandroid:id="@+id/person_portrait"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:layout_collapseMode="parallax"/><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:title="app"app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>
复制代码

3.设置标题

  1. Java 中设置
//  设置标题CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");复制代码
  1. xml设置 app:title="John"

4.contentScrim

app:contentScrim：当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布，可以通过setContentScrim(Drawable)来设置纱布的图片。（可以时图片也可以是颜色）

5.statusScrim

当CollapsingToolbarLayout滑动到一个确定的阀值时，状态栏显示或隐藏纱布，你可以通过 app:statusBarScrim或者setStatusBarScrim(Drawable)来设置纱布图片。（可以时图片也可以是 颜色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

expandedTitleXXX：设置展开时的文字风格布局； app:collapsedTitleXXX：设置收缩时的文字风格布局

...
app:expandedTitleGravity="center|bottom"
app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
app:collapsedTitleGravity="start"
app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
...
复制代码
<!--折叠时为黑色，靠右-->
<style name="PersonDetail.TitleCollapsedTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#000</item>
</style><!--展开时为白色，居中向下-->
<style name="PersonDetail.TitleExpandTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#eee</item>
</style>
复制代码

参考链接

  1. Material.io
  2. Material Design之 AppbarLayout
  3. CoordinatorLayout的使用如此简单

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/536483.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Git和GitHub快速入门

Git和GitHub快速入门

Git入门 简介 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的分布式版本控制系统。 工具 准备工具 Git下载地址&#xff1a;https://git-scm.com Git配置 配置的内容主要是&#xff1a;用户名和邮箱 git config --global --add user.name <用…
阅读更多...
团队冲刺三

团队冲刺三

昨天我做了什么&#xff1f; 完成了登录的布局文件&#xff0c;建立数据库&#xff0c;建数据表&#xff0c;连接数据库&#xff0c;将信息存储。 遇到了什么问题&#xff1f; 数据库存储功能报错 今天打算做什么&#xff1f; 解决昨天遗留的问题。转载于:https://www.cnblogs.…
阅读更多...
C语言进阶——全局变量

C语言进阶——全局变量

全局变量 定义在函数外面的变量是全局变量 全局变量具有全局的生存期和作用域 它们与任何函数都无关 在任何函数内部都可以使用它们 全局变量初始化 没有做初始化的全局变量会得到0值 指针会得到NULL值 只能用编译时刻已知的值来初始化全局变量 它们的初始化发生在main函数之前…
阅读更多...
为什么我不用ViewPager或RecyclerView来做上下滑切换

为什么我不用ViewPager或RecyclerView来做上下滑切换

上下滑切换翻页大概是这样的效果&#xff1a; 目前网上有诸多如 “仿抖音上下滑...” “仿花椒映客直播...” 之类的技术分享&#xff0c;都有讲述实现上下滑切换页面的方案&#xff0c;其中以 ViewPager 和 RecyclerView SnapHelper 两种方案为多&#xff0c;但是都有明显的缺…
阅读更多...
web项目上之深入理解Java国际化

web项目上之深入理解Java国际化

作者&#xff1a;https://blog.csdn.net/yangbo787827967/article/details/81124439 假设我们正在开发一个支持多国语言的Web应用程序&#xff0c;要求系统能够根据客户端的系统的语言类型返回对应的界面&#xff1a;英文的操作系统返回英文界面&#xff0c;而中文的操作系统则…
阅读更多...
Chrome运行时性能瓶颈分析

Chrome运行时性能瓶颈分析

一&#xff0c;初探&#xff0c;根据现象发现问题 chrome的performance知道很久了&#xff0c;但总是没有特别权威且跟上时代的学习资料&#xff0c;这次痛定思痛&#xff0c;直接看英文文档&#xff0c;一点点把这块啃掉&#xff0c;本笔记基于Chrome 59 step 1: 隐身模式打开…
阅读更多...
vue-router之路由钩子（八）

vue-router之路由钩子（八）

路由钩子&#xff0c;即导航钩子&#xff0c;其实就是路由拦截器&#xff0c;vue-router一共有三类&#xff1a;全局钩子&#xff1a;最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用&#xff0c;代码如下&#xff1a;// 定义路由配置const router new V…
阅读更多...
java第一 ++--

java第一 ++--

大的转换小的自动转换 byte -> short -> int -> long -> float -> double l 自动类型转换 表示范围小的数据类型转换成范围大的数据类型&#xff0c;这种方式称为自动类型转换 自动类型转换格式&#xff1a; 范围大的数据类型 变量 范围小的数据类型值&#xf…
阅读更多...
在加拿大读大学被开除了，以后该怎么办？

在加拿大读大学被开除了，以后该怎么办？

在加拿大读大学被开除了&#xff0c;以后该怎么办&#xff1f; 一天晚上正准备睡觉的时候&#xff0c;手机振动&#xff0c;打开一看&#xff0c;是一条微消息&#xff0c;“在加拿大读大学被开除了&#xff0c;以后该怎么办&#xff1f;”又一个留学生遇到的棘手问题。在国内上…
阅读更多...
GO编程程序员修炼秘籍：十本经典书单

GO编程程序员修炼秘籍：十本经典书单

随着BAT、今日头条、京东、抖音等大型互联网公司对Go语言的大范围应用&#xff0c;带动更多互联网企业采取技术跟随战略&#xff0c;Go语言发展前景一片大好。5月20日工业和信息化部信息中心发布《2018中国区块链产业白皮书》&#xff0c;Go语言与区块链成为“数字中国”建设的…
阅读更多...
AngularJs 冷兵器杂谈

AngularJs 冷兵器杂谈

一、指令 scope.template中的dom属性值可以直接用{{attr}}表达式取到scope中的属性attrlink中attr.$observe可以监听scope属性attr的动态变化需要改变$scope上的属性值时&#xff1a;$scope.$apply(function(){$scope.attr newValue }) 复制代码二、服务 循环依赖&#xff08;…
阅读更多...
02-print的用法

02-print的用法

print的常用&#xff1a; print(hello world!)print(hello,world!) # 逗号自动添加默认的分隔符&#xff1a;空格。print(hello world!) # 加号表示字符拼接。print(hello,world,sep***) # 单词间用***分隔。print(# * 20) # *号表示重复20遍。print(are you sure?, end)…
阅读更多...
单田芳白眉大侠全320回下载

单田芳白眉大侠全320回下载

1、搜索“十方评书网”。 2、要下载那个评书家的选择那个评书家。 3、然后选择自己要下载的下载可以了。 转载于:https://blog.51cto.com/14204019/2392323
阅读更多...
pip模块 redis、xlrd、xlutils、nnlog、requests

pip模块 redis、xlrd、xlutils、nnlog、requests

# import模块的实质&#xff1a;把python文件执行一遍,# 导入模块的顺序&#xff0c;1、从当前模块找&#xff0c;如果当前模块没有&#xff0c;2、就去python环境变量里面找 pip install redispip install xlrd pip install xlutilspip install nnlogpip install requests pip…
阅读更多...
react.js基础

react.js基础

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS&#xff0c;ReactJs的虚拟DOM&#xff08;Virtual DOM&#xff09;和组件化的开发深深的吸引了我&#xff0c;下面来跟我一起领略ReactJs的风采吧~~ 文章有点长&#xff0c;耐心读完&#xff0c;你会有…
阅读更多...
第 11 章 日志管理 - 089 - 初探 ELK

第 11 章 日志管理 - 089 - 初探 ELK

在开源的日志管理方案中&#xff0c;最出名的莫过于 ELK 了。 ELK 是三个软件的合称&#xff1a;Elasticsearch、Logstash、Kibana。 Elasticsearch 一个近乎实时查询的全文搜索引擎。Elasticsearch 的设计目标就是要能够处理和搜索巨量的日志数据。 Logstash 读取原始日志&…
阅读更多...
【转】Kotlin 新版来了，支持跨平台！

【转】Kotlin 新版来了，支持跨平台！

作者&#xff1a;Tamic 原文链接&#xff1a;juejin.im/post/5cd8f9… 谷歌在今年的 I/O 大会上宣布&#xff0c;Kotlin 编程语言现在是 Android 应用程序开发人员的首选语言(谷歌宣布 Kotlin 成为安卓开发首选)。 还有一个好消息, Kotlin 1.3.30 正式发布&#xff0c;做了对ap…
阅读更多...
WebSocket轻松单台服务器5w并发jmeter实测

WebSocket轻松单台服务器5w并发jmeter实测

测试结论 nginx最多只能维持(65535*后端服务器IP个数)条websocket的长连接&#xff0c;如果后端websocket服务器IP只有一个&#xff0c;那么就只能最多支持65535条连接。瓶颈就产生在了nginx上建议采用LVS的DR模式来做负载均衡&#xff0c;这样最大长连接数目就只和websocket服…
阅读更多...
人工智能的历史

人工智能的历史

AI(Artificial Intelligence)即人工智能&#xff0c;最初是在1956 年被提出&#xff0c;人工智能研究如何用计算机去模拟、延伸和扩展人的智能&#xff1b;如何把计算机用得更聪明&#xff1b;如何设计和建造具有高智能水平的计算机应用系统&#xff1b;如何设计和制造更聪明的…
阅读更多...
nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问

nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问

访问vue页面时&#xff0c;/# 使url看着不美观&#xff0c;使用 H5 history模式可以完美解决这个问题&#xff0c;但需要后端nginx帮助。接下来我们自己配置一下。 使用前端路由&#xff0c;但切换新路由时&#xff0c;想要滚动到页面顶部&#xff0c;或者保持原先的滚动位置&a…
阅读更多...
最新文章

Copyright @ 2022~2023