1. CollapsingToolbar可收缩ToolBar
创建Collapsing toolbar,需要使用CollapsingToolbarLayout 结合 AppBarLayout,CoordinatorLayout, Toolbar, 还需要一个可滚动的contentView比如 RecyclerView。
1.1. Usage
将一个 CollapsingToolbarLayout 节点添加进 AppBarLayout。 然后添加一个 Toolbar 和其它的View作为 CollapsingToolbarLayout的child。 确保整个View的结构需要放到 CoordinatorLayout 的内部以方便使用 CollapsingToolbarLayout的滚动特性。
下面是一个常见的页面布局:
<?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=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="@dimen/app_bar_height"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="@+id/toolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/> <!--ContentView-->
</android.support.design.widget.CoordinatorLayout>
结构层级:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<AppBarContentView /> <!--Custom-->
<Toolbar />
</CollapsingToolbarLayout>
</AppBarLayout>
<ContentView /> <!--Custom-->
</CoordinatorLayout>
一种常见的工具栏模式是视差图像滚动,其中collapsingtoolbarlayout的图像或其他子对象以不同于其兄弟对象的速率进行滚动。要实现这个效果可以添加一个 ImageView 和其它的View作为 CollapsingToolbarLayout 的Child,然后在xml中为任意多个兄弟Child指定视差乘数。
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top"
app:expandedTitleMarginStart="@dimen/shrine_toolbar_offset_start"
app:expandedTitleMarginTop="@dimen/shrine_toolbar_offset_top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/shrine_toolbar_image_offset_top"
app:layout_collapseMode="parallax" <!--指定CollapseMode-->
app:layout_collapseParallaxMultiplier="0.5"/> <!--指定视差乘数-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/AppBar"
android:layout_width="match_parent"
android:layout_height="@dimen/shrine_toolbar_collapsed_height"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
您可以将基本折叠工具栏与滚动标记、折叠工具栏布局的属性、选项卡视图布局或任何其他要实现所需工具栏的视图组合在一起。
如果要调用setTitle(),确保调用
CollapsingToolbarLayout.setTitle()而不是Toolbar.setTitle。这允许CollapsingToolbarLayout根据工具栏的当前大小调整标题的大小。可以向
CollapsingToolbarLayout添加任意数量的视图,但请确保ToolBar是它的最后一个Child。这样可以确保以正确的顺序绘制视图。滚动内容应放置在
RecyclerView、NestedScrollView或其他支持嵌套滚动的视图中。
1.2. AppBarLayout
AppBarLayout 是一处垂直布局的 LinearLayout ,它实现了很多Material滚动设计。它的Children需要提供他们的滚动表现形式,通过 setScrollFlags(int) 或者属性配置app:layout_scrollFlags。
要使用它的这些滚动特性,需要将它作为 CoordinatorLayout的直接Child,如果将它用在其它ViewGrou中则大多数功能将不可用。
AppBarLayout 同时需要一个单独的可滚动的兄弟View用来控制滚动特性,可以通过 AppBarLayout.ScrollingViewBehavior 这个类来实现,即你需要设置可滚动View的behavior为 AppBarLayout.ScrollingViewBehavior,通过一个string资源来指定。
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Content-->
</android.support.v4.widget.NestedScrollView>