强大的CoordinatorLayout，视图滚动Toolbar隐藏，FloatingActionButton的使用

最新推荐文章于 2021-05-25 15:46:56 发布

梳子不爱头发

最新推荐文章于 2021-05-25 15:46:56 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android强大的控件

本文链接：https://blog.youkuaiyun.com/u012763405/article/details/81092518

Android强大的控件专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CoordinatorLayout在Android开发中的应用，如何利用它实现Toolbar在视图滚动时隐藏，以及FloatingActionButton与SnackBar的协调工作。通过设置layout_scrollFlags和layout_behavior属性，可以实现Material Design风格的交互效果。CoordinatorLayout作为顶级布局，通过与其他组件的配合，提供了丰富的滚动和布局管理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

强大的CoordinatorLayout被称为“super-powerd FrameLayout”，它的强大是因为它是一个开明的君主，放弃了大多数布局（King）的中央集权制，实行周天子政策，诸侯国分封制。将手中最大权利下发给子控件和子布局。目前Coordinator符合Material设计风格，实现与其他coordinator组件实现联动。

基本实现以下两个功能：

1、作为顶层布局
2、调度协调子布局

【FloatingActitonButton与SnackBar】：FloatingActionButton会让出位置给SnackBar

【ToolBar与RecyclerView】：定义layout_scrollFlags，则列表下拉则toolbar隐藏。

这些都是强大功能。如何配置

【配置文件如下】：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerlayout"
    android:background="@drawable/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">


   <android.support.design.widget.CoordinatorLayout
       android:id="@+id/coor"
       android:fitsSystemWindows="true"
       android:layout_width="match_parent"
       android:layout_height="match_parent">



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

       <android.support.design.widget.FloatingActionButton
           android:id="@+id/search"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom|end"
           android:src="@drawable/ic_search"
           app:backgroundTint="?android:attr/textColorSecondaryInverse"
           app:layout_anchor="@id/viewPager"
           app:layout_anchorGravity="bottom|end"
           app:rippleColor="?android:attr/colorActivatedHighlight" />

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/slidmenu"

        >

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



</android.support.v4.widget.DrawerLayout>

这里Navigation主要做侧滑，可以看我其他博客。只设计snackBar的去掉其他多余的

将FloatingActionBar包含在CoordinatorLayout里面就可以实现。可以设置显示背景颜色，及点击后的颜色：

调用SnackBar：

 search.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"Hello,I'm a SnackBar",Snackbar.LENGTH_LONG).setAction("Cancel", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {

                    }
                }).show();
            }
        });

这一步很好完成了。FloatingActionButton是最简单的使用CoordinatorLayout的例子，FloatingActionButton默认使用FloatingActionButton.Behavior。这个动作就是点击它为下面SnackBar留出位置。

【Toolbar】：

布局文件不变还是如上，看下Toolbar的配置，Toolbar显示在main_layout里面

Toolbar使用记住是自己的app的标题栏为空，将style 修改为此

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimaryDark" >#00000000</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appBarLayout"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="#00000000"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways"
        app:tabIndicatorColor="@android:color/white"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:background="#00000000"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

效果显示，视图滚动时，Toolbar会隐藏，这个效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout实现的。通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局，Toobar有app:layout_scrollFlags属性，这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值：

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

为了实现ToolBar滚动，在CoordinatorLayout里面要放一个滚动的View，这里设置的ViewPager包含一个RecycleView，因此是滚动的视图View

需要设置ViewPager布局行为

app:layout_behavior="@string/appbar_scrolling_view_behavior"

为了使得Toolbar有滑动效果，必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性

================================================================================================

好记:设立King CoordinatorLayout，之后给Toolbar设立layout_scrollFlags标签，意思就是“我可以滚出去”，至于“我什么时候滚出去”取决于可具有layout_behavior属性包括滑动组件例如ViewPager。

效果如上所示：

CoordinatorLayout还包括折叠窗口。后面实现上传