Android Coordinator Layout (1) Preliminary Exploration of Coordinator Layout

Keywords: Android Attribute

Believe that many people have used CoordinatorLayout or known about it. This time, let's talk about this lovely and hateful control.For me, love is because its "sync" function is often 66666, and because sometimes sliding is really a card.

1. Layout description

Okay, I don't want to be more pressing when I introduce something. Let's look directly at the layout. Many people don't know why the layout using this control should do this when they first come into contact. Let's have a good analysis.

1. Direct use
<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content"
    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">

    <TextView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorAccent"/>

    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
    
</android.support.design.widget.CoordinatorLayout>

Now I want to use CoordinatorLayout alone to achieve the effect of folding (note: CoordinatorLayout means folding the layout), and you will find that the above code does the following:


image.png

Blind JB teasing, which has a folding effect, is at most a FrameLayout. Yes, if you just use CoordinatorLayout alone, it is a FrameLayout effect, so it should be used with AppBarLayout and CollapsingToolbarLayout, which is why there is always AppBarLayout with CoordinatorLayout.
This also demonstrates a feature of CoordinatorLayout - > Coordination, which is useless when used alone and is a coordinating effect.

2,CoordinatorLayout + Toolbar

Well... even though I'm using a custom title bar and don't use a Toolbar, write it anyway.

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content"
    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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>

Regardless of AppBarLayout, you think the controls you need to collapse are all placed in AppBarLayout, and then app:layout_behavior="@string/appbar_scrolling_view_behavior" in RecyclerView. When you mean to have the view under AppBarLayout, you are still FrameLayout.

Effect:
If you write according to this layout, you will find an effect:
Before sliding:


image.png

After sliding:


image.png

The RecyclerView is under the Toolbar anyway, but the Toolbar does not collapse when it slides.

This requires an important attribute:
app:layout_scrollFlags

 <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

You can't collapse until you add this property where you want it to collapse, which will be explained in more detail.
There is also a property: fitsSystemWindows
As you'll see later on, it's OK to leave this unchanged.

Posted by trekerboy on Fri, 31 May 2019 09:20:03 -0700