1. CollapsingToolbar可收缩ToolBar

创建Collapsing toolbar,需要使用CollapsingToolbarLayout 结合 AppBarLayout,CoordinatorLayoutToolbar, 还需要一个可滚动的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。这样可以确保以正确的顺序绘制视图。

  • 滚动内容应放置在RecyclerViewNestedScrollView或其他支持嵌套滚动的视图中。

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>

CollapsingToolbarLayout

results matching ""

    No results matching ""