The use of CollapsingToolbarLayout in Android

1. A few precautions for using CollapsingToolbarLayout

  • Add compilation support for several libraries in build.gradle, including appcompat-v7 library (required for Toolbar), design library (required for CollapsingToolbarLayout), recyclerview library (required for RecyclerView of the main page).
  • The root layout of the layout file adopts CoordinatorLayout, because the dynamic effect of the design library depends on this control; and the node needs to add a namespace declaration xmlns:app="http://schemas.android.com/apk/res-auto"
  • Use the AppBarLayout node to wrap the CollapsingToolbarLayout node, and then add the Toolbar node under the CollapsingToolbarLayout node.
  • Add the scroll attribute app:layout_scrollFlags="scroll|enterAlways" to the Toolbar node to declare the scroll behavior flag of the toolbar.
  • The main body of the demo interface uses the RecyclerView control or the NestedScrollView control, and adds a behavior attribute to the control node, namely app:layout_behavior="@string/appbar_scrolling_view_behavior", which means that AppBarLayout is notified to capture the scrolling operation of the RecyclerView

2.CollapsingToolbarLayout attributes

  • Folding mode attributes

The name of this property is app:layout_collapseMode, which specifies the folding mode of the subview (usually Toolbar). The value of the folding mode is as follows

Folding mode value Description
pin Fixed mode. Toolbar is fixed and not affected by the folding of CollapsingToolbarLayout.
parallax Parallax mode. As CollapsingToolbarLayout shrinks and expands, Toolbar also shrinks and expands. The folding coefficient can be configured through the property app:layout_collapseParallaxMultiplier. When this property is 1.0, the folding effect is fixed with the pin mode; when the property is 0.0, the folding effect is equivalent to the none mode, that is, it moves the same distance.
none Defaults. How far the CollapsingToolbarLayout is folded, the Toolbar also moves along with how much distance, in layman's terms, it is the husband singing and the wife following.
  • Folding distance coefficient attribute

The property name is app:layout_collapseParallaxMultiplier, which specifies the folding distance coefficient in parallax mode, and the value is between 0.0 and 1.0. If not explicitly specified, the attribute value will default to 0.5.

3. Folding layout example-fixed mode

The code is changed based on the knowledge points of the AppBarLayout in the Android application bar layout

Modify activity_main.xml as follows

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="#FF0000">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="欢乐中国年"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#0000FF"
            app:expandedTitleMarginStart="40dp">

            <!-- 注意属性layout_collapseMode作用于Toolbar控件 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#00FF00"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

4. Folding layout example-parallax mode

The code is changed based on the knowledge points of the AppBarLayout in the Android application bar layout

Modify activity_main.xml as follows

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="#FF0000">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="欢乐中国年"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#0000FF"
            app:expandedTitleMarginStart="40dp">

            <!-- 注意属性layout_collapseMode作用于Toolbar控件 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tl_title"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#00FF00"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

Guess you like

Origin blog.csdn.net/weixin_38322371/article/details/114981737