Android Development Learning Path-android Design Support library use (Coordinatorlayout use)

：

The above figure has two effects, one is the top of the picture, after the slide will be hidden and show a toolbar (toolbar similar to Actionbar, but only toolbar is compatible with material Desig library). The other is the bottom of this button, this button will appear after a snackbar (more powerful than toast, because you can set the click of the Listener event), after the button click Snackbar appear after the button will automatically move up to avoid being obscured, This is a feature of coordinatorlayout.

The Android Design Support Library is a compatible repository provided by Google to implement material Design (hereinafter referred to as MD) It does not only have the effect of running on more than android5.0 devices, this example uses some of these controls, such as Snackbar, Floatingactionbutton, and so on

Put the layout first to explain:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Android.support.design.widget.CoordinatorLayout3     Android:id= "@+id/root"4 xmlns:android= "Http://schemas.android.com/apk/res/android"5 Xmlns:app= "Http://schemas.android.com/apk/res-auto"6 Android:layout_width= "Match_parent"7 Android:layout_height= "Match_parent">8 9 Ten     <Android.support.v4.widget.NestedScrollView One         Android:layout_width= "Match_parent" A Android:layout_height= "Match_parent" - App:layout_behavior= "@string/appbar_scrolling_view_behavior"> -  the         <LinearLayout -             Android:layout_width= "Match_parent" - Android:layout_height= "Match_parent" - android:orientation= "vertical"> +  -             <!--here in order to implement can drag can be added multiple ImageView, omitted ... - +         </LinearLayout> A  at     </Android.support.v4.widget.NestedScrollView> -  -     <Android.support.design.widget.AppBarLayout -         Android:layout_width= "Match_parent" - Android:layout_height= "250DP" - Android:theme= "@style/themeoverlay.appcompat.dark.actionbar"> in  -         <Android.support.design.widget.CollapsingToolbarLayout to             Android:id= "@+id/collapsingtoolbarlayout" + Android:layout_width= "Match_parent" - Android:layout_height= "Match_parent" the App:contentscrim= "#636EEE" * App:title= "Windows10" $ App:expandedtitlemarginstart= "50DP"Panax Notoginseng App:layout_scrollflags= "scroll|exituntilcollapsed"> -  the             <ImageView +                 Android:layout_width= "Match_parent" A Android:layout_height= "Match_parent" the Android:scaletype= "Fitxy" + android:src= "@drawable/my" - App:layout_collapsemode= "Parallax"/> $  $  -             <Android.support.v7.widget.Toolbar -                 Android:id= "@+id/toolbar" the Android:layout_width= "Match_parent" - Android:layout_height= "? Attr/actionbarsize"Wuyi Android:minheight= "20DP" the App:layout_collapsemode= "Pin" - App:popuptheme= "@style/theme.appcompat.light" Wu App:theme= "@style/themeoverlay.appcompat.dark.actionbar" -                 /> About         </Android.support.design.widget.CollapsingToolbarLayout> $  -     </Android.support.design.widget.AppBarLayout> -  -     <Android.support.design.widget.FloatingActionButton A         Android:id= "@+id/fab_btn" + Android:layout_width= "Wrap_content" the Android:layout_height= "Wrap_content" - android:layout_gravity= "Bottom|right" $ Android:layout_margin= "10DP" the android:src= "@mipmap/ic_launcher" the app:fabsize= "normal"/> the  the </Android.support.design.widget.CoordinatorLayout>

In the outermost use of a coordinatorlayout to master the layout, in the layout of life using the namespace named app, this layout is a powerful framelayout, that is, the role of the layout of the above results. You can see the code at the end of which we put a floatingactiongbutton, because this control is placed in this layout, so if we give it a click event and let it pop a snackbar, we can do the above effect.

Next is to do the picture slide this effect, in the outermost use a appbarlayout, this layout is a special linearlayout, is to be compatible with MD design a layout, in coordinatorlayout use it can achieve some coordination effect, Depending on the API, you can see its usage as follows:

Can FQ to see: http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Here is the framework for implementing the entire effect, and next we will add a collapsingtoolbarlayout in Toolbarlayout, which is the name translation "Crash toolbar layout"? Inexplicable happy feeling haha! The purpose of using it here is to realize that the picture slide disappears and then shows toolbar, the description of this class:

App:contentscrim= "#636EEE" app:title= "Windows10" app:expandedtitlemarginstart= "50DP" app:layout_scrollflags= " Scroll|exituntilcollapsed "

The four attributes of this layout are the color after contraction, the title text, the distance of the title after opening, and the contraction effect of the picture, each of which can be tried on its own.

The last is to add a ImageView and a toolbar in this layout, as for the sliding effect can be set up, the API can be seen.

Paste the activity code again:

 Public classCoordinatorlayoutactivityextendsappcompatactivity {PrivateFloatingactionbutton ftb_btn; Privatecoordinatorlayout Root; PrivateToolbar Toolbar; PrivateCollapsingtoolbarlayout collapsingtoolbarlayout; @Overrideprotected voidonCreate (@Nullable Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (r.layout.activity_coordinatorlayout); FTB_BTN=(Floatingactionbutton) Findviewbyid (R.ID.FAB_BTN); Root=(coordinatorlayout) Findviewbyid (r.id.root); Toolbar=(Toolbar) Findviewbyid (R.id.toolbar); Collapsingtoolbarlayout=(collapsingtoolbarlayout) Findviewbyid (r.id.collapsingtoolbarlayout);        Setsupportactionbar (toolbar); Ftb_btn.setonclicklistener (NewView.onclicklistener () {@Override Public voidOnClick (View v) {snackbar.make (root,"I am a Snackbar", Snackbar.length_long). Setaction ("I Know",NewView.onclicklistener () {@Override Public voidOnClick (View v) {}}).            Show ();    }        }); }}

Finally, these effects are implemented using some seemingly new layouts and controls, but in fact these controls are usually used by us, in fact, we just encapsulate the old stuff and add some new properties, and then the system has helped us to achieve some animation effect at the bottom. In addition, the various control coordination animations used in Coordinatorlayout require some adapted controls or layouts to be compatible with the new design language, so the old ones are inappropriate.

Android Development Learning Path-android Design Support library use (Coordinatorlayout use)