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

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设