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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.