Today, I was lazy at home and watched Real Steel. Strongly recommend this movie, who said we programmers don’t know life!! To stand out. You’re right. 😭 this does not come back to knock on the code…

What shall we talk about today? After thinking for a long time, the coolest thing about MaterialDesign is the sliding folding effect at the top! (I think so) at the beginning I was resistant, our teacher in charge (UI big) ran to say this good-looking, can you achieve? How can a man say no…

Then I decisively said “no”. After there is no after, was the eldest brother taught a lesson (don’t feel my eldest brother is very fierce, my eldest brother will only shy smile. That’s what I’m most afraid of… , and then I had to brave scalp to do, in fact, I found or very simple!! So to share with you…

This article focuses on the following aspects:

  • Required attribute analysis
  • App: analysis of the layout_scrollFlags property
  • CoordinatorLayout, AppBarLayout and TabLayout linkage
  • CoordinatorLayout, CollapsingToolbarLayout, AppBarLayout, FloatingActionButton and TabLayout linkage

1. Required attribute analysis

First of all, what is CoordinatorLayout? It is a super FrameLayout, but because it maintains Behavior internally, it can handle linkage issues with internal controls. The inside of the property I will control the description, you assured that you understand!

1.1 CoordinatorLayout properties

  • Android :layout_gravity Controls the position of the child controls
  • App :layout_behavior Specifies the behavior of the row. The most common one is@string/appbar_scrolling_view_behavior) Set the scrolling linkage
  • App :layout_scrollFlags Sets the linkage mode of child controls, which will be explained later

1.2 AppBarLayout properties

Originally I wanted to write this article after I had written all the controls, but I thought you should know what MaterialDesign can bring to us first, and then you will have the motivation to learn. So let’s talk briefly about attribute tags. In fact, this is just to show it, and I’ll explain it in detail later.

  • App: Expanded AppBarLayout is displayed at the beginning, true means it is displayed directly, false means it is not displayed, but it is displayed when you swipe!
  • Android :elevation set the shadow, if you think there is no background must be you did not set the background color, if you do not set the background color will not be by the shadow. Trust me…

1.3 Properties of the ToolBar

For this, I’d like you to check out my MeterialDesign series (1, ToolBar), which should be a good introduction to the ToolBar! Here is no longer wordy!

1.4 TabLayout properties

  • App :tabIndicatorColor The color of the bottom bar
  • App :tabSelectedTextColor Selected text color
  • App :tabTextColor Default text color
  • App :tabGravity alignment
  • App :tabMode mode, divided into fixed and scrollable

1.5 Properties of FloatingActionButton

For this, I hope you have a look at my MaterialDesign series (4) FloatingActionButton, which should be a good introduction to the Toolbar! Here is no longer wordy!

1.5 CollapsingToolbarLayout attributes

This attribute is more…

  • The state of the app: collapsedTitleGravity folding, the position title to prevent top, center and so on
  • The style of the app: collapsedTitleTextAppearance folding state headline
  • The style of the app: headline expandedTitleTextAppearance unfolding conditions
  • App :contentScrim folds into the color of the Toolbaru width
  • App: How to place the title when expandedTitleGravity is expanded
  • App :titleEnabled Specifies whether to display title text
  • App :toolbarId specifies the ToolBar associated with it. If not, the first discovered ToolBar subview is used by default
  • App: change the position of the headline expandedTitleMarginXXX unfolding conditions, through the margin Settings
  • App: layout_collapseParallaxMultiplier set the coefficient of parallax, between 0.0 to 1.0
  • App :layout_collapseMode “parallax”: Fixed mode, finally fixed at the top when folded; Pin “: Parallax mode, which gives a parallax folding effect when folded

Basically the above control properties so much, in fact, I suggest you have time to go to see the API documentation, don’t say do not understand English, MY English 3+ level, really. Google Translate will take care of everything. There are ways I’m sure you don’t know.

2. Property analysis of app:layout_scrollFlags

First of all, my expression may not be appropriate, mind you to try, running on the machine can clearly remember

  • Scroll must be added to the property
  • EnterAlways Returns to fast mode. Every time you slide down, the control that sets this property comes out and scrolls the event accordingly.
  • EnterAlwaysCollapsed does not go into fast return mode, so controls that set this property do not respond to scroll events when you slide down, but only when you reach the end of the slide. But if you set minHeight to respond to the scroll event, then scroll to the minimum height, then stop responding to the scroll event, the scroll control starts responding to the scroll event, when the scroll control reaches the end of the scroll, then display to the maximum height
  • ExitUntilCollapsed is similar to the above, but does not roll out of the screen and remains as high as its maximum height
  • The simplest way to think of a snap is to round it off. Stop scrolling when more than half of the controls with this property are displayed. If less than half are displayed, shy away.

Said so much estimate you also not how to understand, then I stole a few pictures from also maple god’s blog. If feel infringement what, delete immediately!! Thank you in advance… Here directly to help you popular knowledge of the general situation of the setting

  1. app:layout_scrollFlags=”scroll|enterAlways”

  1. app:layout_scrollFlags=”scroll|enterAlways

  1. app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”andandroid:minHeight=”50dp”

  1. app:layout_scrollFlags=”scroll|exitUntilCollapsed”andandroid:minHeight=”50dp”

  1. app:layout_scrollFlags=”scroll|snap”

Basically covers all scrolling operations in development.

3. CoordinatorLayout, AppBarLayout and TabLayout linkage

Take a look at the renderings first

To achieve this effect is very simple, if in the past not dead tired ah! I have to listen for both scrolling and distance. Now I’m done. Thank you. Go straight to the layout! Easy to implement.

<? 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="? attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap|enterAlways"
            app:titleTextColor="@android:color/white">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Pretend to be a headline."
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="? attr/actionBarSize"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/white">

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="TAB 1" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Label 2" />
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/ll_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:gravity="center"
                android:text="There's something at the bottom!!" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 009988"
                android:gravity="center"
                android:text="TAB 1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 002288"
                android:gravity="center"
                android:text="Label 2" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 009922"
                android:gravity="center"
                android:text="Label 3" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#00aa88"
                android:gravity="center"
                android:text="TAB 4" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 999988"
                android:gravity="center"
                android:text="Tag 5" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Copy the code

Note:

  • app:layout_behavior="@string/appbar_scrolling_view_behavior"This is the behavior in response to scrolling, and all responses to scrolling use this
  • All content should be nested in AppbarLayout if you set it to the Toolbar separatelyapp:layout_scrollFlags="scroll|snap|enterAlways"It’s no use! Remember…
  • If you look carefully, my Toolbar is setapp:layout_scrollFlags="scroll|snap|enterAlways"But TabLayout is not set. If TabLayout is set, the TabLayout will scroll away with the Toolbar. I’ve been setting this up on impulse before. So you get the idea. To share with you, I am afraid that some partners like me have bad eyes…

4. Coordinate layout, CollapsingToolbarLayout, AppBarLayout, FloatingActionnButton and TabLayout

This goes straight to the layout! Maybe I am lazy, but I think it is good for you, you think ah, said a pile of are not as good as you see, and then I tell you the truth. My height, lazy can say such a terrible case…

<? 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:theme="@style/AppBarTextStyle"
        android:layout_height="300dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="center"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="bottom"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="Pretend this is a title."
            app:toolbarId="@id/toolbar">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="fitXY"
                android:src="@mipmap/heard_2"
                app:layout_collapseMode="parallax" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/ll_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:gravity="center"
                android:text="There's something at the bottom!!" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 009988"
                android:gravity="center"
                android:text="TAB 1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 002288"
                android:gravity="center"
                android:text="Label 2" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 009922"
                android:gravity="center"
                android:text="Label 3" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#00aa88"
                android:gravity="center"
                android:text="TAB 4" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="# 999988"
                android:gravity="center"
                android:text="Tag 5" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:src="@mipmap/ic_call_white_24dp"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>
Copy the code

Note:

  • Everything is contained in AppBarLayout, but is set up in CollapsingToolbarLayoutapp:layout_scrollFlags
  • There is one in the Toolbarapp:layout_collapseMode="pin"Do not move, otherwise the ToolBar will disappear as you move, if you want to set the parallax effect just set it to the ImageView
  • android:theme="@style/AppBarTextStyle"Set the color of the text, and the code looks like this
<! --AppBarLayout text color --> <style name="AppBarTextStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColor">@android:color/white</item>
    </style>
Copy the code

The rest of the action you can set the properties of the response and just look at it.

Note: if you have RecyclerView nested in your scrolling content, you will find that all RecyclerView responses are invalid when you click on the RecyclerView. The picture stayed there, and that’s what we found. At first I thought it would be nice to ban RecyclerView, but then I realized it didn’t… Then I found a way to add this sentence in RecyclerViewsetNestedScrollingEnabled(false)It’ll be ok. You’ll thank me when you use it…

That’s all for today. If you like, move your hands to show you like, and do not waste my midnight to write this article. Your support is my biggest motivation!