It’s been a long time since I started the new chapter of the Android native development series, but today I’m giving you amway’s new CoordinatorLayout. To understand the role of CoordinatorLayout, imagine that we are listening to a feast of music ina theatre. Soprano and soprano, accompanied by piano and violin, work together to play beautiful music. The CoordinatorLayout plays the role of coordinating the actions and cooperation of all parties ina musical performance according to the score and rhythm.

For Bai, CoordinatorLayout is not so much a layout control as a behavior specification and constraint. It does not actually handle the layout and position of the internal controls visually. Instead, it is more concerned with internal behavior and its synchronization. One of the most common applications we use for CoordinatorLayout is synchronous scrolling. First let’s introduce the four treasures of the CoordinatorLayout family: NestedScrollView, AppbarLayout, CollapsingToolBarLayout, and toolbars. CoordinatorLayout needs these four babies for it to really be powerful. We’re going to do this with specific examples.

                                        

Figure 1 CoordinatorLayout is used

The CoordinatorLayout, as shown in the diagram above, usually consists of two parts: the body, which displays lists or large paragraphs of text, is usually contained in the NestedScrollView or RecycleView. The dependency section generally displays custom header information and is usually included in the AppBarLayout and used with the CollapsingToolBarLayout and toolbars.

And CoordinatorLayout principle is to define a Behavior constraints is called CoordinatorLayout. Behaviors. While AppBarLayout implements a CoordinatorLayout. Behaviors is called ScrollViewBehavior. NestedScrollView establishes a link between AppBarLayout’s ScrollViewBehavior and AppBarLayout through the app: Layout_Behavior property. This link is instantiated as synchronous scrolling. The link needs to be inside the CoordinatorLayout for it to be valid. This is somewhat similar to the subscription model mechanism. So let’s look at a more practical example:

                            

Figure 2 CoordinatorLayout practice

Figure 2 shows a page for book content summary and table of contents browsing. There are two parts to the book: The book’s publishing information and a summary of the book’s content.

The key members of the choir are in place

CoordinatorLayout serves as a coordination layout, which builds a bridge between internal members and coordinates their behavior. So there is always a priority as an object to be coordinated. Just as the members of the choir are mainly soprano and soprano, supplemented by piano or string accompaniment. In CoordinatorLayout’s choir, we usually leave a large section to our main member, NestedScrollView. In the case of the actual example above, which refers to the summary of the book, Android Studio Development in action, the code is as follows:

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>

    <TextView
        android:layout_marginTop="@dimen/big_spacing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/book1_introduction"
        android:padding="@dimen/small_spacing"/>
</androidx.core.widget.NestedScrollView>
Copy the code

Here we use NestedScrollView to contain a TextView, and the text of the TextView is the summary of the book. Why do I use NestedScrollView here instead of ScrollView? Because NestedScrollView extends the behavior of the ScrollView to subscribe to and notify the CoordinatorLayout when it scrolls. So ScrollView doesn’t do anything. This is also the small white front to introduce the auspicious four treasures. Unless you customize, there are only fixed collocations. Just like good people, they’re always different.

                                   

Figure 3 key members

Accompaniment in place

After our CoordinatorLayout lead singer is in place, we need specific accompaniment: publishing information for the book in Android Studio development. Usually we display it in the header, where we need to use AppBarLayout and the ToolBar. We know that the default Activity has an ActionBar. However, the ActionBar does not handle header customization well. So Google has defined a set of customizable headers:

  1. ToolBar: A ToolBar that defines titles, navigation buttons, and other action menus.
  2. CollapsingToolBarLayout: The header CollapsingToolBarLayout container may contain additional content.
  3. AppBarLayout: The overall header layout container.

The specific code is as follows:

<com.google.android.material.appbar.AppBarLayout android:id="@+id/appbar" 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="wrap_content" app:contentScrim="@color/colorPrimary"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@mipmap/header" ></ImageView> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginTop="@dimen/big_spacing"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/book1_name" android:padding="@dimen/small_spacing" android:gravity="center" android:textColor="@color/colorWhite" android:textSize="@dimen/big_title_size"/> <TextView Android :layout_height="wrap_content" Android :text=" Android :paddingTop="@dimen/small_spacing" Android :paddingBottom="@dimen/small_spacing" android:paddingLeft="@dimen/default_spacing" android:paddingRight="@dimen/default_spacing" android:textColor="@color/colorWhite" /> <TextView android:layout_width="match_parent" Android :layout_height="wrap_content" android:text=" Tsinghua University Press "Android :paddingTop="@dimen/small_spacing" Android :paddingBottom="@dimen/small_spacing" android:paddingLeft="@dimen/default_spacing" android:paddingRight="@dimen/default_spacing" android:textColor="@color/colorWhite" /> <TextView android:layout_width="match_parent" Android: layout_height = "wrap_content" android: text = "ISBN: 9787302512608" android:paddingTop="@dimen/small_spacing" android:paddingBottom="@dimen/small_spacing" android:paddingLeft="@dimen/default_spacing" android:paddingRight="@dimen/default_spacing" android:textColor="@color/colorWhite" /> </LinearLayout> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="? actionBarSize" app:navigationIcon="@drawable/ic_baseline_arrow_back_24"/> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout>Copy the code

When the head is added, the effect is as follows:

                               

Figure 4 adds the header

But really, at this point we are not using any of the CoordinatorLayout functionality. The same function can be achieved with other layout controls. And on a slightly odd note, you’ll notice that the NestedScrollView is underneath the AppBarLayout, partially obscured.

So how to deal with this problem?

Chorus director

In the same way that the chorus needs a conductor to coordinate the lead vocals and accompaniment. A bridge is also needed to coordinate the NestedScrollView and AppBarLayout within the CoordinatorLayout. The bridge is app:layout_behavior. App :layout_behavior applies to NestedScrollView, specifying a specific path. NestedScrollView can use this specific path to influence and change the contents of AppBarLayout from the outside. So here we need to specify the ScrollingViewBehavior of AppBarLayout:

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
Copy the code

When you specify the Behavior, the NestedScrollView will know what to do with the AppBarLayout, as if it had made an agreement with the AppBarLayout, and the NestedScrollView will not be blocked by the AppBarLayout:

                                    

Figure 5 Establishing a connection

The accompaniment

When the lead singer, accompaniment and conductor are ready, the performance can begin. When the conductor waved his baton, the lead singer began to sing. But the piano and violin didn’t come along? Just like when NestedScrollView is scrolling, AppBarLayout doesn’t react. This is because AppBarLayout is an accompanist group, but we have not defined the behavior of the response to receive the command signal. The response behavior is: app:layout_scrollFlags.

App :layout_scrollFlags specifies the response of the piano and violin accompaniment after receiving the command signal:

  • -Howard: noScroll means you do whatever you want.

  • “Scroll” means I’m moving with you.

  • EnterAlways: cannot be used alone as a subdivision of the Scroll behavior, and needs to be configured with the Scroll, as well as CollapsingToolBarLayout. The effect is that the header of the AppBarLayout rolls into the screen first, followed by the NestedScrollView.

  • EnterAlwaysCollapsed: is a further subdivision of enterAlways and needs to be configured together with Scroll and enterAlways. EnterAlwaysCollapsed further divides the AppBarLayout header content into expanded content and zoomed content. As in the actual example above, AppBarLayout scales to display only the ToolBar, and images and book publishing information will not be displayed until AppBarLayout is fully expanded. There are three scrolling objects: the Content of the NestedScrollVIew, the ToolBar, and AppBarLayout, whatever else needs to be displayed. And enterAlwaysCollapsed means a change in the order of scrolling into: ToolBar -> NestedScrollView -> AppBarLayout Other content.

  • Collapsed: not the same as enterAlways deals with the reaction effect of tumbling off screen Much like enterAlwaysCollapsed the scrolling effect of AppBarLayout has been planned more carefully. ExitUntilCollapsed means AppBarLayout other content first scroll out of the screen, then NestedScrollView, then ToolBar.

Later we will use the example of exitUntilCollapsed app:layout_scrollFlags to configure the child content in AppBarLayout. ** In addition, the app layout_scrollFlags function only as the ToolBar and CollapsingToolBarLayout, and the other controls do not react to the layout_scrollFlags. ** For example, if we put the LinearLayout directly inside the AppBarLayout and configure the app:layout_scrollFlags, the LinearLayout will not react. Here we collapse the toolbarLayout app:layout_scrollFlags as follows:

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentScrim="@color/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">
Copy the code

The timing

Now that we’ve introduced the AppBarLayout, understand the CollapsingToolBarLayout. CollapsingToolBarLayout is a scalable toolbar layout container in the CollapsingToolBarLayout. What it does is fine control over the scaling properties of the content inside. And how do you do that? It’s timing. Just like the chorus chorus needs accompaniment, but the accompaniment is not arbitrary, need to pay attention to point. When the accompaniment should rise, when the accompaniment should stop, is to pay attention to the timing. CollapsingToolBarLayout helps you set the timing in the collapse toolbarlayout: when to expand, when to fold, when to step in, and when to expand.

And control the timing of magic wand is app: layout_collapseMode and app: layout_collapseParallaxMultiplier. App :layout_collapseMode controls the schema for collapsemode:

  • Pin: Hover, meaning not to participate in scaling.

  • Parallax: Parallax, which means it participates in scaling and can be used with other controls.

When we choose parallax as pp: layout_collapseMode, we can through the app: layout_collapseParallaxMultiplier further optimize the timing of the scale. App: layout_collapseParallaxMultiplier is a high proportion of value, its meaning is to tell CollapsingToolBarLayout when scaling ratio reached a high level of a few percent, pack up to expand or content. For example, in case we give CollapsingToolBarLayout ImageView and LinearLayout at the same time set the app: layout_collapseParallaxMultiplier = “0.7”, This means that when you shrink to 30% of the maximum height, the ImageView and LinearLayout should be hidden or expanded, as follows:

<ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@mipmap/header" App: layout_collapseMode = "parallax" app: layout_collapseParallaxMultiplier = "0.7" > < / ImageView > < LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginTop="@dimen/big_spacing" app:layout_collapseMode="parallax" App: layout_collapseParallaxMultiplier = "0.7" >Copy the code

Also collapse the ToolbarLayout app:contentScrim. App :contentScrim is similar to a pocket clause. If there is no custom image background, app:contentScrim is displayed by default. App :contentScrim could be a color or it could be another image. In this example, I set the background color to purple, as shown below:

                              

                              

Figure 6. Before and after shrinkage

Special accompaniment

In addition to collapsing the chorus, we can also add percussion accompaniment to the chorus by using the AppBarLayout and CollapsingToolBarLayout. This special accompaniment requires app: layout_Anchor and app:layout_anchorGravity, the so-called anchor. App: layout_Anchor and app:layout_anchorGravity enable special controls such as FloatingActionButton

You can position specific controls and react with them, similar to what RelativeLayout does, but with a few new features. In our example, we build an edit button for FloatingActionButton and anchor it in the bottom right corner of the AppBarLayout as follows:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_baseline_add_24"
    android:layout_marginRight="@dimen/small_spacing"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right"/>
Copy the code

The last

At this point we’ve almost finished the presentation of CoordinatorLayout. CoordinatorLayout is especially hard to talk about because it’s not as straight as LinearLayout and RelativeLayout. Many effects require a set of controls to implement them. Either way, we learned something new, didn’t we? It always pays off. Finally, let’s take a look at the finished product. And don’t forget to use AppBarLayout and ToolBar, Please in AndroidManifest. XML change the theme of the App to a certain NoActionBar such as android: theme * * = “@ style/theme. AppCompat. Light. NoActionBar”. 六四风波