CoordinatorLayout+AppBarLayout 提供最佳浏览体验
博主声明:
转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主 威威喵 原创,请多支持与指教。
本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/smile_running
感受 Material Design UI 魅力,你不能错过的 Material Design 全系列文章:
Material Design 之一 BottomNavigationView + ViewPager + Fragment 仿微信底部导航效果
Material Design 之二 Toolbar + DrawerLayout + NavigationView 实现QQ侧拉抽屉效果
Material Design 之三 TabLayout + ViewPager + Fragment 今日头条标题切换效果
Material Design 之四 SwipeRefreshLayout + CardView + RecyclerView 精美瀑布流效果
Material Design 之五 CoordinatorLayout + AppBarLayout 提供最佳浏览体验
Material Design 之六 CollapsingToolbarLayout + FloatingActionButton 打造精美详情界面
Material Design 之七 TextInputLayout+TextInputEditText 打造精美的登录界面
由于我们在 RecyclerView 上滑的时候,通常我们都是往下去浏览下一条数据的,我们在浏览信息的时候当然是希望屏幕越大越好了,可是屏幕大小的更改,这就无能为力了,除了换手机也没啥好办法。除了屏幕大小以外,我们的应用内也希望得到最大的屏幕空间让我们去浏览信息,这就能够较大的提升阅读体验。
为了引出这样的情境,我们有这样的一个例子,一个主标题栏 toolbar 下面分别有三个小标题分类,而标题下面是三个 RecyclerView 用于显示信息,这三个小标题使用的是 TabLayout 实现的,为了提高屏幕的利用率,提供最佳的阅读效果,我们希望把这个 TabLayout 给隐藏掉,但又不能一直隐藏,我还需要继续使用,看一下这个情境:
根据上面这个例子,我现在需要这样做。
我往手指下滑动时,代表我在浏览更多信息,这时候上面的三个分类栏要把它隐藏掉,而当我手机往上滑动时,可能是浏览完了或者要切换其他 tab 页面,这时候我再把三个分类栏显示出来。就是要做到用时出现、没用时隐藏的功能。
不清楚?没关系,我们来看看要实现的效果动态图就好了,先看效果如何,再进行实现。
我描述的不清楚没有任何关系,看上面那个效果图不久一目了然了。好吧,怎么实现这种效果呢,可能要我们自定义那有难度,可是 design 包下面给我们提供了两个控件,CoordinatorLayout 和 AppBarLayout,简简单单就可以实现这样的效果了,赶紧来试一试吧。本篇代码基于上一篇:SwipeRefreshLayout+CardView+RecyclerView 精美瀑布流效果
首先,来介绍一下 CoordinatorLayout 这个控件,它是一个加强的 FrameLayout,在它的包裹下,所有的滚动事件它都可以监听到,并且会根据我们设定的属性,做出相应的处理,使界面更加炫酷吧。
另一个是 AppBarLayout 控件,它必须作为 CoordinatorLayout 里面出现,也就是要被隐藏和出现的那部分视图,执行相应的行为。
既然它都搞成这么简单了,必定是要按照它的规定来布局的,乱搞的话,它就不起作用了。下面,我们通过一个简单的 View 分层图,马上就学会怎么使用了。
还有注意一点,那个可滑动的 View 不能是 ListView,ScrollView 这种旧包下的控件,否则也是不起作用的。之前有一次,我是使用的 ListView,结果没有任何效果。
来看一下这个案例的布局,它的头部是一个 TabLayout,下面是一个 ViewPager 存放三个 RecyclerView,也就是说只要 CoordinatorLayout 的子 View 中有 RecyclerView 即可,不管它外部是不是有 ViewPager 包裹着。
最后来看一下我们的布局文件的代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="56dp"android:background="#fcfcfc"app:layout_scrollFlags="scroll|enterAlways|snap"app:tabIndicatorColor="#ccccff"app:tabSelectedTextColor="#9966cc"app:tabTextColor="#a2c699" /></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid:id="@+id/one_view_pager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/tab_layout"app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout></RelativeLayout>
把这个代码对照着我画的那张图,你一看就明白了,ViewPager 就相当于那个黑色框框包裹了 RecyclerView,而 AppBarLayout 里面包裹的就是 TabLayout,我们要它执行行为的 View。
那它到底是怎么控制的呢,可以发现代码中的 ViewPager 下有这样的一个属性:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这个属性的意思是:放置在可以滚动行为的 View 上,这样的话 CoordinatorLayout 就可以对其进行滚动行为监听,然后根据监听到的一些事件反馈给 AppBarLayout,所以就解释了 AppBarLayout 存在的必要性。
再看 TabLayout 下有这样一个属性:
app:layout_scrollFlags="scroll|enterAlways|snap"
当 CoordinatorLayout 监听到 ViewPager 内部存在滚动行为的 View 时,也就是 RecyclerView,AppBarLayout 就会根据 layout_scrollFlags 执行相应的行为。上面代码中,我们写了三个行为:scroll、enterAlways、snap
下面来解释一下这几个的意思。
- scroll 表示:RecyclerView 往下滚时,我们在看更多信息,这时 AppBarLayout 会隐藏。
- enterAlways 表示: 与 scroll 相反,向上滚时它就出现了。
- snap 表示: 有时候我们会滚动到一半,就是 AppBarLayout 出现或隐藏一半状态,写上 snap 就会自动帮你隐藏或者出现。
描述不清楚!好吧,就是这个样子的,自己看吧。
那么至此,我们又学习了 Material Design 库下的两个比较炫酷的 View,接下来,在下篇文章中,我们再学习几个更炫酷的 View,然后把整个 Material Design 库常用 view 综合一下。
CoordinatorLayout+AppBarLayout 提供最佳浏览体验相关推荐
- Meterial Design最佳体验(1): 使用Toolbar, CoordinatorLayout, AppBarLayout等实现精美标题栏
Meterial Design最佳体验(1): 使用Toolbar, CoordinatorLayout, AppBarLayout等实现精美标题栏 作 ...
- coordinatorlayout_一篇文章学会Coordinatorlayout+AppbarLayout
点击上方蓝字关注 ?? 来源: 奔跑吧李博 https://www.jianshu.com/p/cd93da2b7a24 前言 现如今,折叠式布局在App中相当常见,给人一种科技感,充满良好的用户体 ...
- 书签 自动更新浏览器的书签_最有用的书签,可增强您的浏览体验
书签 自动更新浏览器的书签 Bookmarklets are JavaScript links you can place on your browser's toolbar that add one ...
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果
最近由于公司业务需求的增加,产品部门给了一个新功能 类似于掌上英雄联盟的效果,但是实际功能比掌上英雄联盟要多,可以看一下掌上英雄联盟的效果.效果图如下: 我们产品的功能需求是,当向上滑动的时候名称呈渐 ...
- 斯图飞腾Stratifyd荣获WRE“最佳零售体验洞察解决方案奖”
2021年6月8日,Stratifyd亮相由WRE World Retail Elite主办的第七届零售数字化转型峰会,与400+与会的零售消费品行业高层共商零售业数字化转型发展之道,探索新消费时代的 ...
- BCH将拥有远超过BTC的“最佳货币”体验
BCH靠着BTC拥堵注入的天然流量,再加上BCH理性务实的发展路线,主链侧链分层分离的技术架构,可以预期BCH将得到很好地发展,不管是想要交易的用户,想要跑智能合约的用户,都能满足需求而不会像B ...
- android 上滑隐藏view,Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
- Android之解决CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+RecyclerView里面再嵌套RecyclerView滑动颤抖问题
1 问题 主页面用的是这种结构 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+RecyclerView(里面再嵌套RecyclerVie ...
- 【贪心】最佳浏览路线问题
最佳浏览路线问题最佳浏览路线问题最佳浏览路线问题 题目描述 某旅游区的街道成网格状(见图),其中东西向的街道都是旅游街,南北向的街道都是林荫道.由于游客众多,旅游街被规定为单行道.游客在旅游街上只能从 ...
最新文章
- 如何平稳入门并掌握inux系统?
- 如何解决java.lang.NoClassDefFoundError:Java 9中的javax / xml / bind / JAXBException
- 单例模式可以分为懒汉式和饿汉式: 懒汉式单例模式:在类加载时不初始化。 饿汉式单例模式:在类加载时就完成了初始化,所以类加载比较慢,但获取对象的速度快。
- XCTF-Reverse:game(涉及异或脚本编写)
- ORA-04031错误导致宕机案例分析
- IDEA设置注释颜色
- shell在一个大文件找出想要的一段字符串操作技巧
- 大学计算机专业高考听力,高考英语听力测试对考生听力策略反拨作用的研究
- 《TCP/IP详解》学习笔记(三):IP协议、ARP协议
- 中兴高调秀Axon 10 Pro 5G版20倍变焦样张:号称媲美万元广角镜头
- 大数据教程(2.2):Linux系统安装JDK1.7
- sysstat工具的用法
- Bailian2695 最大商【最值】
- 查找算法之五 分块查找(C++版本)
- 《SQL必知必会》笔记
- Navicat Premium 12.0.29 / 12.1.5.0注册机激活
- MT7628学习笔记(13)——ipk软件包编写与应用
- 乐观锁实现之CAS算法分析
- WIN7中如何卸载IE8或IE9
- COGS2434 暗之链锁