AppbarLayout与CollapsingToolbarLayout的使用

最新推荐文章于 2024-06-26 11:15:43 发布

super码王

最新推荐文章于 2024-06-26 11:15:43 发布

阅读量2.2k

点赞数 3

分类专栏： Android那些事文章标签： java android 安卓 android studio

本文链接：https://blog.csdn.net/qq_41885673/article/details/118364709

版权

Android那些事专栏收录该内容

64 篇文章 6 订阅

订阅专栏

在 Toolbar在Android中的使用文章中我们讲过了系统默认自己加的 ActionBar 兼容性不好，所以有了Toolbar。今天我们再来讲讲 AppbarLayout。

在使用 AppbarLayout 布局的时候，可能会报如下错误：找不到 AppbarLayout

Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.material.appbar.AppBarLayout"

报错原因是依赖包没导入，解决方法如下：

compile 'com.android.support:design:25.3.1'

这个时候你就会发现在布局文件里引用 com.google.android.material.appbar.AppBarLayout 运行时不会报错了。

添加的这句话之所以会爆红是因为谷歌建议将 compile -》implementation，后面的库使用 androidx 里面的。但是不影响功能，我们先这样了。

基础知识

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

注意:

上面提到的"某个可滚动View", 可以理解为某个ScrollView.。就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。

这里某个ScrollView就是NestedScrollView或者实现了NestedScrollView机制的其它控件, 如RecyclerView. 它有一个布局行为Layout_Behavior:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

这是一个系统behavior, 从字面意思就可以看到, 是为appbar设置滚动动作的一个behavior. 没有这个属性的话, Appbar就是死的, 有了它就有了灵魂.

以上内容是对 CoordinatorLayout的简单使用的简单回顾。有以下几点：

最外层根布局要是 CoordinatorLayout
里面的头布局要用 AppbarLayout 包着，AppbarLayout的子布局设置 app:layout_scrollFlags 实现联动。
下面的滚动布局要是 NestedScrollView或者实现了NestedScrollView机制的其它控件，并且设置 Layout_Behavior属性。

下面我们将讲更加绚丽的动画效果：结合 CollapsingToolbarLayout 的使用。

何为CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。

代码示例

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tb_my_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                app:title="title"
                app:titleTextColor="#000"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_my_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在这里，你得注意如下问题：

?attr/actionBarSize ：表示 toolbar 的默认最小高度minHeight。
AppBarLayout 包 CollapsingToolbarLayout 包 Toolbar，这种层级关系不能乱
app:layout_scrollFlags="scroll|exitUntilCollapsed" 应该设置在 CollapsingToolbarLayout 上，即离 AppBarLayout 最近的那个子布局上。
CollapsingToolbarLayout 和 Toolbar 的 android:layout_height 不能同时设置为 match_parent，要不然你会发现 title 无法显示，所以我将 CollapsingToolbarLayout 设置为 match_parent，Toolbar 设置为 ?attr/actionBarSize。
app:layout_collapseMode="" 是设置模式的，放在 CollapsingToolbarLayout 的子布局上，parallax 不固定 Toolbar，pin 固定 Toolbar。
Toolbar 在这种情况下 title 与 logo 是分排显示的，的注意。

补充：对于 Toolbar 的 logo 设置，我是用 java 代码实现的，下面只粘贴出有用部分代码片段：

        //获取 Toolbar
        tb_my_bar = findViewById(R.id.tb_my_bar);
        tb_my_bar.setLogo(R.drawable.ic_launcher_foreground);

效果展示

app:layout_collapseMode="paralla“

app:layout_collapseMode="pin“

我们上面讲到过 CollapsingToolbarLayout 是一个 ViewGroup ，所以我们在里面放一张 ImageView 试试。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bg"
                android:scaleType="center"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tb_my_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:background="?attr/colorPrimary"
                app:title="title"
                app:titleTextColor="#000"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_my_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果展示

还有其他动画效果大家自行设置 app:layout_scrollFlags、app:layout_collapseMode 的值。

我来带大家再看几个属性：

一、去掉Toolbar的的 background 的效果

二、设置 CollapsingToolbarLayout 的 contentScrim 属性

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:contentScrim="@color/colorPrimary"  //别找了，就是这个属性
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

三、打造沉浸式状态栏

目前有很多APP比较喜欢采用沉浸式设计, 简单点说就是将状态栏和导航栏都设置成透明或半透明的.

我们来把状态栏statusBar设置成透明. 在style主题中的AppTheme里增加一条:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        ...
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

在布局里面, 将ImageView和所有它上面的父View都添加fitsSystemWindows属性.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    ...
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        ...
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            ... 
            android:fitsSystemWindows="true">

            <ImageView
                ...
                android:fitsSystemWindows="true"/>

            <androidx.appcompat.widget.Toolbar
                />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_my_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果展示：

可以明显的发现这个 title 和 logo 上下错位了，更准确的说 title 不在 Toolbar里面。

经过我一天的研究发现这是使用 AppBarLayout 、 CollapsingToolbarLayout 和 Toolbar

版本的问题。

错误引入

compile 'com.android.support:design:25.3.1'

错误组件

com.google.android.material.appbar.AppBarLayout
com.google.android.material.appbar.CollapsingToolbarLayout
androidx.appcompat.widget.Toolbar

正确引用

compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'

正确版本

android.support.design.widget.AppBarLayout
android.support.design.widget.CollapsingToolbarLayout
android.support.v7.widget.Toolbar

大家主要关注下面两个文件的修改，以及自己 java 代码中版本问题

效果展示：

源码链接：yiqi/CoordinatorLayout (gitee.com)

super码王

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
AppbarLayout与CollapsingToolbarLayout的使用

在Toolbar在Android中的使用文章中我们讲过了系统默认自己加的 ActionBar 兼容性不好，所以有了Toolbar。今天我们再来讲讲 AppbarLayout。在使用 AppbarLayout 布局的时候，可能会报如下错误：找不到 AppbarLayoutCaused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.material.appbar.AppBarLayout"...
复制链接

扫一扫