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

阳光穿透心脏的1/2处 2023-07-17 06:26 77阅读 0赞

#### 1.简介 ####

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

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

#### 2.AppBarLayout ####

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

![format_png][]

appbarLayout的滑动flag

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

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

**方法一**

setScrollFlags(int)

**方法二**

app:layout_scrollFlags="scroll|enterAlways"

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

**效果图一:**

![format_png 1][]

**布局:**

<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>

**思路分析:**

![format_png 2][]

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

效果如下:

![image][]

结合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>

**思路分析:**

![format_png 3][]

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

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

![format_png 4][]

3.CollapsingToolbarLayout

![format_png 5][]

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

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

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

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

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

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>

**效果图如下:**

![format_png 6][]

**思路解析:**

![format_png 7][]

*  结构图如图片所示，先说明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万次，持续更新中）][2017-2020_Android_1082]**  
    **[2019年鸿洋大神最新整理一线互联网公司Android中高级面试题总结（附答案解析）  
    ][2019_Android_]**

原文作者：[只是一条程序狗][Link 1]  
原文链接：https://blog.csdn.net/jxf\_access/article/details/79564669

[format_png]: /images/20230528/599623ebc54947638735b04e81bbe8af.png
[format_png 1]: /images/20230528/931f67c0ad2244d4870d803803e4581d.png
[format_png 2]: /images/20230528/e3a9a86dff814cea8f5ed5017e832e65.png
[image]: /images/20230528/2ef1b63a2a9a4bb4af3b0703f91d593b.png
[format_png 3]: /images/20230528/625f686d5c67450a97a2fe8dd93e455a.png
[format_png 4]: /images/20230528/d449ca4bf6cc4820b2892bd14d66ab7f.png
[format_png 5]: /images/20230528/5d60bf93eaba41a48bf6adbf22490fc4.png
[format_png 6]: /images/20230528/9e666ad019744032a29d7ce96dcf8a35.png
[format_png 7]: /images/20230528/adb4a8de889a4f6fb9962ed1e9ff3e37.png
[2017-2020_Android_1082]: https://www.jianshu.com/p/7f9ade51232e
[2019_Android_]: https://www.jianshu.com/p/100e8044ce90
[Link 1]: https://blog.csdn.net/jxf_access