CoordinatorLayout 布局的使用方式

作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧?

更多: http://www.wangchenlong.org/

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

coordinate-demo


准备

首先新建HelloWorld项目.

在项目的build.gradle文件中, 引入头像控件库和CardView库, 在本例中会使用.


页面

activity_main.xml中, 保留CoordinatorLayout和AppBarLayout, 重新编写页面.

android:fitsSystemWindows="true" 这句也需要去掉, 本例需要保留最上面的状态栏(status bar), 这个属性会导致重叠, 默认false.

activity_main.xml代码

修改主题颜色, 粉色符合风格

在AppBarLayout中, 添加CollapsingToolbarLayout控件, CollapsingToolbar会滚动消失, 被ToolBar替换, 实现滚动动画.

app:layout_scrollFlags的属性, scroll滑动, exitUntilCollapsed退出到最小, snap自动滑动动画, 定义CollapsingToolbarLayout的滑动属性.

CollapsingToolbarLayout划分两部分, 一部分大图, 一部分文字.

app:layout_collapseMode="parallax"折叠时的视差效果, 自动滑动.

效果

coordinate-img-1

添加NestedScrollView, 文字的滚动视图.

app:behavior_overlapTop="30dp", The amount that the scrolling view should overlap the bottom of any AppBarLayout. 使ScrollView压在AppBarLayout上面一段长度.

添加ToolBar, 滚动结束的效果图.

ToolBar是工具栏, 滑动完成时, 在最上部显示. Space预留头像的位置.

圆形头像CircleImageView显示(使用第三方库)

头像控件的滑动行为是自定义的类, 具体行为参考注释. 判断起始和终止位置, child和dependency视图联动, 这里是图像视图和Toolbar联动.

添加需要使用的id, activity_main.xml如下

效果

coordinate-img-2


逻辑

在onCreate里面设置滑动逻辑, 设置两个动画: 监听AppBar的滑动, 处理Toolbar和Title的显示; 自动滑动效果.

根据滑动百分比, 设置Title和Toolbar的显示与消失, 使用Alpha动画.

自动滑动动画, 当到一定比例时展开或关闭.

最终逻辑


这样联动效果就已经显示出来了, 在AppBar中Toolbar和Title之间的关系, 符合Material的风格, 给用户更多的体验. 既然已经集成到HelloWorld中, 说明Android是极力推荐使用CoordinatorLayout这种风格的.

OK, that’s all! Enjot it!

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

2 3 收藏 评论

关于作者:Spike

硕士毕业, 任职于春雨移动健康, 从事移动端架构工作. 做了六年技术研发, 还会一直坚持下去. 分享一些自己的开发经验. 个人主页 · 我的文章 · 6 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部