Android中CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout的使用

最新推荐文章于 2023-05-26 21:11:33 发布

Android涛

最新推荐文章于 2023-05-26 21:11:33 发布

阅读量663

点赞数

分类专栏：代码文章标签： CoordinatorLayout AppBarLayout CollapsingToolbarLayout

本文链接：https://blog.csdn.net/qq_40441190/article/details/86007856

版权

代码专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能
1、作为顶层布局
2、调度协调子布局

AppbarLayout是一种支持响应滚动手势的app bar布局, CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局.

二、CoordinatorLayout嵌套AppBarLayout

1. AppBarLayout 继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

2. 上面提到的"某个可滚动View", 可以理解为某个ScrollView. 就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。这里某个ScrollView就是NestedScrollView或者实现了NestedScrollView机制的其它控件, 如RecyclerView. 它必须有这个属性Layout_Behavior:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

3. 在AppBarLayout的子布局中（不只是Toolbar，其他布局也可实现）添加属性app:layout_scrollFlags=""来设置各子View执行的动作，属性值如下：

（1）scroll: 值设为scroll的View会跟随滚动事件一起发生移动。就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。

（2）enterAlways: 值设为enterAlways的View,当任何时候ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动到最顶部还是哪里，必须配合scroll一起使用，不然无效果。

（3）exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件，必须配合scroll一起使用，不然无效果。

（4）enterAlwaysCollapsed：是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束，必须配合scroll一起使用，不然无效果。

（5）snap：简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动，必须配合scroll一起使用，不然无效果。

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

4. 复制下面的代码到布局中先看一下效果如何，上面五个属性值不如自己试试看看。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:layout_scrollFlags="scroll|snap"
            app:title="@string/app_name"
            app:titleTextColor="@android:color/white"
            android:background="@color/black"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                android:textSize="50sp"
                android:layout_width="@dimen/dp_50"
                android:layout_height="wrap_content" />

        </LinearLayout>

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

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

三、AppBarLayout嵌套CollapsingToolbarLayout

1. CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View，之前说过在AppBarLayout中的子布局添加属性app:layout_scrollFlags=""才可以，所以在Toolbar中的此属性要移到CollapsingToolbarLayout中。

2. CollapsingToolbarLayout主要包括几个功能：

（1）折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle方法来设置title。

（2）内容纱布（Content scrim）：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

（3）状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。默认statusBarScrim是colorPrimaryDark的色值。

（4）Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。

（5）CollapseMode ：子视图的折叠模式，在子视图设置，有两种属性值，“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

3. 在CollapsingToolbarLayout中设置其他属性样式：

（1）expandedTitleMarginStart：设置下拉伸缩完成后，ToolBar标题文字左边的margin距离；

（2）expandedTitleMarginEnd：设置下拉伸缩完成后，Toolbar标题文字右边的margin距离；

（3）collapsedTitleGravity ：指定折叠状态的标题如何放置；

（4）expandedTitleGravity ：展开状态的标题如何放置；

（5）collapsedTitleTextAppearance：指定折叠状态标题文字的样貌；

（6）expandedTitleTextAppearance：指定展开状态标题文字的样貌；

（7）titleEnabled：指定展开状态是否显示标题文本；

（8）toolbarId：指定与之关联的ToolBar，如果未指定则默认使用第一个被发现的ToolBar子View；

4. CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton，下面会讲到FloatingActionButton有些属性。

使用CollapsingToolbarLayout实现折叠效果，需要注意3点
1. AppBarLayout的高度固定。
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性。
3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性。

5. 复制下面的代码到布局中先看一下效果如何，上面的属性值不如自己试试看看。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/splash"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:title="@string/app_name"
                app:titleTextColor="@android:color/black"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                android:textSize="50sp"
                android:layout_width="@dimen/dp_50"
                android:layout_height="wrap_content" />

        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"/>

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

三、 CoordinatorLayout嵌套FloatingActionButton

1. fabSize="normal" ：是用来定义 FAB 的大小的，“normal ”的意思是在大多数情况下标准尺寸为 56dp 的按钮，但是万一你想使用较小的一个， “mini ”是另一个选择，它的大小将变成 40dp，还有个“auto”，自适应。

2. elevation：为空闲状态下的阴影深度。

3. pressedTranslationZ：为按下状态的，z轴的偏移。

4. app:backgroundTint：是指定默认的背景颜色。

5. app:rippleColor：是指定点击时的背景颜色

四、CoordinatorLayout嵌套TabLayout

1. app:tabIndicatorColor：tab的指示符颜色。

2. app:tabSelectedTextColor：选择tab的文本颜色。

3. app:tabTextColor：普通tab字体颜色。

4. app:tabMode：模式，可选fixed和scrollable，fixed是指固定个数。

5. scrollable：是可以横行滚动。

6. app:tabGravity：对齐方式，可选fill和center。

参考：https://blog.csdn.net/xyz_lmn/article/details/48055919
https://www.jianshu.com/p/bbc703a0015e

Android涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android中CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout的使用

一、CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能1、作为顶层布局2、调度协调子布局AppbarLayout是一种支持响应滚动手势的app bar布局, CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局.二、CoordinatorLayout嵌套AppBarLayout1....
复制链接

扫一扫