RecyclerView之实现可折叠式标题栏效果（五）

2020-09-24 本文已影响0人千夜零一

引言

RecyclerView的使用常常需要和其他的布局控件配合使用，今天我们就来介绍一下如何在上滑RecyclerView的时候隐藏掉我们的标题栏，下拉的时候显示标题栏效果。

效果展示

隐藏标题栏.gif

介绍

CollapsingToolLayout，是一个作用于ToolBar基础之上的布局，CollapsingToolLayout可以让TooBar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。
不过值得注意的是，CollapsingToolLayout在设计的时候，就被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。
所以它们在使用时的包含关系为：
CoordinatorLayout包含AppBarLayout包含CollapsingToolLayout包含你的标题栏TitleBar，不需要隐藏的部分处于AppBarLayout平级，CoordinatorLayout之下。

用法

只需要改动布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".show.Case26">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="MissingConstraints">

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

<!--            <androidx.appcompat.widget.Toolbar-->
<!--                android:id="@+id/toolbar"-->
<!--                android:layout_width="match_parent"-->
<!--                android:layout_height="?attr/actionBarSize"-->
<!--                android:background="@color/green"-->
<!--                app:title="标题党"-->
<!--                style="@style/ThemeOverlay.AppCompat.Dark.ActionBar"-->
<!--                app:popupTheme="@style/Theme.AppCompat.Light"-->
<!--                app:layout_scrollFlags="scroll|enterAlways|snap"-->
<!--                app:titleTextColor="@color/white" />-->

            <com.hjq.bar.TitleBar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/green"
                app:title="标题党"
                app:titleColor="@color/white"
                style="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/Theme.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:titleTextColor="@color/white"
                />

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

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:background="@color/white" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Tips

之所以使用TitleBar是因为这是一个很棒的github上封装好的标题栏库，效果和功能甚至完爆Google原生的老套ToolBar，所以推荐使用，具体更多的用法可以参考我的另一片博客：TitleBar标题栏告别老套的ToolBar

解析

不知你有没有注意到：这里我们在介绍折叠式布局，但却并没有用到CollapsingToolLayout这个控件，why? 这么说吧，这里因为配合使用RecyclerView所以可以但没必要加上CollapsingToolLayout，它显示的效果跟QQ空间类似，而这不是我们RecyclerView需要的，所以，只是简单增加了隐藏显示效果。更多效果请走传送门CollapsingToolbarLayout实现可折叠式标题栏布局效果
具体的RecyclerView实现效果请看我的RecyclerView系列博客：