引言
RecyclerView的使用常常需要和其他的布局控件配合使用,今天我们就来介绍一下如何在上滑RecyclerView的时候隐藏掉我们的标题栏,下拉的时候显示标题栏效果。
效果展示
介绍
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系列博客:
传送门
回顾第一篇—> RecyclerView实现瀑布流布局(类似ListView)(一)
回顾第二篇—> RecyclerView实现横向滑动布局(二)
回顾第三篇—> RecyclerView实现ItemDecoration自定义分割线装饰(三)
回顾第四篇—> RecyclerView实现ItemDecoration滚动时间轴效果(四)
RecycylerView与ListView的区别请走1号传送门!