CollapsingToolbarLayout简介
CollapsingToolbarLayout 实现 Toolbar 的折叠效果, CollapsingToolbarLayout 通常被设计用于 AppBarLayout 的子布局,从而实现一些滚动特性的交互动画效果
下面我先来看一个简单的示例
我们来看一下这个示例的布局代码
<?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">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collsping_Toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/green"
app:title="测试"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:srcCompat="@mipmap/ghsy" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/rv_demo1_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:text="@string/geci"
android:textSize="20sp"
android:layout_height="wrap_content"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
AppBarLayout中添加一个CollapsingToolbarLayout布局,CollapsingToolbarLayout布局中添加头部背景图片以及Toolbar,在上拉滑动时Toolbar中的标题会跟随手势实现一个动画效果最终悬停顶部,下面我重点看一下CollapsingToolbarLayout相关属性
CollapsingToolbarLayout属性
app:contentScrim:当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。
app:title:当titleEnable设置为true的时候,在toolbar展开的时候,显示大标题,toolbar收缩时,显示为toolbar上面的小标题。
app:scrimAnimationDuration:该属性控制toolbar收缩时,颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间
app:collapsedTitleTextAppearance:指定toolbar收缩时,标题字体的样式。
app:collapsedTitleGravity : 指定toolbar收缩时的标题文字对齐方式。
app:expandedTitleTextAppearance : 指定toolbar展开后的标题文字字体。
app:expandedTitleGravity:指定toolbar展开时,title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。
app:expandedTitleMargin : 指定展开后的标题四周间距。
添加FloatingActionButton按钮
先来看一下动画效果
看一下布局代码
<?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">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collsping_Toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/green"
app:title="测试"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:srcCompat="@mipmap/ghsy" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/rv_demo1_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:text="@string/geci"
android:textSize="20sp"
android:layout_height="wrap_content"/>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/bt_float"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_set"
app:rippleColor="#ffe5e5e5"
app:backgroundTint="#ffffffff"
app:elevation="1dp"
app:pressedTranslationZ="6dp"
app:fabSize="mini"
app:borderWidth="0dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right"
android:layout_margin="10dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
在CoordinatorLayout中添加一个FloatingActionButton, app:layout_anchor="@id/appbar"这一行属性是关键,表示依附于AppBarLayout动画的属性,点击事件也是和我们的Button点击事件一样,这里就不展示了
最后附上项目Demo
[点击获取项目源码