coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了 +Android 详细分析AppBarLayout的五种ScrollFlags

本文主要是介绍coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了 +Android 详细分析AppBarLayout的五种ScrollFlags,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了

 

了解相关更多技术,可参考《沉浸式状态栏+ScrollView顶部伸缩+ActionBar渐变》,最近在用coordinatorLayout做一些特效,发现网上有好多人已经走完了坑,借此我们来总结一把。

一言不合就上个图,还是动态的 

这里写图片描述

主要是找了半天,好多人说的都不够详细,而且有好多注意事项没有说明,所以走了好多弯路,这个地方就是解决那些关键疑问的,这些疑问清楚了才能真正掌握它的用法

代码示例(activity的xml代码,只需要xml配置就可实现上面这么炫酷的效果了,是不是超赞呢,后面有分析哦):

    <?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="170dp"app:contentScrim="@color/colorAccent"app:expandedTitleMarginBottom="100dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:title="我是collapsebar的标题"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="第一个固定(pin)"android:textSize="40sp"app:layout_collapseMode="pin" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:text="不设置,跟随滑动"android:textSize="40sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:text="视察效果(parallax)"android:textSize="40sp"app:layout_collapseMode="parallax" /><android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="30dp"android:layout_gravity="top"android:background="#600f"app:layout_collapseMode="pin"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我是toolbar" /></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="appbar之内,collap之外"android:textColor="#0f0" /></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:id="@+id/n_scroll_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="哈"android:textColor="#0f0"android:textSize="200sp" /></LinearLayout></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

 

代码分析:

使用注意事项:

1. CoordinatorLayout继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上,但跟behavior属性也有很大关系,的app:layout_behavior属性,只有CoordinatorLayout的直接子布局才能响应,所以不要做徒劳无功的事

2. CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout结合起来才能产生这么神奇的效果,不要想当然的光拿着CoordinatorLayout就要玩出来(刚接触的时候我也有这种想法),累死你

3. AppBarLayout:继承自lineLayout,使用时其他属性随lineLayou,已经响应了CoordinatorLayout的layout_behavior属性,所以他能搞出那么多特效来

4. AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags

  • 1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局 
  • 2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩 
  • 3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来 
  • 4.如果不设置改属性,则改布局不能滑动

5. CollapsingToolbarLayout,字面意思是折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠 继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下:

  • 1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开 
  • 2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果) 
  • 3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

6. toobar最好是放在CollapsingToolbarLayout,也不是没有其他用法,但是在这套系统中一般只能放在CollapsingToolbarLayout里面,才能达到好的效果,这里toolbar同时设置layout_gravity和app:layout_collapseMode时有一些比较复杂的情况.不一一作介绍,因为一般我们只会把toolbar放在最上面(不用设置layout_gravity属性,默认的),并且设置app:layout_collapseMode为pin,让他固定在最顶端,有兴趣的自己试试其他情况,

7. 告你一个惊天大幂幂:只要CollapsingToolbarLayout里面包含有toolbar那么CollapsingToolbarLayout的折叠后高度就是toolbar的高度,相当于CollapsingToolbarLayout设置了minHeight属性

8. 再告诉你一个惊天大咪咪:CollapsingToolbarLayout折叠到最顶端时,它就是老大,会处于最上层,包括toolbar在内,所有的布局都会被他盖住,显示不出来.

9. CollapsingToolbarLayout 自己的属性 说明,不是直接子布局可用的,是自己可以用的属性  contentScrim折叠后的颜色也是展开时的渐变颜色,效果超赞. title标题,如果设置在折叠时会动画的显示到折叠后的部分上面,拉开时会展开,很好玩的  expandedTitleMargin当title文字展开时文字的margin,当然还有marginTop等属性,脑补吧  app:collapsedTitleTextAppearance=”@style/Text”折叠时title的样式里面可以定义字体大小颜色等  app:collapsedTitleTextAppearance=”@style/Text1”折叠时title的样式里面可以定义字体大小颜色等  当然还有一些,自己试试吧,现在的这些已经完全够用了**

10. 还有最后一个问题:怎么实现固定表头,这个也简单,写一个布局放在CollapsingToolbarLayout之后,AppBarLayout之内即可,xml文件中自己找找看吧.你要是问如果放在CollapsingToolbarLayout之前,AppBarLayout之内会怎么样?这样折叠布局就不起作用了.不会折叠了.

总结

CoordinatorLayout是一个“加强版”的 FrameLayout,我们只需要知道他两个作用

  • (1) 用作应用的顶层布局管理器
  • (2) 通过为子View指定 behavior 实现自定义的交互行为。 在我们做 Material Design 风格的app时通常都使用 CoordinatorLayout 作为布局的根节点,以便实现特定的UI交互行为。

我们可以用它来做各种常用的特效,如: Toolbar + TabLayout 实现 TabLayout 置顶效果 浸入式 + CollapsingToolbarLayout Fragment + 不同风格布局

更多可以参考: https://www.jianshu.com/p/e9df8c501f92

希望大家少走弯路吧.其实写帖子挺好的,因为你写的时候也是为自己总结,以后自己用的时候方便找,如果不写可能下次用的时候需要重新学一遍了,所以不管帖子有没有人看,自己一定要多写,跟写笔记还不一样,因为帖子你是让别人看的,你会尽量写的好一点,以后自己也会省事,写笔记是给自己看的,不怕丢人.

沉浸式状态栏+ScrollView顶部伸缩+ActionBar渐变

我的Android重构之旅:框架篇

面试必备之UI刷新大解密

 

Android 详细分析AppBarLayout的五种ScrollFlags

在前面两篇MD系列的文章中,通过两个案例基本上能够掌握了CoordinatorLayout与AppBarLayout的配合使用。本文我们回过头来详细聊聊AppBarLayout的ScrollFlags属性,了解一下不同值之间的区别。至此,Android Material Design系列的学习已进行到第七篇,大家可以点击以下链接查看之前的文章:

  • Android TabLayout 分分钟打造一个滑动标签页
  • Android 一文告诉你到底是用Dialog,Snackbar,还是Toast
  • Android FloatingActionButton 重要的操作不要太多,一个就好
  • Android 初识AppBarLayout 和 CoordinatorLayout
  • Android CoordinatorLayout实战案例学习《一》
  • Android CoordinatorLayout 实战案例学习《二》

ScrollFlags共有五种常量值供AppBarLayout的Children View使用,在xml布局文件中通过app:layout_scrollFlags设置,对应的值为:scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed;也可以在代码中通过setScrollFlags(int)方法使用,比如:

Toolbar toolbar = ... // your toolbar within an AppBarLayout
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

下面我们通过官网介绍、XML代码和对应的效果图分别分析这五种值的使用(备注:代码中设置也一样,不再赘述):

scroll


The view will be scroll in direct relation to scroll events. This flag needs to be set for any of the other flags to take effect. If any sibling views before this one do not have this flag, then this value has no effect.

Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用。

示例XML代码:

    <android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/tb_toolbar"android:layout_width="match_parent"android:layout_height="@dimen/dp_56"app:titleTextColor="@color/white"app:title="@string/app_name"app:theme="@style/OverFlowMenuTheme"app:popupTheme="@style/AppTheme"android:background="@color/blue"app:layout_scrollFlags="scroll|enterAlways"/></android.support.design.widget.AppBarLayout>

对应效果图:

Samples01.gif

enterAlways


When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.

快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scrollscroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。

示例XML代码:

...
app:layout_scrollFlags="scroll|enterAlways"
...

对应效果图:

Samples02.gif

enterAlwaysCollapsed


An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height. Once the scrolling view has reached the end of it's scroll range, the remainder of this view will be scrolled into view. The collapsed height is defined by the view's minimum height.

enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。

示例XML代码:

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...

对应效果图:

Samples03.gif

exitUntilCollapsed


When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'. The collapsed height is defined by the view's minimum height.

这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。

示例SML代码:

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...

对应效果图:

Samples04.gif

snap


Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. For example, if the view only has it's bottom 25% displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75% is visible then it will be scrolled fully into view.

简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。

示例XML代码:

...
android:layout_height="@dimen/dp_200"
...
app:layout_scrollFlags="scroll|snap"
...

对应效果图:

Samples05.gif

示例源码


我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,Star地址:

https://github.com/Mike-bel/MDStudySamples

 

这篇关于coordinatorLayout使用总结篇,看完这篇完全可以开发5.0的高级特效了 +Android 详细分析AppBarLayout的五种ScrollFlags的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1060730

相关文章

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是