您的位置: 首页  >  文章  >  Android可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

Android可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

分类: 文章 • 2022-10-17 20:16:16
常见的效果一般有以下两种:

Android可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+ToolbarAndroid可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

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"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tb_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#5000eeee"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="@null">
                
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_gravity="left"
                    android:background="@mipmap/return_back" />

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
其中 CollapsingToolbarLayout 用到的属性 ToolBarTitleText，在styles.xml文件中定义如下： 
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="ToolBarTitleText" parent="TextAppearance.AppCompat.Medium">
        <item name="android:textColor">#ffffffff</item>
        <item name="android:textSize">18dp</item>
        <item name="android:textStyle">bold</item>
    </style>
</resources>
效果二
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:contentScrim="@color/color_Blue"
            app:expandedTitleGravity="left|bottom"
            app:expandedTitleMarginBottom="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/ToolBarTitleText"
            app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
            app:titleEnabled="false">

            <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"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tb_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:background="#5000eeee"
                app:title="@null">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_gravity="left"
                    android:background="@mipmap/return_back" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="云雾之上"
                    android:textSize="18dp"
                    android:textStyle="bold" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
细心比较不难发现，两种效果的不同之处只有几行代码，其实在CoordinateLayout + AppBarLayout + CollapsingToolbarLayout 这个组合下，可以尝试去实现很多不同的效果，上面只是较为常见的两种。 布局大体分为三部分：

Android可折叠式标题栏的实现：CoordinateLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar

看布局文件代码我们可以知道，第一部分和第二部分其实是在AppBarLayout 和 CollapsingToolbarLayout 的包裹下的同一层。 
<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:titleEnabled="false">
collapsed开头是折叠情况下的属性设置， expaded开头的系列属性则是未折叠的情况下的状态，这里以 expaded 的为例：

expandedTitleGravity=“left|bottom” //标题文字 居左下方
expandedTitleMarginBottom=“10dp” //这个很容易理解，即标题文字的margin属性，这里设置了离底部10dp
expandedTitleTextAppearance="@style/ToolBarTitleText" //字体样式，要在styles.xml文件中定义，开头已给出
…
app:contentScrim="@color/colorPrimary" //设置 趋于折叠以及折叠之后的颜色
app:layout_scrollFlags=“scroll|exitUntilCollapsed” // scroll 表示标题栏会跟着下方的 NestedScrollView 一起滚动, exitUntilCollapsed 表示折叠之后，标题栏保留在界面上，而不是移出屏幕
app:title="" //标题文字
app:titleEnabled=“false” //是否启用标题


第一部分是Toolbar： 
<android.support.v7.widget.Toolbar
                android:id="@+id/tb_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#5000eeee"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="@null">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_gravity="left"
                    android:background="@mipmap/return_back" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="云雾之上"
                    android:textSize="18dp"
                    android:textStyle="bold" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

background 这里我设置了背景半透明效果
layout_height 引用了一个 ActionBar 的样式actionBarSize
layout_collapseMode=“pin” 设置为pin的话，是将标题栏固定在顶部
title 即标题文字，这是设置为@null，还有一个logo属性这里也没使用，因为我在Toolbar中定义了ImageView和TextView来代替它们

第二部分是 ImageView： 
 <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"
                app:layout_collapseParallaxMultiplier="0.7" />

layout_collapseMode=“parallax” 设置折叠的模式，有两个值:pin 和 parallax

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，
实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier=“0.7” (视差因子) - 设置视差滚动因子，值为：0~1


第三部分是 一个带滚动属性的view: 
<android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

我这里用的是 RecyclerView ，当然如果第三部分要放的内容较多的话，可以用NestedScrollView然后里面加个layout，再添加内容。
设置：layout_behavior="@string/appbar_scrolling_view_behavior",,这是CoordinatorLayout下用的一种属性设置，大致理解为某个view依赖另一个view的变化而变化，这里表现为当设置该属性的RecyclerView 滚动时，AppBarLayout部分进行折叠或展开

看到有的文章中一般连同 FloatingActionButton一起使用，如果需要，在CoordinatorLayout层添加即可： 
<android.support.design.widget.FloatingActionButton
        android:id="@+id/floating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/floating_icon"
        app:fabSize="normal"
        //设定一个锚点，意思就是 FloatingActionButton 会显示在 appbarlayout 中
        app:layout_anchor="@id/appbarlayout"
        //将悬浮按钮定位在标题栏区域的右下角
        app:layout_anchorGravity="bottom|end"
        app:pressedTranslationZ="10dp"
        app:rippleColor="@color/colorAccent" />

Demo下载：https://download.csdn.net/download/qq_37717853/10972154

相关推荐