Android CoordinatorLayout 实战案例学习《二》
回复1024 随机给你美女壁纸
通过上一篇实战案例,基本上能够掌握CoordinatorLayout和AppBarLayout的初步使用。至此,Android Material Design系列的学习已进行到第六篇,大家可以点击以下链接查看之前的文章:
本文继续以案例的方式学习CoordinatorLayout和AppBarLayout的使用,同时引入Desgin包中的一个新控件:CollapsingToolbarLayout。效果图如下:
可以看到,Toolbar
的标题放大并在下方显示,当我们向上滑动列表时,顶部Header
部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题,直至高度缩为Toolbar
的高度并成为Toolbar
的背景色;向下滑动列表时,Header
部分逐渐显示。这个效果就是利用了CollapsingToolbarLayout
控件,在讲解案例代码前,先来介绍一下CollapsingToolbarLayout
。
CollapsingToolbarLayout
在 CollapsingToolbarLayout 的 Children 布局上,可以按照 FrameLayout 的属性来拍版,因为它本身继承于 FrameLayout :
CollapsingToolbarLayout is a wrapper for Toolbar
which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout
.
从官方对CollapsingToolbarLayout
的介绍上可以看出,CollapsingToolbarLayout 是对 Toolbar 的一个包装,以达到折叠 AppBar 的交互视觉效果。所以,CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar,并且作为 AppBarLayout 的直接子视图使用。
关于CollapsingToolbarLayout
的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:
title
标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。注意,没有设置这个属性时,默认使用Toolbar
的标题;statusBarScrim
顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?attr/colorPrimaryDark"
,即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示,如效果图中所示;contentScrim
内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?attr/colorPrimary"
,即显示为Toolbar颜色,应用的主题色;layout_collapseMode
折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果,比如上述效果图中的图片;pin,固定别针效果,比如上图中的Toolbar;layout_collapseParallaxMultiplier
不折叠视差系数,配合parallax模式使用,取值有点类似alpha(不透明度),在0.0 ~ 1.0之间,默认值为0.5。当设置为1.0,滚动列表时图片不会折叠移动;
案例分析
通过上面的介绍,相信大家对CollapsingToolbarLayout
有了一个初步的认识,我们再来看看如何配合CoordinatorLayout
、AppBarLayout
和Toolbar
来实现案例中的效果,主要在于布局文件:
关于CoordinatorLayout
作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。
作为
AppBarLayout
的直接子控件,CollapsingToolbarLayout
包裹Header部分的ImageView和Toolbar,并分别设置二者的折叠模式。这个例子,我们给
CollapsingToolbarLayout
的layout_scrollFlags
属性值设为:scroll|exitUntilCollapsed
,其中exitUntilCollapsed
表示控件向上折叠退出并以最小高度停留在顶部;前面介绍
CollapsingToolbarLayout
属性时介绍到了statusBarScrim
的使用,其实也可以通过android:fitsSystemWindows
和values-v21
中style样式的statusBarColor和windowDrawsSystemBarBackgrounds属性来完成状态栏的背景色变化,详情参考源码即可;通过
layout_anchor
和layout_anchorGravity
可以控制FloatingActionButton的behavior和位置,如上图所示,当滚动列表是,FAB按钮会随着AppBarLayout而显示和隐藏,并自带缩放动画。
示例源码
我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,Star地址:
https://github.com/Mike-bel/MDStudySamples
公号推荐
专注程序员的编程知识,原创教程,最新动态等。现在是编程的黄金时代,是程序员的ShowTime。我们不是码农,不是屌丝,也不是程序猿,我们是程序员联盟。
热门推文
★ Android Studio 掌握这些调试技巧,Debug能力不能再高啦
★ Android Studio 使用Gradle引入第三方库文件的总结
★ 这「非常7+1」条小贴士,助你Coding水平再提一阶!
阅读原文 查看【简书原文】