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>