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.

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:

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.