Material Design之AppBarLayout总结
CoordinatorLayout
官方文档
CoordinatorLayout 是一个加强型的FrameLayout.
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几个方法
addOnOffsetChangedListener
当AppbarLayout 的偏移发生改变的时候回调,也就是子View滑动。getTotalScrollRange
返回AppbarLayout 所有子View的滑动范围removeOnOffsetChangedListener
移除监听器setExpanded (boolean expanded, boolean animate)
设置AppbarLayout 是展开状态还是折叠状态,animate 参数控制切换到新的状态时是否需要动画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.设置标题
- Java 中设置
// 设置标题CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");复制代码
- 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>
复制代码
参考链接
- Material.io
- Material Design之 AppbarLayout
- CoordinatorLayout的使用如此简单
Material Design之AppBarLayout总结相关推荐
- android5.0后新特性修改标题头,Android5.0中Material Design的新特性
Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出 ...
- Material Design 组件之 CollapsingToolbarLayout
CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏,一般作为 AppBarLayout 的子 View 来使用,下面总结一下 CollapsingToolbarLayout ...
- 说说 Android 的 Material Design 设计(四)——卡片式布局
我们使用 CardView 与 RecyclerView 来·实现一个各种猫的卡片式展示列表吧O(∩_∩)O~ 1 CardView 控件 1.1 引入依赖库 打开 app/build.gradle, ...
- 『Material Design 入门学习笔记』前言
写在最前面的话 最开始我在毕业的时候做Android,当时还没到Android5.0,没有Material Design,当时的设计都是以立体仿3d效果为主.后来有了扁平化设计,我却开始了SDK各种功 ...
- Material Design组件之NavigationView
原文首发于微信公众号:jzman-blog,欢迎关注交流! Material Design 系列文章: Material Design组件之FloatingActionButton Material ...
- Material Design控件使用
本文整合前面四篇的控件,再结合豆瓣读书的API,做了一个搜索书籍和查看书籍信息的Demo. 先上效果图: ##项目依赖库 dependencies {compile fileTree(dir: 'li ...
- Material Design学习总结
Material Design Snackbar TextlnputLayout TabLayout NavigationView CoordinatorLayout Snackbar Snackba ...
- Android Material Design简单使用 http://www.cnblogs.com/android-blogs/p/5632103.html
Android Material Design简单使用 吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照 ...
- 头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, 仅仅只有存粹的阅读, 不断完善中, 采用 MVP + RxJa
Toutiao 项目地址:iMeiji/Toutiao 简介:头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, ...
最新文章
- MySQL5.7 支持一个表有多个INSERT/DELETE/UPDATE触发器
- APP中的悬浮球设计总结
- 大工20春计算机原理在线作业二,大工20春《计算机原理》在线作业【答案满分】...
- ubuntu每次启动都出现检测到错误
- 控制游戏中物体的移动速度
- 注册窗口类 registerclass
- 如果有人问你什么是大数据?不妨说说这10个典型的大数据案例
- mcq 队列_MCQ | 软件工程基础知识/简介(1)
- 调用支付jsapl缺少参数:totalfee openid无法取得_微信支付的软件架构,牛逼!
- Facebook 为安卓用户推出精简版 Messenger Lite,率先面向发展中国家
- 过滤器为JSP文件生成静态页面
- UCOS操作系统——消息传递(十二)
- 串口服务器通讯协议,串口服务器的组成和应用实例
- 应用数学软件测试题,数学与应用数学专业试题.doc
- android7.0 投屏,流水断崖安卓投屏
- matlab gpa排名,GPA如何决定申请排名多少的大学?(附TOP100大学要求)
- HTML网页拓展名有哪些,网页文件的扩展名有哪些
- 小火狐进化_口袋妖怪xy 三主进化的详细解析说明
- 高精度文字识别工具,图片转文字工具免费版,ocr
- 四位共阳极数码管显示函数_单片机利用四位共阳极得数码管显示2016
热门文章
- java gc堆中的分区_jvm内存各个区域详解
- 怎么把html表复制到word里,怎么把网页表格复制到word
- java sql2008的增删改查_SQL server数据库增删改查练习
- 如何在php中插入数据并修改,php怎么同时向2张表里插入数据
- 2019年12月计算机统考答案,2019年12月计算机等级WPS考前冲刺练习题及答案
- oracle计算1到一百偶数的和,Perl 打印在1..100内所有偶数和奇数
- 使用python下载文件的简单示例_Python
- 19年的华为手机还能搭载鸿蒙吗,2019年华为手机出货或超2.15亿部 鸿蒙系统最快10月首秀...
- Oracle导入dmp文件报12504,ORA-12504:TNS :监听程序在 CONNECT_DATA 中未获得SERVICE_NAME...
- 服务器本地文件,云服务器 本地文件