Android之官方導航欄之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

　　通過前幾篇文章，我們對Android的導航欄有了一定的了解認識，本次文章將對Toolbar進行綜合應用，主要結合DrawerLayout、ViewPager、PagerSlidingTabStrip一起使用。

　　PagerSlidingTabStrip是github上一個開源庫，地址為：https://github.com/astuetz/PagerSlidingTabStrip

　　DrawerLayout之前有過介紹，在此不在過多介紹。

　　先看布局文件：

<RelativeLayout xmlns: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.Toolbar
        android: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.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" >

        <LinearLayout
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <com.jredu.PagerSlidingTabStrip
                android:id="@+id/tabs"
                style="@style/pagerTabStype"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:background="@drawable/background_tabs" />

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                tools:context=".MainActivity" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/left"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#fff"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingTop="30dp" >

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingLeft="20dp" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="用戶名"
                        android:textSize="18sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="身份"
                        android:textSize="18sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

　　布局文件很簡單，首先將整個布局划分為兩個部分，上面是Toolbar，下面是DrawerLayout，在DrawerLayout里面有分為兩個部分，分別是主布局和側邊布局。側邊布局沒啥好說的，主要是主布局，在主布局里面，上面部分是PagerSlidingTabStrip，下面部分是ViewPager。

　　布局文件完成之后，我們來看java文件，首先將Toolbar和DrawerLayout使用ActionBarDrawerToggle關聯起來，代碼如下：

Toolbar boolBar = (Toolbar)findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        boolBar.setTitle("傑瑞教育");
        setSupportActionBar(boolBar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, boolBar,R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();
    mDrawerLayout.setDrawerListener(mDrawerToggle);

　　然后看看如何結合PagerSlidingTabStrip和ViewPager，PagerSlidingTabStrip很簡單，我們只需要將庫里的java文件和所需要的attr文件拷到我們的項目里面即可。

        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager = (ViewPager) findViewById(R.id.pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
    tabs.setViewPager(pager);

　　通過PagerSlidingTabStrip的setViewPager方法即可將兩個組件關聯起來。不過要想實現如上效果，還必須編寫樣式，具體如下：

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="colorPrimary">#1570A6</item>
        <item name="actionBarSize">50dp</item>
        <item name="windowActionBar">false</item>
        <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item>
    </style>
    
    <style name="CustomTitleTextAppearance">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">20sp</item>
    </style>
    <!-- PagerSlidingTabStrip的自定義樣式 -->
    <style name="pagerTabStype">
        <item name="pstsShouldExpand">true</item>
        <item name="pstsDividerColor">#00000000</item>
        <item name="pstsUnderlineHeight">1dp</item>
        <item name="pstsIndicatorHeight">3dp</item>
        <item name="pstsIndicatorColor">#1570A6</item>
</style>

　　需要說明的的PagerSlidingTabStrip沒有提供選中tab字體顏色的方法，在這里可自行修改源碼實現。

 

　　想要了解更多內容的小伙伴，可以點擊查看源碼，親自運行測試。

　　疑問咨詢或技術交流，請加入官方QQ群： （452379712）

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。