Recently busy finished the school of things, and finally successful ran to the company to work (good company did not abandon my food 😂😂). Spent more than half a year in the school, feel a lot of things are not very good, so I think I should find something to do, so choose to learn CoordinatorLayout. In fact, last year, I did a simple study of CoordinatorLayout, but the focus of study at that time was on nesting slide, so it did not have a deep and systematic study of CoordinatorLayout, this is also a pity left last year. So, I think we should make up for it. The author will write a series of articles to introduce CoordinatorLayout in detail, respectively will introduce its basic use, the principle of Behavior analysis and customization, and finally is the extension of CoordinatorLayout, this part of the content is not fixed, the length is not fixed. Reference article

  1. CoordinatorLayout uses detailed explanation: To create a folding suspension effect

1. An overview of the

As the first article in this series, I felt it was necessary to give a brief introduction to CoordinatorLayout. CoordinatorLayout, as the name suggests, coordinates the layout. The so-called coordinator layout, which is basically coordinating who and what? I’m sure you’ll be thinking about these two questions as you learn this layout. In fact, to put it simply, the coordinator layout mainly coordinates the linkage between children. Notice my wording, linkage between children. Maybe some students are still a little strange to linkage. I will give a simple example. For example, we are sliding a RecyclerView. I believe this scenario is quite common. This scenario can be called linkage between children. How does CoordinatorLayout coordinate? It relies on a single plug-in, Behavior. In CoordinatorLayout, each child must carry a Behavior (in fact, it is ok not to carry, it cannot be coordinated), and the CoordinatorLayout coordinates according to the Behavior information carried by each child. It should also be mentioned that Behavior not only assists linkage, but also takes over three processes of Child, similar to RecyclerView LayoutManager. So how does Behavior assist linkage? This involves the related knowledge of nested sliding. In general, Behavior including the whole CoordinatorLayout system is the application and implementation of nested sliding. So, we see how important nested sliding really is. This paper mainly introduces the basic use of CoordinatorLayout, mainly introduces the use of CoordinatorLayout and AppBarLayout. If we want to achieve a folded ActionBar effect, in CoordinatorLayout, AppBarLayout is definitely the preferred control. In the formal introduction of the use of AppBarLayout, we first look at a few flags, which are very important in AppBarLayout.

The name of the value role
SCROLL_FLAG_NO_SCROLL 0x0 Setting this flag will indicate that the View cannot be swiped. In other words, they don’t participate in linkage.
SCROLL_FLAG_SCROLL 0x01 If this Flag is set, the View participates in linkage. Specific effects need to be combined with other flags.
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED 0x02 Set this Flag to indicate that when the View is pushed out of the screen, it will slide until it collapses to the minimum height of the View. Only other views (e.gRecyclerView) Slides to the top to unfold.
SCROLL_FLAG_ENTER_ALWAYS 0x02 Set this Flag, whether the View is sliding off the screen or into the screen, the View will immediately respond to the sliding event, follow the sliding. For example, if the View is folded, whenRecyclerViewWhen you swipe down, the View can follow at any time; And vice versa.
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 0x04 inSCROLL_FLAG_ENTER_ALWAYSBased on that, the Flag adds a limit for folding to a fixed height. In the View drop-down process, the View will first display the minHeight,RecyclerViewContinue to drop down (here toRecyclerViewAs an example). Notice that the Flag is inSCROLL_FLAG_ENTER_ALWAYSThe premises come into force.
SCROLL_FLAG_SNAP 0x08 This Flag indicates that the View has the adsorption function. For example, if the current slide stops and the View is closer to the bottom, it collapses; Otherwise, it expands.

These several flags are very simple, let’s see the specific use, first look at the layout file:

<? 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:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#5FF"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
        <View
            android:background="#FF00FF"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>
    </com.google.android.material.appbar.AppBarLayout>

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

Here are the points needed:

  1. I am inAppBarLayoutThere are two views in there, and one of them is setscrollFlags, one is not set. It won’t fold if it’s not set.
  2. Here,AppBarLayoutIt’s not setBehaviorAnd theRecyclerViewBut it was set up. Just to clarify, in theCoordinatorLayoutInternally, each View must theoretically carry oneBehaviorAnd hereAppBarLayoutIt is not carried because it is present, so it does not need to be declared. (We will see several Settings laterBehaviorHere to buy a pass.

Then, let’s look at the effect:

Here, I will not introduce the effects of other Flags, you can have a try.

3. CollapsingToolbarLayout

Next, look at the CollapsingToolbarLayout again. CollapsingToolbarLayout mainly CollapsingToolbarLayout, let’s see how it is used. First, we look at several flags in CollapsingToolbarLayout:

The name of the value role
COLLAPSE_MODE_OFF 0 Default value, indicating that the View does not have any properties
COLLAPSE_MODE_PIN 1 whenCollapsingToolbarLayoutAfter full shrinkage, the View with this Flag will remain on the screen.
COLLAPSE_MODE_PARALLAX 2 A View with this Flag will scroll with the content and passsetParallaxMultiplierMethod to set the view difference ratio, where 0 means there is no view difference, completely synchronized with the content scroll; 1 indicates that the View is not moving at all. The default view difference is 0.5.

Let’s look at a Demo:

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/demo"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#5FF"
                app:layout_collapseMode="pin" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

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

CollapsingToolbarLayout When using CollapsingToolbarLayout, note that CollapsingToolbarLayout needs to be a child View of AppBarLayout. Then let’s look at the relevant effects:

This article describes the basic use of CoordinatorLayout, which is very simple, but as we can see from the above code, it doesn’t seem to cover it at all. CoordinatorLayout is certainly very important as a coordinator, which will be analyzed in detail in subsequent articles. Here is a simple summary of this article.

  1. useAppBarLayout, we need to pay attention to the differences of the four flags.
  2. CollapsingToolbarLayoutNeed to be asAppBarLayoutIs valid, but also need to pay attention to its three flags.

If not, the next article will analyze the linkage of RecyclerView and AppBarLayout.