For more information, you can refer to “Immersive status bar +ScrollView Top Scaling +ActionBar Gradient”. Recently, you were using coordinatorLayout to do some special effects, and found that many people on the Internet have gone through the pit, so let’s summarize.

A word against the graph, or dynamic

Mainly looking for a long time, a lot of people said are not detailed enough, and there are a lot of matters needing attention did not explain, so take a lot of detours, this place is to solve those key questions, these questions are clear to really master its use

Example code (XML code for the activity, only need XML configuration can achieve the above cool effect, is not awesome, there is an analysis of oh):

<? 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="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="170dp"
            app:contentScrim="@color/colorAccent"
            app:expandedTitleMarginBottom="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="I'm collapsebar's title>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="The first pin"
                android:textSize="40sp"
                app:layout_collapseMode="pin" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="No Settings, follow and slide"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="Effect of Inspection (Parallax)"
                android:textSize="40sp"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="top"
                android:background="#600f"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="I am the toolbar" />
            </android.support.v7.widget.Toolbar>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Inside appBar, outside Collap."
            android:textColor="#0f0" />

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textColor="#0f0"
                android:textSize="200sp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

Code analysis:

Precautions for use:

1. CoordinatorLayout inherits from viewGroup, but it uses something like framLayout, it has a hierarchy, the later layout overlays the previous layout, but it also has a lot to do with the behavior property, the app:layout_behavior property, just Coord Only direct child layouts of inatorLayout respond, so don’t beat a dead rout

2. CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout can be combined to produce such a magical effect, do not take it for granted to play out of CoordinatorLayout (I also had this idea when I first contacted), exhausted you

3. AppBarLayout: Inherits from lineLayout and the other attributes follow lineLayou when it is used. It already responds to the Layout_behavior attribute of CoordinatorLayout, so it can make so many special effects

4. AppBarLayout’s direct child controls can set the property :layout_scrollFlags

  • 1. Scroll | exitUntilCollapsed set this property if AppBarLayout child controls directly, the child controls can scroll, scroll up NestedScrollView parent layout (general CoordinatorLayout), will be folded to the top and down roll NestedScrollView must scroll to the top to pull out the layout
  • 2. Scroll | enterAlways: as long as you scroll down this layout will be displayed, as long as you slide the layout will shrink up
  • 3. Scroll | enterAlwaysCollapsed: NestedScrollView scrolls down to the bottom of the layout will be displayed
  • 4. If you do not set the change properties, the change layout cannot slide

CollapsingToolbarLayout CollapsingToolbarLayout CollapsingToolbarLayout CollapsingToolbarLayout CollapsingToolbarLayout Inherits from framLayout, so its direct subclasses can set layout_gravity to control the display position, and its direct subclasses can use properties as app:layout_collapseMode: Desirable values as follows:

  • 1. Pin: During sliding, the self layout is fixed in its position until the CollapsingToolbarLayout is fully collapsed or expanded
  • 2. Parallax: inspect effect, in the process of sliding, sliding or falling visit will have the effect, I don’t know what inspection result oneself see GIF image (layout_collapseParallaxMultiplier parallax factor Parallax: 0 to 1. When parallax is set to use this parallax property, use it to adjust the parallax effect you want.
  • 3. Do not set: Follow the slide of NestedScrollView, it will follow the distance of the slide of NestedScrollView

6. Toobar is best placed in CollapsingToolbarLayout (as in CollapsingToolbarLayout), but in view of CollapsingToolbarLayout, the toolbar is also set to layout_gravit Y and APP :layout_collapseMode has some complications. We won’t explain as we normally only put the toolbar at the top (don’t set layout_gravity, default) and set app: layout_gravity to pin and collapsemode to the top. Try other things if you are interested in collapsemode.

7. CollapsingToolbarLayout as long as the CollapsingToolbarLayout contains the Toolbar, the CollapsingToolbarLayout height is the toolbar height MinHeight attributes

CollapsingToolbarLayout when CollapsingToolbarLayout collapses to the top, it will collapse in the top layer and all the layout, including the Toolbar, will be completely collapsed.

CollapsingToolbarLayout CollapsingToolbarLayout is a CollapsingToolbarLayout property that CollapsingToolbarLayout is a CollapsingToolbarLayout property that CollapsingToolbarLayout is a CollapsingToolbarLayout property that CollapsingToolbarLayout Title title, if you set it to when you fold it it animates over the folded part, it expands when you pull it out, it’s a fun expandedTitleMargin When you expand the title text the margin of the text, and of course the marginTop and so on, imagine that App: collapsedTitleTextAppearance = “@ style folding/Text” of the title style can be defined inside the font size, color, etc App: collapsedTitleTextAppearance = “@” style/Text1 folded inside the style of the title when they can define the font size, color, etc Of course there are also some, try yourself, now these have quite enough * *

As far as CollapsingToolbarLayout is aware, view the CollapsingToolbarLayout in the CollapsingToolbarLayout XML file as far as CollapsingToolbarLayout is aware. You might ask what happens in the AppBarLayout before CollapsingToolbarLayout? So the folding layout doesn’t work. It won’t fold.

conclusion

CoordinatorLayout is a “enhanced version” of FrameLayout, we only need to know its two roles

  • (1) Used as the top-level layout manager of the application
  • (2) Realize the custom interaction behavior by specifying the behavior for the sub-view. When we do Material Design-style apps, we usually use CoordinatorLayout as the root node of the layout to achieve specific UI interactions.

CollapsingToolbarLayout Fragment we can use it to do a variety of commonly used effects, such as: Toolbar + TabLayout

The more you can refer to: https://www.jianshu.com/p/e9df8c501f92

I hope you don’t take detours. Actually write post is quite good, because when you write is summarized for oneself, use convenient time after their find, if you don’t write may need to learn again the next time you’re using, so whatever the post, you can own must write more, and write notes is different also, because the post is to let others see you, you will try to write a little bit better, oneself also will save trouble, write notes It’s for myself. I’m not afraid to lose face.

Immersive status bar +ScrollView top scaling +ActionBar gradient

My Android Refactoring Journey: The Framework

Interview essential UI refresh big decryption