Simple use of the Collapsingtoolbarlayout (Collapsible toolbar layout) of the Android design package

Turn from:

Use of Collapsingtoolbarlayout

Note: You need to add a design dependency package before using toolbar, you need to hide the header header

The collapsingtoolbarlayout function is to provide a collapsible toolbar, which inherits to Framelayout, sets it to Layout_scrollflags, It can control the controls contained in Collapsingtoolbarlayout (such as: ImageView, Toolbar) to make corresponding Scrollflags scrolling events when responding to Layout_behavior events (removing the screen or pinning it to the top of the screen ).

Nestedscrollview: It is the control provided by the SUPPORT-V4 package, inherits to Framelayout, and implements the Nestedscrollingparent,nestedscrollingchild, Scrollingview interface.

It functions like Android.widget.ScrollView, and the difference is that Nestedscrollview supports nested sliding.

Layout to be implemented:

The outermost layer is coorinatorlayout, and it contains Appbarlayout and Nestedscrollview.

The appbarlayout contains Collspsingtoolbar and Tableyout, and its role is to treat all child controls as a whole

The Collspsingtoolbar contains a ImageView and toolbar as a telescopic area.

Use the Layout_collapsemode property to specify whether the child controls inside it are collapsed or pinned to the top of the screen

<!-- Layout_collapsemode (Folding mode)-There are two values:                 1.parallax: When content is scrolled, the view (such as ImageView) in Collapsingtoolbarlayout can also scroll simultaneously,                 realizing the parallax scrolling effect, usually and layout_ Collapseparallaxmultiplier (set parallax factor) with.                 2.pin-When the collapsingtoolbarlayout is fully contracted, the toolbar can also be fixed on the screen.            -

XML file:

<?XML version= "1.0" encoding= "Utf-8"?><Android.support.design.widget.CoordinatorLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Xmlns:app= "Http://schemas.android.com/apk/res-auto"android:orientation= "vertical"Tools:context= "Fanggao.qf.collapsingtoolbarlayout.MainActivity">   <!--Android:fitssystemwindow = "true" means that the entire layout is displayed as the entire screen goes out of the status bar, the title bar and the remaining area of the navigation bar -    <Android.support.design.widget.AppBarLayoutAndroid:id= "@+id/layout_appbar"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"       >        <!--app:expandedtitlemarginstart= "10DP" setting expansion time (not yet contracted) title away from the left side of the screen app:contentscrim= "? Attr/colorp Rimary "Sets the background color when fully collapsingtoolbarlayout folded (shrunk) -        <Android.support.design.widget.CollapsingToolbarLayoutAndroid:id= "@+id/ctb"Android:layout_width= "Match_parent"Android:layout_height= "250DP"android:fitssystemwindows= "true"App:contentscrim= "? Attr/colorprimary"App:expandedtitlemarginstart= "10DP"App:layout_scrollflags= "scroll|exituntilcollapsed">               <ImageViewAndroid:id= "@+id/image"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:scaletype= "Centercrop"App:layout_collapsemode= "Parallax"android:src= "@drawable/cat"            />        <!--title -        <Android.support.v7.widget.ToolbarAndroid:id= "@+id/toolbar"Android:layout_width= "Match_parent"Android:layout_height= "30DP"App:layout_collapsemode= "Pin"App:title= "Toolbar"/>        </Android.support.design.widget.CollapsingToolbarLayout>        <!--Options Tab -        <Android.support.design.widget.TabLayoutAndroid:id= "@+id/tablayout"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"App:tabindicatorcolor= "@color/coloraccent"App:tabmode= "scrollable"App:tabselectedtextcolor= "@color/coloraccent"App:tabtextcolor= "@android: Color/black"/>    </Android.support.design.widget.AppBarLayout>    <Android.support.v4.widget.NestedScrollViewAndroid:id= "@+id/nestedscrollview"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:fillviewport= "true"App:layout_behavior= "@string/appbar_scrolling_view_behavior">        <Android.support.v4.view.ViewPagerAndroid:id= "@+id/viewpager"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"/>    </Android.support.v4.widget.NestedScrollView></Android.support.design.widget.CoordinatorLayout>

Main program:

 Public classMainactivityextendsappcompatactivity {PrivateToolbar Toolbar; PrivateImageView image; PrivateViewpager Viewpager; PrivateTablayout tablayout; PrivateCollapsingtoolbarlayout collapsingtoolbarlayout; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main);        Initview ();    InitData (); }    Private voidInitData () {Toolbar.setlogo (r.mipmap.ic_launcher);        Setsupportactionbar (toolbar); //Set Back buttonGetsupportactionbar (). setdisplayhomeasupenabled (true); //set Shrink expand toolbar Font ColorCollapsingtoolbarlayout.setexpandedtitlecolor (Color.White);        Collapsingtoolbarlayout.setcollapsedtitletextcolor (Color.Black); //set Tablayout and ViewpagerViewpager.setadapter (NewTestviewpageadapter ());    Tablayout.setupwithviewpager (Viewpager); }    Private voidInitview () {toolbar=(Toolbar) Findviewbyid (R.id.toolbar); Image=(ImageView) Findviewbyid (r.id.image); Viewpager=(Viewpager) Findviewbyid (R.id.viewpager); Tablayout=(tablayout) Findviewbyid (r.id.tablayout); Collapsingtoolbarlayout=(collapsingtoolbarlayout) Findviewbyid (R.ID.CTB); }    classTestviewpageadapterextendspageradapter{@Override PublicObject Instantiateitem (ViewGroup container,intposition) {TextView TextView=NewTextView (mainactivity. This);            Textview.setgravity (Gravity.center); Textview.settext ("Pager" + (position+1)); Textview.settextsize (30);            Textview.settextcolor (Color.Blue);            Container.addview (TextView); returnTextView; } @Override Public voidDestroyitem (ViewGroup container,intposition, Object object)        {Container.removeview (View) object); } @Override Public intGetCount () {return5; } @Override Public Booleanisviewfromobject (View view, Object object) {returnView = =object; }/*Get title*/        /*The method must be written, otherwise tablayout cannot display the caption*/@Override PublicCharsequence Getpagetitle (intposition) {            return"tab" + (position+1); }    }}

Effect:

Before sliding

When you swipe down:

Simple use of the Collapsingtoolbarlayout (Collapsible toolbar layout) of the Android design package