AppBar 布局的使用方式

AppBar作为Android5.0的重要动画效果, 非常绚丽的UI, 通过内容驱动, 可以减少页面的访问, 更加便捷的传递主题思想. 那么我们看看如何使用.

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

本文源码的GitHub下载地址

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

appbar-demo


配置

创建一个Navigation Drawer的工程, 修改主题颜色.

修改抽屉的渐变颜色side_nav_bar.xml


ViewPager

修改app_bar_main.xml, 在CoordinatorLayout中添加ViewPager.

设置ViewPager的Fragment内容

设置ViewPager的适配器

在MainActivity中添加ViewPager逻辑


AppBarLayout

修改AppBarLayout, 添加CollapsingToolbarLayout.

删除Toolbar的background颜色, 避免Toolbar挡住图片;
AppBarLayout设置fitsSystemWindows覆盖StatusBar背景;
CollapsingToolbarLayout包含图片和Toolbar.


TabLayout

在AppBarLayout中, 添加TabLayout

TabLayout添加layout_scrollFlags确保滑动.

把ViewPager加入TabLayout

基本功能已经完成, 再添加随着页面切换AppBarLayout的图片视图.


渐变效果

在图片视图中, 再添加一层图片, 模拟渐变动画.

修改Adapter, 为每个页面添加一个图片

两个图像页面的渐变动画

注释已经写的很详细了, 注意的是向前向后滑动, position的值不同. 向前滑动, position的值是当前值减一; 向后滑动, position的值不变. 也就是说, position总是较小值. 偏移量, 向后滑动时, 从0至1; 向前滑动时, 从1至0.

ViewPager的监听, 使用动画效果

详细内容参见注释

ViewPager添加滚动监听.


页面滚动

在ViewPager上, 嵌套NestedScrollView.

android:fillViewport允许ScrollView内的组件填充, 否则ViewPager显示.

设置标题, MainActivity.

动画效果


偏移滚动

额, 与其说是AppBar, 不如说是ViewPager, 再添加一些动画效果, 和修复Bug.
把图片的左右10%, 隐藏起来, 滑动时, 一边渐变一边侧移.
app_bar_main中, 替换FrameLayoutPercentFrameLayout, 宽度设置为120%.

修改滑动动画(Image), 在向前向后滑动时, setTranslationXX轴平移.

修复滚动Bug, 连续滚动时, 及时更新当前图片, 否则图片异常.

全部功能都已经完成了. AppBar的知识就这些了.

OK, that’s all! Enjoy it!

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

打赏作者

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

1 1 收藏 评论

关于作者:Spike

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

可能感兴趣的话题



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