使用PagerSlidingTabStrip實現頂部導航欄

使用PagerSlidingTabStrip配合ViewPager實現頂部導航欄。

效果圖以下:

        

PagerSlidingTabStrip是github上的一個開源項目，項目地址以下。
https://github.com/astuetz/PagerSlidingTabStrip

（一）PagerSlidingTabStrip的使用

在使用以前，咱們先來看一下PagerSlidingTabStrip中的自定義屬性。

<declare-styleable name="PagerSlidingTabStrip">  
    <attr name="pstsIndicatorColor" format="color" />  
    <attr name="pstsUnderlineColor" format="color" />  
    <attr name="pstsDividerColor" format="color" />  
    <attr name="pstsIndicatorHeight" format="dimension" />  
    <attr name="pstsUnderlineHeight" format="dimension" />  
    <attr name="pstsDividerPadding" format="dimension" />  
    <attr name="pstsTabPaddingLeftRight" format="dimension" />  
    <attr name="pstsScrollOffset" format="dimension" />  
    <attr name="pstsTabBackground" format="reference" />  
    <attr name="pstsShouldExpand" format="boolean" />  
    <attr name="pstsTextAllCaps" format="boolean" />  
</declare-styleable>

 

 

各屬性的詳細介紹以下。
pstsIndicatorColor：滑動條的顏色。
pstsIndicatorHeight：滑動條的高度。
pstsUnderlineColor：底部線條的顏色。（底部線條會填充屏幕寬度）
pstsUnderlineHeight：底部線條的高度。
pstsDividerColor：tab之間的豎直分割線的顏色。
pstsDividerPadding：tab之間的豎直分割線，距離頂部和底部的距離，即它的paddingTop和paddingBottom。
pstsTabPaddingLeftRight：單個tab內部的左間距和右間距，即它的paddingLeft和paddingRight。
pstsTabBackground：單個tab的背景。
pstsScrollOffset：當前tab滾動的偏移量。
pstsShouldExpand：設置爲ture，每一個tab的權重同樣，均分屏幕寬度，默認值false。
pstsTextAllCaps：是否將tab中的字母轉換成大寫，默認值true。

下面，咱們將PagerSlidingTabStrip使用到具體項目中。

 

 

 首先將PagerSlidingTabStrip添加到工程module的gradle中。

 

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

接下來添加布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    <com.astuetz.PagerSlidingTabStrip xmlns:tab="http://schemas.android.com/apk/res-auto" android:id="@+id/two_tab" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fafafa" android:paddingBottom="10dp" android:paddingTop="10dp" android:textColor="#333333" android:textSize="13sp" tab:pstsDividerColor="@android:color/transparent" tab:pstsIndicatorColor="#ed5955" tab:pstsIndicatorHeight="2dp" tab:pstsShouldExpand="true" tab:pstsTabBackground="@android:color/transparent" tab:pstsUnderlineColor="@android:color/transparent"/>
    <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/two_viewpager"></android.support.v4.view.ViewPager>
</LinearLayout>

最後實現邏輯代碼：

package com.example.tablayoutdemo; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.astuetz.PagerSlidingTabStrip; public class TwoActivity extends AppCompatActivity { private PagerSlidingTabStrip two_tab; private ViewPager two_vp; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_two); two_tab = (PagerSlidingTabStrip) findViewById(R.id.two_tab); two_vp = (ViewPager) findViewById(R.id.two_viewpager); Fragment [] fragments = {new BlankFragment(),new BlankFragment(),new BlankFragment(), new BlankFragment(),new BlankFragment(),new BlankFragment(),new BlankFragment(), new BlankFragment()}; String [] titles = {"頭條","科技","財經","互聯網","健身","手機","圖片","段子"}; //設置適配器
        TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager(),fragments,titles); two_vp.setAdapter(adapter); //綁定
 two_tab.setViewPager(two_vp); } }

適配器類：

package com.example.tablayoutdemo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; 

public class TabPagerAdapter extends FragmentPagerAdapter{ private Fragment [] mFragments; private String [] mTitles; public TabPagerAdapter(FragmentManager fm, Fragment[] mFragments, String[] mTitles) { super(fm); this.mFragments = mFragments; this.mTitles = mTitles; } @Override public Fragment getItem(int position) { return mFragments[position]; } @Override public int getCount() { return mFragments.length; } @Override public CharSequence getPageTitle(int position) { return mTitles[position]; } }