CoordinatorLayout使用详解: 打造折叠悬浮效果-低调大师

CoordinatorLayout使用详解: 打造折叠悬浮效果

2020-03-19 540

1.简介

CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的折叠悬浮效果。

作为最上层的View
作为一个容器与一个或者多个子View进行交互

2.AppBarLayout

它是继承与LinearLayout的，默认的方向是Vertical

appbarLayout的滑动flag

类型	说明
int SCROLL_FLAG_ENTER_ALWAYS	W((entering) / (scrolling on screen))下拉的时候，这个View也会跟着滑出。
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED	另一种enterAlways，但是只显示折叠后的高度。
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED	((exiting) / (scrolling off screen))上拉的时候，这个View会跟着滑动直到折叠。
int SCROLL_FLAG_SCROLL	这个View将会响应Scroll事件
int SCROLL_FLAG_SNAP	在Scroll滑动事件结束以前，如果这个View部分可见，那么这个View会停在最接近当前View的位置

我们可以通过两种方法设置这个Flag

方法一

setScrollFlags(int)

方法二

app:layout_scrollFlags="scroll|enterAlways"

AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。

效果图一:

布局:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

       .

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

</android.support.design.widget.CoordinatorLayout>

思路分析:

那如果当我们的toolBar 等于 app:layout_scrollFlags=”scroll|snap”的时候，
layout_scrollFlags=scroll的时候，这个View会跟着滚动事件响应，
layout_scrollFlags=“snap”的时候在Scroll滑动事件结束以前，如果这个View部分可见，那么这个View会停在最接近当前View的位置。

效果如下:

结合ViewPage,布局代码如下:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

</android.support.design.widget.CoordinatorLayout>

思路分析:

其实相对于前一个例子，只是把摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的

运行以后，即可看到以下的结果

3.CollapsingToolbarLayout

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能

Collapsing title（可以折叠的标题）
Content scrim（内容装饰），当我们滑动的位置到达一定阀值的时候，内容装饰将会被显示或者隐藏
Status bar scrim（状态栏布）
Parallax scrolling children，滑动的时候孩子呈现视觉特差效果
Pinned position children，固定位置的孩子

常量	解释说明
int COLLAPSE_MODE_OFF	The view will act as normal with no collapsing behavior.(这个 View将会呈现正常的结果，不会表现出折叠效果）
int COLLAPSE_MODE_PARALLAX	The view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.（在滑动的时候这个View 会呈现出视觉特差效果）
int COLLAPSE_MODE_PIN	The view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout）

我们有两种方法可以设置这个常量,

方法一：在代码中使用这个方法

setCollapseMode(int collapseMode)

方法二：在布局文件中使用自定义属性

app:layout_collapseMode="pin"

结合ViewPager的视觉特差

布局代码:

<?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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                app:layout_collapseMode="parallax"
            />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

</android.support.design.widget.CoordinatorLayout>

效果图如下:

思路解析:

结构图如图片所示，先说明CollapsingToolbarLayout的变化

CollapsingToolbarLayout里面包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示

接着说明TabLayout的变化

从前面的描述我们已经知道当没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的时候消失不见

这篇博客主要讲解了CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout的一些相关属性。

对于AppBarLayout，我们主要讲解了这个属性app:layout_scrollFlags，设置不同的属性我们可以在滚动的时候显示不同的效果
对于CollapsingToolbarLayout，我们主要讲解了app:layout_collapseMode这个属性，设置不同的值，我们可以让其子View呈现不同的炫酷效果，如parallax和pin等
推荐阅读：2017-2020历年字节跳动Android面试真题解析（累计下载1082万次，持续更新中）

**[2019年鸿洋大神最新整理一线互联网公司Android中高级面试题总结（附答案解析）
](https://www.jianshu.com/p/100e8044ce90)**

原文作者：只是一条程序狗
原文链接：https://blog.csdn.net/jxf_access/article/details/79564669

微信关注我们

原文链接：https://yq.aliyun.com/articles/750621

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

200G vs 400G：谁是数据中心网络下一站？

云栖号资讯：【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！互联网联接全球 40 亿多用户，支撑着VR/AR、16K视频、自动驾驶、人工智能、5G、物联网等层出不穷的数字化应用。教育、医疗、办公等用户线上与线下的结合，正在影响和改变人们生活的方方面面。数据中心网络，作为互联网业务赖以生存和发展的基础设施，早已从最初的千兆、万兆网络，走到了“25G接入+100G互联”规模部署的阶段。 100G互联：全盒架构被大型互联网企业看重 “25G接入+100G互联”的架构下，数据中心网络通过三级组网实现大规模接入，单集群服务器规模可以超过10万台。如下图所示，基于T1和T2层的Pod可以像乐高积木一样灵活扩展，按需建设。图1：右侧引用自 https://techblog.comsoc.org/2019/03/18/facebooks-f16-achieves-400g-effective-intra-dc-speeds-using-100ge-fabric-switches-and-100g-optics-other-hyperscalers/ 随着大...

2020-03-20

576

云栖号资讯：【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！近日，Uber 通过官方博客宣布开源了一款可自动删除旧代码的工具 Piranha，该工具已经支持 Objective-C、Swift 和 Java 三种编程语言。开源 Piranha：自动删除旧代码长期以来，Uber 会为不同用户提供不同的功能选择，也就是定制化开发。但是，如果某项功能经过验证后证明并不成功，这些代码放在代码库里就造成了技术负担，可能使应用程序变得臃肿、冗杂。一些陈旧的代码还可能会带来不必要的风险，影响终端用户体验，对工程师而言，这些技术债的消除耗时耗力，还会影响他们开发新功能。为了使删除旧代码的过程自动化，Uber 开源了一款可以扫描源代码并删除其中过时旧代码的工具 Piranha（食人鱼）。Piranha 可以在 Uber Android 和 iOS 代码库中运行，Uber 已使用它删除了大约 2000 个过时代码。据介绍，该工具目前支持 Objective-C、Swift 和 Java 三种编程语言。如何定位需要删除的代码？为了方便定位，Uber 开发的程...

2020-03-20

587

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。