Associated address

CoordinatorLayout

Explain AppbarLayout and how to customize collapsible toolbars

CoordinatorLayout uses the summary, and after reading this you can develop advanced effects for 5.0

Alipay home slide

Custom behaviors

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar

In the layout it is often seen that CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar realize some linkage layout, so what are they to use, one by one.

The import

AppBarLayout and CollapsingToolbarLayout are both provided in the Material Design package and should be imported into the CollapsingToolbarLayout before project use:

implementation 'com.android.support:design:x.x.x'
Copy the code

AndroidX way:

Implementation 'com. Google. Android. Material: material: 1.2.1'Copy the code

CoordinatorLayout

CoordinatorLayout can be used as FrameLayout according to the official documentation. The main applications are as follows:

  • As the top layout.
  • As a container for specific interactions between one or more child Views.

CoordinatorLayout implements interaction between sub-views in three ways:

  • anchor
  • insetEdge
  • Behaviors
anchor

A child View of CoordinatorLayout can set the Anchor (View ID) as an anchor point, and when the View specified by the Anchor moves, the View moves with it. The anchor point must be a descendant of the CoordinatorLayout.

The following is an example:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <View android:id="@+id/move_view" android:layout_gravity="center" android:background="@color/blue" android:layout_width="100dp" android:layout_height="100dp"/> <View android:layout_width="100dp" android:layout_height="100dp" android:background="@color/color_90b3b3b3" app:layout_anchor="@id/move_view" app:layout_anchorGravity="clip_vertical"/> </androidx.coordinatorlayout.widget.CoordinatorLayout>Copy the code

The layout_anchorGravity property is also used in the example to set the position relative to the anchor point.

insetEdge

View A uses layout_insetEdge to set the direction of insertion for CoordinatorLayout, and View B uses layout_dodgeInsetEdges to avoid View A coming from the same direction so as to avoid overlap.

The following is an example:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <View android:id="@+id/move_view" android:layout_gravity="center" android:background="@color/blue" android:layout_width="100dp" android:layout_height="100dp" app:layout_insetEdge="right"/> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center_vertical" android:background="@color/color_90b3b3b3" app:layout_dodgeInsetEdges="right"/>  </androidx.coordinatorlayout.widget.CoordinatorLayout>Copy the code

FloatingActionButton and Snackbar are related to insetEdge.

Behaviors

By specifying Behaviors for the child views of CoordinatorLayout, you can specify how the child views interact and how the child views interact with each other.

Detailed Behaviors are at 👇

AppBarLayout

AppBarLayout nature is an implementation of a CoordinatorLayout AttachedBehavior LinearLayout interface, can be set up to realize some amazing sliding effect.

The applications are as follows:

  • AppbarlayoutAs a generalCoordinatorLayoutThe immediate child ofViewUse it otherwise with ordinaryLinearLayoutThe same.
  • Can be achieved bylayout_scrollFlagsSet up theAppBarLayoutImmediate childViewThe sliding behavior of.AppbarlayoutIt responds to nested external sliding events and then scales and slides the inner children according to specific rulesView.
  • AppbarLayoutThe son ofViewIs not onlyToolbarThey can be anythingView.

The layout_scrollFlags property can be set to the following values:

  • scroll
  • enterAlways
  • enterAlwaysCollapsed
  • exitUntilCollapsed
  • snap
  • snapMargins

Note: The other properties are based on sliding, so scroll is required. app:layout_scrollFlags=”scroll|enterAlways”

The basic usage is as follows:

Scroll the current View will be associated with the slide event. The layout_scrollFlags property must be set to scroll or else it won’t work

Scroll | enterAlways when sliding component in the View will also decline.

Scroll | enterAlways | enterAlwaysCollapsed need to be used together with enterAlways to enhance enterAlways function, when the sliding component in the View will slide show first minHeight height, The View will continue to slide down as the slide component continues to slide to the top.

Scroll | exitUntilCollapsed when slide component on the View also slide at the meeting, until no longer after its height to minHeight incident response.

Scroll | snap slide more than half the View or not more than half hour let go automatically slide on slip and fall.

Scroll | snap | snapMargins need to be used together with the snap to strengthen the function of the snap, when set up layout_marginBottom, layout_marginTop snapMargins for.

Sliding to monitor

AppBarLayout slide listener.

appBarLayout.addOnOffsetChangedListener((appBarLayout, VerticalOffset) -> {// verticalOffset = math. abs(verticalOffset); . / / maximum offset distance int scrollRange = appBarLayout getTotalScrollRange (); });Copy the code

CollapsingToolbarLayout

CollapsingToolbarLayout is a wrapper for the Toolbar that implements a collapsed App Bar. CollapsingToolbarLayout should be used as a subclass of AppBarLayout as follows:

Note that CollapsingToolbarLayout is to enhance the Toolbar, so the Toolbar needs to be added to the CollapsingToolbarLayout layout to take effect.

Self available attributes:

  • app:title: set oftitleIt changes size and position as it slides.
  • app:contentScrim: whenCollapsingToolbarLayoutFold when using the color mask set inside the layoutView.
  • app:statusBarScrim: whenCollapsingToolbarLayoutWhen folded, use the set color to mask the phone’s status bar.
  • app:collapsedTitleTextAppearanceWhen folding, the title style can define the font size and color.
  • app:expandedTitleTextAppearanceWhen you expand the title style, you can define the font size, color, etc.

Note: statusBarScrim is only available on Lollipop, and you need to set Android :fitSystemWindows=”true”.

Child View available property app:layout_collapseMode: The collapse mode of a child View.

  • none: Default, no effect
  • Parallax: Parallax scrolling
  • pinFixed:ViewDoes not change position with sliding events.
  • app:layout_collapseParallaxMultiplier: Speed factor. The value ranges from 0 to 1. A smaller value is sensitive to sliding. The default value is 0.5.

The above sample code is as follows:

<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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/myList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="?attr/actionBarSize"
            app:title="@string/app_name"
            app:contentScrim="@color/black"
            app:expandedTitleTextAppearance="@style/expanded_title_text"
            app:collapsedTitleTextAppearance="@style/collapsed_title_text"
            app:layout_scrollFlags="scroll|snap|enterAlwaysCollapsed|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/appbar_naruto"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>

    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
Copy the code
Use attention

  1. CoordinatorLayout inherits from a ViewGroup, but it uses something like a framLayout, it has a hierarchy, the later layout overlays the previous layout, but it also has a lot to do with the behavior, The app:layout_behavior property can only respond to the direct child layout of the CoordinatorLayout, so don’t beat a dead horse.

  2. CollapsingToolbarLayout If the Toolbar is a child View then the CollapsingToolbarLayout height is the Toolbar height, Collapse ToolbarLayout sets the minHeight property in the collapse ToolbarLayout.

  3. Implement fixed headers: Collapse the header layout after CollapsingToolbarLayout and inside AppBarLayout.

Pay attention to

CoordinatorLayout + RecyclerView display incomplete

  1. Temporary solution: Delete the Toolbar.