The use of Coordinatorlayout in Android 5.0 _android

Coordinatorlayout implements a variety of scrolling effects mentioned in the material design. The framework currently provides several ways to work without having to write animated code, including:

* Let the floating operation buttons slide up and down, leaving room for the snackbar.
* Expand or shrink toolbar or head to allow more space in the main content area.
* Control which view should be expanded or shrunk, and its display size scale, including the Parallax scrolling effect animation.

Floating operation buttons and Snackbar

Coordinatorlayout can be used to match the Layout_anchor and Layout_gravity properties of the floating action buttons to create a floating effect.
When Snackbar is displayed, it often appears at the bottom of the screen. To make room for the Snackbar, the floating action button needs to move up.

As long as the coordinatorlayout is used as the basic layout, animations that move up are automatically generated. The floating action button has a default behavior to detect Snackbar additions and make the buttons appear above Snackbar animations such as Move up and Snackbar.

 <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.v7.widget.recyclerview android:id=" @+ Id/rvtodolist "android:layout_width=" match_parent "android:background=" #9d9d9d "android:layout_height=" Match_ Parent "/> <android.support.design.widget.floatingactionbutton android:id=" @+id/fab "android:layout_width=" Wrap_content "android:layout_height=" wrap_content "android:layout_gravity=" End|bottom "android:layout_margin=" 16DP "app:layout_anchor=" @id/rvtodolist "app:layout_anchorgravity=" Bottom|right|end "/> <!--app:layout_ Anchor: This means that the Fab floating button is displayed in which layout area. and set the position of the current anchor point app:layout_anchorgravity: The meaning of the fab floating button in this layout area of the specific location.
 The Fab floating button, which has two properties in common, can also fold and disappear and appear. --> </android.support.design.widget.CoordinatorLayout> 

protected void OnCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Setcontentview (r.layout.activity_main);
  Findviewbyid (R.id.fab). Setonclicklistener (New View.onclicklistener () {
   @Override public
   void OnClick (View V {
    Snackbar.make (V, "test", Snackbar.length_long)
      . Setaction ("Cancel", new View.onclicklistener () {
       @ Override public
       void OnClick (View v) {
        ///The Click event here represents the response event Toast.maketext after clicking the Erase action
        (Mainactivity.this, "ASDASD", Toast.length_short). Show ();
       }
      . Show ();}}
  );
 

Expansion and contraction of toolbar

First you need to make sure that you are not using the outdated Actionbar, using toolbar as Actionbar. Again, Coordinatorlayout is needed as the primary layout container.
We must use a container layout: Appbarlayout to allow toolbar to respond to scrolling events. Responding to scrolling events

<android.support.design.widget.appbarlayout
  android:id= "@+id/appbar"
  android:layout_width= "Match_ Parent "
  android:layout_height=" @dimen/detail_backdrop_height "
  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>

Then we need to define the link between the Appbarlayout and the scrolling view. Add App:layout_behavior to Recyclerview or any view that supports nested scrolling such as Nestedscrollview. The support library contains a special string resource @string/appbar_scrolling_view_behavior, It matches the appbarlayout.scrollingviewbehavior to inform Appbarlayout when a scrolling event has occurred in this particular view, which is set to be placed above the view that triggers the event (scrolling). Note: According to the official Google Docs, Appbarlayout must now be the first child view nested inside the coordinatorlayout.

<android.support.v7.widget.recyclerview
  android:id= "@+id/rvtodolist"
  android:layout_width= "Match_ Parent "
  android:layout_height=" match_parent "
  app:layout_behavior=" @string/appbar_scrolling_view_ Behavior ">

The view defined inside the appbarlayout as long as the App:layout_scrollflags attribute is set, Can be triggered when the Recyclerview scrolling event occurs: When Coordinatorlayout discovers that the attribute is defined in Recyclerview, it searches for other view that it contains, to see if any view is associated with the behavior. Appbarlayout.scrollingviewbehavior describes the dependencies between Recyclerview and Appbarlayout. Any scrolling event in the Recyclerview will trigger a change in the view within Appbarlayout or appbarlayout.

<android.support.design.widget.appbarlayout
  android:layout_width= "match_parent"
  android:layout_ height= "Wrap_content"
  android:fitssystemwindows= "true"
  android:theme= "@style/ ThemeOverlay.AppCompat.Dark.ActionBar ">

   <android.support.v7.widget.toolbar
    android:id=" @+id/ Toolbar "
    android:layout_width=" match_parent "
    android:layout_height=" "Attr/actionbarsize"
    app: layout_scrollflags= "Scroll|enteralways"/>

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

App:layout_scrollflags is a very important attribute, it has a value of five of the main, the following I explained separately:

1.scroll means that collapsingtoolbarlayout can be scrolled (without setting the ImageView of the head will not be folded), if you want all view can scroll out of the screen, you must set a flag, if not set flag view, will be pinned to the top of the screen.
2.enterAlways indicates that the scroll control at the bottom is scrolled down, the head is displayed, and when this flag is set, scrolling down will cause the view to become visible. When ScrollView scrolls down, the view scrolls down directly. Regardless of whether the scrollview is scrolling.
3.enterAlwaysCollapsed indicates that when the bottom scroll control scrolls to a peak, the head is displayed, and when the ScrollView goes up, the first view takes the sliding event "away" and the view executes the slide until the minimum height is slid, and the slide event "also" Go back and let the ScrollView slip inside.
4.exitUntilCollapsed means that the head folds to the minimum height (toolbar height), is no longer folded, is the enteralways additional options, commonly used with enteralways, it refers to, view in the downward "appearance", First is the enteralways effect, when the view height reaches the minimum height, the view is not scrolled down until the scrollview slides to the top and no longer slides, and the view continues to slide until the top of view is closed.
5.snap means that if you stop sliding during the slide, the head will be folded (either back to the original or folded into a toolbar).
Remember to put the view with scroll flag in front of it so that the view can be withdrawn normally and the fixed view stays at the top.

Make folding effect

If we want to make the folding effect of toolbar, we must put the toolbar in the Collapsingtoolbarlayout:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:tools= "Http://schemas.android.com/tools" xmlns:app= "Http://schemas.android.com/apk/res-auto" Android: Layout_width= "Match_parent" android:layout_height= "match_parent" android:id= "@+id/main_content" tools:context= "
  Wxt.coordinatorlayout.AppBarLayout "> <android.support.design.widget.appbarlayout android:id=" @+id/appbar " Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" > < Android.support.design.widget.CollapsingToolbarLayout android:id= "@+id/collapsing_toolbar" android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:fitssystemwindows= "true" app:contentscrim= "? Attr/colo Rprimary "app:expandedtitlemarginend=" 64DP "app:expandedtitlemarginstart=" 48DP "app:layout_scrollflags=" Scroll|ex
  Ituntilcollapsed "> <android.support.v7.widget.toolbar android:id=" @+id/toolbar "  Android:layout_width= "Match_parent" android:layout_height= "Attr/actionbarsize" app:layout_scrollflags= "Scroll|e" Nteralways "></android.support.v7.widget.Toolbar> </
 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 "app:layout_behavior=" @string/appbar_scrolling_view_behavior "> <textview android:layout_width=" MATC H_parent "android:layout_height=" wrap_content "android:text=" aaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\ Naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\ Naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\naaaa\

 naaaa\n "/> </android.support.v4.widget.NestedScrollView>

Now the effect is:

Usually, we all set the title of toolbar, and now we need to set the title on Collapsingtoolbarlayout instead of toolbar.

Collapsingtoolbarlayout Collapsingtoolbar = (collapsingtoolbarlayout) Findviewbyid (R.id.collapsing_toolbar);
Collapsingtoolbar.settitle ("Title");

Making Parallax effect Collapsingtoolbarlayout

Collapsingtoolbarlayout also allows us to make more advanced animations, such as putting a imageview inside and fading out when it folds. At the same time, the height of the title will change as the user scrolls.

The Collapsingtoolbarlayout function is to provide a folding toolbar, which inherits to Framelayout, sets Layout_scrollflags to it, It can control controls contained in Collapsingtoolbarlayout (such as: ImageView, Toolbar) to make corresponding Scrollflags scrolling events when responding to Layout_behavior events (remove screen or anchor on top of screen) )。

Use Collapsingtoolbarlayout:

<android.support.design.widget.appbarlayout android:layout_width= "match_parent" android:layout_height= "256DP" Android:fitssystemwindows= "true" > <android.support.design.widget.collapsingtoolbarlayout android:id= "@+id/ Collapsing_toolbar_layout "android:layout_width=" match_parent "android:layout_height=" Match_parent "App:contentSc" Rim= "#30469b" app:expandedtitlemarginstart= "48DP" app:layout_scrollflags= "scroll|exituntilcollapsed" > <Imag
    Eview android:layout_width= "match_parent" android:layout_height= "match_parent" android:scaletype= "CenterCrop"
   android:src= "@mipmap/bg" app:layout_collapsemode= "parallax" app:layout_collapseparallaxmultiplier= "0.7"/> <android.support.v7.widget.toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" Android : layout_height= "? attr/actionbarsize" app:layout_collapsemode= "pin"/> </ Android.support.design.widget.collapsingtoolbarlayout> </androId.support.design.widget.appbarlayout>
 

We set up a ImageView and a toolbar in the Collapsingtoolbarlayout. And put this collapsingtoolbarlayout into the appbarlayout as a whole.

1, in the collapsingtoolbarlayout:

Some properties are also set up to briefly describe:

Contentscrim-Sets the background color when the full collapsingtoolbarlayout collapses (shrinks).

Expandedtitlemarginstart-Sets the distance that title fills to the left when the expansion is not yet contracted.

2, in the ImageView control:

We have set up:

Layout_collapsemode (collapse mode)-Has two values:

Pin-When set to this mode, the toolbar can also remain on the screen when the collapsingtoolbarlayout is completely shrunk.

Parallax-When the content scrolls, the view (such as ImageView) in the collapsingtoolbarlayout can also scroll at the same time to achieve the parallax scrolling effect, usually and layout_ Collapseparallaxmultiplier (set parallax factor) to be used in combination.

Layout_collapseparallaxmultiplier (parallax Factor)-sets the parallax scrolling factor, the value is: 0~1.

3, in the Toolbar control:

We set the Layout_collapsemode (folding mode): for the pin.

Comprehensive analysis: When the Layout_behavior control is set to respond to the Layout_scrollflags event in the Collapsingtoolbarlayout, ImageView will have a parallax effect of the upward scrolling screen to remove, When you start folding, the background color of the collapsingtoolbarlayout (that is, the background color of the toolbar) becomes the background color we set up, and toolbar is always fixed at the top.

"Note": When using Collapsingtoolbarlayout, you must set the title to Collapsingtoolbarlayout and set it to toolbar without displaying it. That

Mcollapsingtoolbarlayout.settitle ("");

The font color of the change title:

Title Color of Expansion: Mcollapsingtoolbarlayout.setexpandedtitlecolor ();

The color of title when it is displayed on toolbar: Mcollapsingtoolbarlayout.setcollapsedtitletextcolor ();

The color of the excessive change in fact Collapsingtoolbarlayout has helped us to do it, it will automatically excessive, such as we put the title after the contraction of the color green.

Coordinatorlayout and Collapsingtoolbarlayout:
Collapsingtoolbarlayout's role provides a folding toolbar, a ViewGroup for toolbar, and inherits Fragmentlayout, which needs to be placed inside the appbarlayout layout, And as a direct child view of the appbarlayout. Collapsingtoolbarlayout mainly includes several functions:
①: Folding title (collapsing title): When the layout content is all displayed, title is the largest, but as the view gradually moved out of the top of the screen, title became smaller. You can set the title by calling the Settitle function collapsingtoolbarlayout.

②: Contents Gauze (content Scrim): Depending on whether the location of the scroll to a threshold to determine whether the view "covered with gauze." Setcontentscrim (drawable) can be used to set the picture of the gauze. toolbar is folded to the top of a fixed time background, you can invoke the Setcontentscrim (drawable) method to change the background or use app:contentscrim= "Attr/colorprimary" in the attribute to change the background.

③: State bar gauze (status bar scrim): Determines whether the status bar is "covered with gauze" depending on whether the scroll position reaches a threshold, and you can set the gauze picture by Setstatusbarscrim (drawable). The method Setstatusbarscrim (, L) is invoked to set the background of the status bar, but it only works on the lollipop device. This can only be done in the Android5.0 above system.

④ollapsemode: The collapse mode of the child view, in the child view setting, there are two kinds, want to see the effect clearly can set a background color for toolbar
(1) "PIN": fixed mode, the last fixed at the top of the folding;
(2) "parallax": Parallax mode, in the folding time will have a parallax folding effect. We can use attributes App:layout_collapsemode= "Parallax" in the layout to change:

(1): Fixed the Child view position (Pinned position Children): The child view can choose whether to fix the position in global space, which is very useful for toolbar, because when the layout is moving, the toolbar can be fixed position without being affected by the move. Set the App:layout_collapsemode as a pin.

(2): Parallax scrolling View (Parallax scrolling children): The child view can choose whether the current layout is "parallax" in the way to follow the scrolling. (: In fact, this view is scrolling faster than the other normal scrolling view speed a little bit slower). Set the layout parameter App:layout_collapsemode to parallax, the range of values [0.0,1.0], the greater the value the larger the inspection.

App:layout_collapsemode= "parallax" means that ImageView folding and collapsingtoolbarlayout folding are different steps, so what is this different step? There is another parameter to set the parameters that are not synchronized, as follows:
App:layout_collapseparallaxmultiplier= "0.5" represents a visual multiplier, the value of which is 0~1, the larger the number, the greater the visual difference (if the value here is 0, then in the head folding process, the top of the ImageView is slowly hidden, The bottom does not move, if the value here is 1,imageview the top does not understand, the bottom slowly hides, if here the value is between 0~1, then in the folding process, the ImageView's top and the bottom will hide, but the head and the bottom hides the speed is different, the specific velocity and the visual multiplier is related.
App:layout_collapsemode This property also has a value that is a pin, which means that the control is placed on the head of the page when the collapse is complete.

The final code:

<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" tools:context= ". Mainactivity "> <android.support.design.widget.appbarlayout android:layout_width=" match_parent "Android: layout_height= "256DP" android:fitssystemwindows= "true" > < Android.support.design.widget.CollapsingToolbarLayout android:id= "@+id/collapsing_toolbar_layout" android:layout _width= "Match_parent" android:layout_height= "match_parent" app:contentscrim= "#30469b" App:expandedtitlemarginstar t= "48DP" app:expandedtitletextappearance= "@style/textappearance.appcompat.title" app: Collapsedtitletextappearance= "@style/textappearance.appcompat.title" app:layout_scrollflags= "scroll| Exituntilcollapsed "> <imageview android:layout_width=" match_parent "
    android:layout_height= "Match_parent" android:scaletype= "Centercrop" android:src= "@mipmap/bg" App:layout_c
    Ollapsemode= "Parallax" app:layout_collapseparallaxmultiplier= "0.7"/> <android.support.v7.widget.toolbar Android:id= "@+id/toolbar" android:layout_width= "match_parent" android:layout_height= "Attr/actionBarSize" app: Layout_collapsemode= "Pin"/> </android.support.design.widget.CollapsingToolbarLayout> </ android.support.design.widget.appbarlayout> <linearlayout android:layout_width= "Match_parent" Android: layout_height= "match_parent" android:orientation= "vertical" app:layout_behavior= "@string/appbar_scrolling_view_ Behavior "> <android.support.v7.widget.recyclerview android:id=" @+id/recyclerview "Android:layout_width=" mat Ch_parent "android:layout_height=" Match_parent "android:scrollbars=" None "/> </LinearLayout> </android.
 Support.design.widget.coordinatorlayout>

Java code

Toolbar Mtoolbar = (Toolbar) Findviewbyid (R.id.toolbar);
  Setsupportactionbar (Mtoolbar);
  Getsupportactionbar (). Setdisplayhomeasupenabled (true);
  Mtoolbar.setnavigationonclicklistener (New View.onclicklistener () {
   @Override public
   void OnClick (View v) {
    onbackpressed ();
   }
  );
  Use Collapsingtoolbarlayout must set the title to Collapsingtoolbarlayout, set to Toolbar will not show
  Collapsingtoolbarlayout Mcollapsingtoolbarlayout = (collapsingtoolbarlayout) Findviewbyid (r.id.collapsing_toolbar_layout);
  Mcollapsingtoolbarlayout.settitle ("Collapsingtoolbarlayout");
  Modify the font color by collapsingtoolbarlayout
  Mcollapsingtoolbarlayout.setexpandedtitlecolor (color.white); Set the font color Mcollapsingtoolbarlayout.setcollapsedtitletextcolor (color.green) when it is not shrunk
  ;/Set the color of the font on the toolbar after the contraction

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.