Android可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar_android collapsingtoolbarlayout title改成图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37717853/article/details/87893523

本文介绍了如何在Android中实现可折叠式标题栏，主要涉及CoordinateLayout、AppBarLayout、CollapsingToolbarLayout和Toolbar的组合使用。通过xml布局，展示了两种常见效果，并详细解析了相关属性，如collapsed和expanded系列属性，以及如何设置内容滚动、标题样式等。同时提到了可与FloatingActionButton配合使用的可能性。

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

常见的效果一般有以下两种:

在这里插入图片描述

CoordinateLayout可以实现很多功能，我们可以用其来做最外层的布局样式，但是AppBarLayout 要作为CoordinateLayout的直接子view才有效，而CollapsingToolbarLayout是不能独立存在的，它只能作为 AppBarLayout 的直接子布局来使用，所以往往就看到CoordinateLayout + AppBarLayout + CollapsingToolbarLayout 的同时出现，其中不乏还加上一个Toolbar。

要使用CoordinateLayout，先要导包，在build.gradle的dependencies中添加compile 'com.android.support:design:26.1.0'依赖:

dependencies {
   
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    compile 'com.android.support:design:26.1.0'
    androidTestCompile('com.android.support:support-annotations:26.1.0'){
   
        force = true
    }
}

以上效果，通过单纯的xml布局就可以实现，这就是这几个控件组合的强大之处，话不多说，先把上面两种效果代码上一下，后面再解释下一些用到的属性

效果一:
xml文件

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.demo2.MainActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/color_Blue"
            app:collapsedTitleGravity="left"
            app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
            app:contentScrim="@color/color_Blue"
            app:expandedTitleGravity="left|bottom"
            app:expandedTitleMarginBottom="10dp"
            app:expandedTitleTextAppearance="@style/ToolBarTitleText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="云雾之上"
            app:titleEnabled="true">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg3"
                app:layout_collapseMode="parallax"