Android's official navigation bar Toolbar (Toolbar+drawerlayout+viewpager+pagerslidingtabstrip)

Through the previous articles, we have a certain understanding of the navigation bar of Android, this article will be comprehensive application of toolbar, mainly combined with drawerlayout, Viewpager, Pagerslidingtabstrip together.

Pagerslidingtabstrip is the last open Source Library on GitHub, with the address: Https://github.com/astuetz/PagerSlidingTabStrip

Drawerlayout has been introduced before, there is not too much to introduce.

　　Look at the layout file first:

<Relativelayoutxmlns: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"Tools:context= "Com.jredu.MainActivity" >    <Android.support.v7.widget.ToolbarAndroid:id= "@+id/toolbar"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "? Attr/colorprimary"Android:minheight= "? Attr/actionbarsize" />    <Android.support.v4.widget.DrawerLayoutAndroid:id= "@+id/drawerlayout"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:layout_below= "@id/toolbar" >        <LinearLayoutAndroid:id= "@+id/main"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical" >            <Com.jredu.PagerSlidingTabStripAndroid:id= "@+id/tabs"style= "@style/pagertabstype"Android:layout_width= "Match_parent"Android:layout_height= "48dip"Android:background= "@drawable/background_tabs" />            <Android.support.v4.view.ViewPagerAndroid:id= "@+id/pager"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Tools:context=". Mainactivity " />        </LinearLayout>        <LinearLayoutAndroid:id= "@+id/left"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:layout_gravity= "Start"Android:background= "#fff"android:orientation= "vertical" >            <LinearLayoutAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:gravity= "Center_vertical"android:orientation= "Horizontal"Android:paddingtop= "30DP" >                <ImageViewAndroid:layout_width= "80DP"Android:layout_height= "80DP"android:src= "@drawable/ic_launcher" />                <LinearLayoutAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:orientation= "vertical"Android:paddingleft= "20DP" >                    <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "User name"android:textsize= "18SP" />                    <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Identity"android:textsize= "18SP" />                </LinearLayout>            </LinearLayout>        </LinearLayout>    </Android.support.v4.widget.DrawerLayout></Relativelayout>

Layout file is very simple, first divides the entire layout into two parts, above is the toolbar, below is the drawerlayout, in the drawerlayout inside has divided into two parts, respectively is the main layout and the side layout. Side layout Nothing to say, mainly the main layout, in the main layout, the upper part is Pagerslidingtabstrip, the following section is Viewpager.

After the layout file is complete, let's look at the Java file, first associating toolbar and drawerlayout with Actionbardrawertoggle, with the following code:

 Toolbar boolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Mdrawerlayout  = (Drawerlayout) Findviewbyid (r.id.drawerlayout);        Boolbar.settitle ( Jerry Education " true         ); Getsupportactionbar (). setdisplayhomeasupenabled ( true  ); Mdrawertoggle  = new  Actionbardrawertoggle ( this          

Then see how combining Pagerslidingtabstrip and Viewpager,pagerslidingtabstrip is simple, we just need to copy the Java files in the library and the required attr files into our project.

        Tabs = (Pagerslidingtabstrip) Findviewbyid (r.id.tabs);         = (Viewpager) Findviewbyid (R.id.pager);         New Mypageradapter (Getsupportfragmentmanager ());        Pager.setadapter (adapter);    Tabs.setviewpager (pager);

You can associate two components with the Pagerslidingtabstrip Setviewpager method. However, to achieve the above effect, you must also write a style, as follows:

<style name= "Apptheme" parent= "Appbasetheme" > <item name= "colorprimary" > #1570A6 </item> &lt ; Item Name= "Actionbarsize" >50dp</item> <item name= "Windowactionbar" >false</item> <item name= "titletextappearance" > @style/customtitletextappearance</item> </style&gt        ; <style name= "Customtitletextappearance" > <item name= "Android:textcolor" > #fff </item> <it EM name= "Android:textsize" >20sp</item> </style> <!--pagerslidingtabstrip Custom styles-<styl E name= "Pagertabstype" > <item name= "Pstsshouldexpand" >true</item> <item name= "Pstsdividercolor" > #00000000 </item> <item name= "Pstsunderlineheight" >1dp</item> <item name= "pstsindicatorheight" >3dp</item> <item name= "Pstsindicatorcol or "> #1570A6 </item></style>

Need to explain the Pagerslidingtabstrip does not provide a way to check the color of the tab font, where you can modify the source code implementation.

To learn more about the small partners, you can click to view the source code , run the test yourself.

Inquiries or technical exchanges, please join the official QQ Group: (452379712)

Jerry Education
Source:http://www.cnblogs.com/jerehedu/
This article is the copyright of Yantai Jerry Education Technology Co., Ltd. and the blog Park is shared, welcome reprint, but without the consent of the author must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

Android's official navigation bar Toolbar (Toolbar+drawerlayout+viewpager+pagerslidingtabstrip)