使用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];
    }
}