Material design using collapsingtoolbarlayout easy to realize daily News details page Top effect (toolbar stretch folding effect with banner)

We all know coordinatorlayout+Appbarlayout can easily realize the effect of rolling hide toolbar, today we are going to talk about collapsingtoolbarlayout+

Coordinatorlayout+appbarlayout Realization of toolbar with bannercollapse effect ———— when scrolling up, banner will shrink upward as the scrolling gesture to hide,banner on

(actually collapsingtoolbarlayout Last displayed on toolbar, when scrolling down, banner will gradually appear and revert to the original

size, also the text will also become large and return to its original position.

This effect is used in the Daily News detail page, so look at the gif below:

Implementation method:

1. Layout xml:

<?xml version= "1.0" encoding= "Utf-8"?> <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 " Tools:context= ".            Mainactivity "> <android.support.design.widget.appbarlayout android:layout_width=" match_parent " android:layout_height= "256DP" android:fitssystemwindows= "true" > <android.support.desig N.widget.collapsingtoolbarlayout android:id= "@+id/collapsing_toolbar_layout" Android:layout_                Width= "Match_parent" android:layout_height= "Match_parent" android:fitssystemwindows= "true" app:contentscrim= "@color/toolbarcolor" app:expandedtitlemarginstart= "38DP" app :layout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:layout_width= "M                    Atch_parent "android:layout_height=" Match_parent "android:fitssystemwindows=" true " Android:scaletype= "Centercrop" android:src= "@drawable/skill" app:l Ayout_collapsemode= "Parallax" app:layout_collapseparallaxmultiplier= "0.7"/> <andro Id.support.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_width= "match_p Arent "android:layout_height="? Attr/actionbarsize "app:layout_collapsemode=" pin "/&gt            ; </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.appbarlayout > <android.support.v4.widget.nestedscrollview android:layout_width= "match_parent" Andro Id:layout_height= "Match_parent" android:scrollbars= "vertical" app:layout_behavior= "@string/appbar_scrolling_view_beh Avior "> <webview android:id=" @+id/webview "android:layout_width=" Match_pare NT "android:layout_height=" Match_parent "></WebView> &LT;/ANDROID.SUPPORT.V4.WIDGET.NESTEDSC Rollview> </android.support.design.widget.CoordinatorLayout>

Properties in Collapsingtoolbarlayout:

A:contentscrim-Sets the background color when fully collapsingtoolbarlayout folded (shrunk).

B:expandedtitlemarginstart-Sets the distance between the title and the left at the time of expansion (not yet contracted).

C:layout_scrollflags: Set scrolling performance:

1) Scroll, indicates that collapsingtoolbarlayout will roll out of the screen and disappear when scrolling down the list

2) exituntilcollapsed, indicates that the layout will scroll away from the screen until it is folded to its minimum height.

3) Enteralways: Once the view is scrolled up, it will be visible.

4) enteralwayscollapsed: This flag defines when it will be displayed again after it has disappeared. Assuming you define a minimum height (minheight) and enteralways are also defined, then the view will start to show up at this minimum height, and from this point on, start slowly and unfold when scrolling to the top.

Properties in ImageView and toolbar:

A:layout_collapsemode= "Parallax", which controls the effect of rolling out the range of the screen

1) pin to ensure that the toolbar is still pinned to the top of the screen when the view is folded.

2) Parallax, when set to this mode, when the content is scrolled, the view (such as ImageView) in Collapsingtoolbarlayout can also scroll simultaneously, realize the parallax scrolling effect, usually and layout_ Collapseparallaxmultiplier (Set the Parallax factor, with a value of 0~1).

2. Main Java code:

 Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Setsupportactionbar (toolbar);        Getsupportactionbar (). Setdisplayhomeasupenabled (True);  Toolbar.setnavigationonclicklistener (New View.onclicklistener () {@Override public void OnClick (View            V) {onbackpressed ();        }        }); You must set the title to Collapsingtoolbarlayout on the collapsingtoolbarlayout, and it will not be displayed on toolbar. collapsingtoolbarlayout        Mcollapsingtoolbarlayout = (collapsingtoolbarlayout) Findviewbyid (r.id.collapsing_toolbar_layout);        Mcollapsingtoolbarlayout.settitle ("Bar Brother exercise");        Modify the font color Mcollapsingtoolbarlayout.setexpandedtitlecolor (color.white) by collapsingtoolbarlayout,//Set the font color when not shrinking Mcollapsingtoolbarlayout.setcollapsedtitletextcolor (Color.White);//Set the color of the Font on toolbar//toolbar navigationicon change after shrinking        Change Back button color final drawable UpArrow = Getresources (). getdrawable (R.drawable.abc_ic_ab_back_mtrl_am_alpha); UpArrow. Setcolorfilter (Getresources (). GetColor (R.color.white), PorterDuff.Mode.SRC_ATOP);        Getsupportactionbar (). Sethomeasupindicator (UpArrow);        Mwebview = (WebView) Findviewbyid (R.id.webview);        Set support JS mwebview.getsettings (). Setjavascriptenabled (True); //!!        Set jump page always open mwebview.setwebviewclient (new Webviewclient ()) in current WebView; Mwebview.loadurl (Url<span style= "font-family:arial, Helvetica, Sans-serif;" >);</span>

Source code can be downloaded from my github: Https://github.com/crazyfzw/CollapsingToolbarLayoutDemo

Reference:

Http://developer.android.com/intl/ko/reference/android/support/design/widget/CollapsingToolbarLayout.html

Http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

Recommendation: http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

Reprint Please specify Source:http://blog.csdn.net/fzw_faith/article/details/51336257

Material design using collapsingtoolbarlayout easy to realize daily News details page Top effect (toolbar stretch folding effect with banner)