My CSDN blog launched at the same time: Play with AppBarLayout, more cool top bar

The last article on CoordinateLayout [The use of CoordinateLayout is so simple] explained the use of CoordinateLayout, and today we are going to talk about a few views that are often used with it: AppBarLayout, Collapse ToolbarLayout, and Toolbar Many people have written about the use of these layouts, but they have not specifically explained the function of each View and how to use it. View CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout Finally let you master these three views thoroughly!

In fact, these three views are for our usual ActionBar, that is, for the top Bar of our App to play a variety of tricks. Let’s scroll down and see what they have done with the “top Bar” of our App.

1 Toolbar

Toobar is primarily a replacement for ActionBar, in other words, Toolbar can do anything ActionBar can do. If you are familiar with ActionBar usage, you will find that the Toolbar is very simple to use. Ok, since this is a replacement, of course, the Toolbar should be used to hide the ActionBar

There are many ways to hide an ActionBar, either in code or in a configuration file, but we’re going to hide it in a configuration file. Add the following two lines to the AppTheme tag in our styles.xml file:

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>Copy the code

Of course, you can also create a new

The next step is to put the Toolbar into the layout file (no explanation) :

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:background="? attr/colorPrimary"
        android:layout_height="? android:attr/actionBarSize"  />Copy the code

Finally, Toobar is used as an “ActionBar”

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Here's the Title.");
        toolbar.setSubtitle("Here are the subheadings.");
        toolbar.setLogo(R.drawable.icon); 
        setSupportActionBar(toolbar);Copy the code

You can set the Toolbar Logo, title, subtitle, etc. There are many other Settings to play with. Of course, you can also set these in the layout file, in the layout file Settings do not write, Hongyang Dagod has a blog to write a good “Android 5. X Theme and ToolBar actual Practice” can go to reference.

Look at the results:

If the Toolbar is just a replacement for the old ActionBar, that’s not very creative. There’s no need to replace them because they all behave the same and don’t make them any easier to use than ActionBar. The ActionBar is fixed at the top and cannot be moved, which I think is the biggest drawback, while our ToolBar allows us to place it wherever we want, providing a lot of flexibility and effect.

As you can see, the Toolbar is not interesting at all, not complex at all. Let’s move on to adding a parent View over the Toolbar to make the Toolbar more interactive.

2 AppBarLayout

AppBarLayout inherits from the LinearLayout, which is vertical. So you can use it like a vertical layout LinearLayout. AppBarLayout is a material design concept added to the LinearLayou that allows you to customize what the child views inside a scrollable View do when the scroll gesture changes.

Note that a scrollable View mentioned above can be interpreted as a ScrollView. What to make of the above statement? That is, when a ScrollView scrolls, you can customize what actions your top bar should perform (scroll along, stay still, etc.). So which movable View is a movable View? It’s up to you! How to specify, we’ll talk about that later.

2.1 Action of AppBarLayout child View

What actions can app:layout_scrollFlags set to perform by adding app:layout_scrollFlags to the layout? They are as follows:

(1) Scroll: The View whose value is set to Scroll will move along with the scroll event.

What does that mean? In simple terms, when a ScrollView is rolled, the View is also rolled, as if the View also belonged to the ScrollView.

A GIF is enough to illustrate:

Corresponding layout file

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="? android:attr/actionBarSize"
            android:background="? attr/colorPrimary"
            app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>Copy the code

(2) enterAlways: A View whose value is set to enterAlways. When ScrollView scrolls down, the View will scroll down directly. I don’t care if the ScrollView is scrolling.

Watch a cartoon (Y(^o^)Y) (ToolBar height set to:? Android: attr/actionBarSize, app: layout_scrollFlags = “scroll | enterAlways”) :

(3) exitUntilCollapsed: views with values of exitUntilCollapsed, which slide upwards until the remaining heights reach their minimum and then respond to the internal sliding events of ScrollView.

How do you understand that? When a ScrollView slides up, the View first “grabs” the slide event, and the View performs the slide until it reaches the minimum height, then “returns” the slide event and lets the ScrollView slide up. Take a look at this GIF and feel for it (the height is set to 200dp and the minimum height is set to? Android: attr/actionBarSize, app: layout_scrollFlags = “scroll | exitUntilCollapsed”) :

EnterAlwaysCollapsed: EnterAlways is an additional option to enterAlways, usually used with enterAlways, which means that when a View “appears” down, the first effect is enterAlways. When the height of the View reaches the minimum height, the View temporarily stops scrolling down. Until the ScrollView slides to the top and stops sliding, the View continues sliding until it reaches the top of the View.

Give it a feel for the GIF (the height is set to 200dp and the minimum height is set to? Android: attr/actionBarSize, app: layout_scrollFlags = “scroll | enerAlways | enterAlwaysCollapsed”) :

2.2 Associate AppBarLayout with ScrollView

AppBarLayout is associated with a ScrollView when the ScrollView scrolls. We noticed that the action between AppBarLayout and ScrollView is “interdependent”. Isn’t that what we learned in the previous article “CoordinateLayout is so easy to Use”? You take ScrollView and AppBarLayout as child views for CoordinateLayout, and then you write a Behavior, In this Behavior, the ScrollView should always be under the AppBarLayout. Or should I scroll inside the ScrollView without changing the position of the AppBarLayout, and so on, and so forth, that’s something that can be handled in Behavior. You can go and write behaviors for your ScrollView. However, we can see that the function of AppBarLayout is very complicated. If we define the effect by ourselves, the code is very complicated, and we need to consider many aspects. Notice that it doesn’t inherit from ScrollView, it inherits from FrameLayout, but it implements it as a ScrollView.

Put NestedScrollView into our layout file

 <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <! -- Put your content here -->

    </android.support.v4.widget.NestedScrollView>Copy the code

Notice there’s a property: App :layout_behavior=”@string/appbar_scrolling_view_behavior”, which specifies the Behavior. Appbar_scrolling_view_behavior Android. Support. The design. The widget. AppBarLayout $ScrollingViewBehavior interested can go to the analysis of the source code.

Now we can use AppBarLayout. Next we collapse the rest of the CollapsingToolbarLayout!

3 CollapsingToolbarLayout

CollapsingToolbarLayout is a ViewGroup that rewraps the Toolbar and primarily collapses the App Bar effect into a CollapsingToolbarLayout. It needs to be placed inside the AppBarLayout and used as a direct child of the AppBarLayout. CollapsingToolbarLayout CollapsingToolbarLayout consists of several functions in the collapse view:

Collapsing Title (Collapsing Title) : Title is the largest when all the layout content is displayed, but becomes smaller as the View moves off the top of the screen. You can set the title by calling setTitle.

(2) Content scrim: Decide whether to “cover the View with gauze” according to whether the scrolling position reaches a threshold. You can use setContentScrim(Drawable) to set the image of the gauze.

(3) Status bar scrim: Determine whether to “cover” the Status bar according to whether the scrolling position reaches a threshold. You can use setStatusBarScrim(Drawable) to set the gauze picture, but it only works on LOLLIPOP devices.

Parallax scrolling children: Select Parallax scrolling for the current layout. (PS: to make this View scroll slightly slower than other normal views). Set the layout parameter app:layout_collapseMode to Parallax

Subviews can choose whether to maintain a fixed position in the global space, which is very useful for the Toolbar as the Toolbar can maintain a fixed position without being affected by movement when the layout is moved. Set app:layout_collapseMode to PIN.

With these concepts in mind, let’s take a look at the layout

<?xml version="1.0" encoding="utf-8"? >
<android.support.design.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" >


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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="? android:attr/actionBarSize"
                app:layout_collapseMode="pin"  />

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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>Copy the code

CollapsingToolbarLayout CollapsingToolbarLayout will collapse the title in the view as the image slides with parallax and the Toolbar is fixed in the view

If you want to drag the status bar is in the process of transparent, can add app: in CollapsingToolbarLayout statusBarScrim = “@ android: color/transparent”, And call getWindow in onCreate (). AddFlags (WindowManager. LayoutParams. FLAG_TRANSLUCENT_STATUS) sets the status bar to transparent is ok ~

Offer the source code, please take it: download.csdn.net/detail/huac…