Android 标签栏pagerslidingtabstrip用法实例（含Demo）

三叶草

（效果图来源于自己写的demo，双击可放大）
大家肯定对这种可滑动的导航标题并不陌生，项目中经常需要用到这种滑动切换的效果，我觉得PagerSlidingTabStrip搭配viewPager的组合最好用了。PagerSlidingTabStrip是一个开源框架，和github上面的其他开源框架使用方法一样
开源框架地址：​​GitHub - astuetz/PagerSlidingTabStrip: An interactive indicator to navigate between the different pages of a ViewPager​​
我自己习惯用eclipse写个demo,将核心源码拷贝到项目中方便查看，话不多说，上代码
核心的类PagerSlidingTabStrip

package com.baobao.pagerslidingtabstrip;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Typeface;
import android.os.Build;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.HorizontalScrollView;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.Locale;


public class PagerSlidingTabStrip extends HorizontalScrollView {
  public interface IconTabProvider {
  public int getPageIconResId(int position);
  }
  // @formatter:off
  private static final int[] ATTRS = new int[] { android.R.attr.textSize,
    android.R.attr.textColor };
  // @formatter:on
  private LinearLayout.LayoutParams defaultTabLayoutParams;
  private LinearLayout.LayoutParams expandedTabLayoutParams;
  private final PageListener pageListener = new PageListener();
  public OnPageChangeListener delegatePageListener;
  private LinearLayout tabsContainer;
  private ViewPager pager;
  private int tabCount;
  private int currentPosition = 0;
  private int selectedPosition = 0;
  private float currentPositionOffset = 0f;
  private Paint rectPaint;
  private Paint dividerPaint;
  private int indicatorColor = 0xFF666666;
  private int underlineColor = 0x1A000000;
  private int dividerColor = 0x1A000000;
  private boolean shouldExpand = false;
  private boolean textAllCaps = true;
  private int scrollOffset = 52;
  private int indicatorHeight = 8;
  private int underlineHeight = 2;
  private int dividerPadding = 12;
  private int tabPadding = 24;
  private int dividerWidth = 1;
  private int tabTextSize = 12;
  private int tabTextColor = 0xFF666666;
  private int selectedTabTextColor = 0xFF666666;
  private Typeface tabTypeface = null;
  private int tabTypefaceStyle = Typeface.NORMAL;
  private int lastScrollX = 0;
  private int tabBackgroundResId = R.drawable.background_tab;
  private Locale locale;
  public PagerSlidingTabStrip(Context context) {
  this(context, null);
  }
  public PagerSlidingTabStrip(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
  }
  public PagerSlidingTabStrip(Context context, AttributeSet attrs,
    int defStyle) {
  super(context, attrs, defStyle);
  setFillViewport(true);
  setWillNotDraw(false);
  tabsContainer = new LinearLayout(context);
  tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
  tabsContainer.setLayoutParams(new LayoutParams(
    LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  addView(tabsContainer);
  DisplayMetrics dm = getResources().getDisplayMetrics();
  scrollOffset = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
  indicatorHeight = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
  underlineHeight = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
  dividerPadding = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
  tabPadding = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
  dividerWidth = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
  tabTextSize = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
  // get system attrs (android:textSize and android:textColor)
  TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);
  tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
  tabTextColor = a.getColor(1, tabTextColor);
  a.recycle();
  // get custom attrs
  a = context.obtainStyledAttributes(attrs,
    R.styleable.PagerSlidingTabStrip);
  indicatorColor = a.getColor(
    R.styleable.PagerSlidingTabStrip_pstsIndicatorColor,
    indicatorColor);
  underlineColor = a.getColor(
    R.styleable.PagerSlidingTabStrip_pstsUnderlineColor,
    underlineColor);
  dividerColor = a
    .getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor,
      dividerColor);
  indicatorHeight = a.getDimensionPixelSize(
    R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight,
    indicatorHeight);
  underlineHeight = a.getDimensionPixelSize(
    R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight,
    underlineHeight);
  dividerPadding = a.getDimensionPixelSize(
    R.styleable.PagerSlidingTabStrip_pstsDividerPadding,
    dividerPadding);
  tabPadding = a.getDimensionPixelSize(
    R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight,
    tabPadding);
  tabBackgroundResId = a.getResourceId(
    R.styleable.PagerSlidingTabStrip_pstsTabBackground,
    tabBackgroundResId);
  shouldExpand = a
    .getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand,
      shouldExpand);
  scrollOffset = a
    .getDimensionPixelSize(
      R.styleable.PagerSlidingTabStrip_pstsScrollOffset,
      scrollOffset);
  textAllCaps = a.getBoolean(
    R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);
  a.recycle();
  rectPaint = new Paint();
  rectPaint.setAntiAlias(true);
  rectPaint.setStyle(Style.FILL);
  dividerPaint = new Paint();
  dividerPaint.setAntiAlias(true);
  dividerPaint.setStrokeWidth(dividerWidth);
  defaultTabLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
  expandedTabLayoutParams = new LinearLayout.LayoutParams(0,
    LayoutParams.MATCH_PARENT, 1.0f);
  if (locale == null) {
    locale = getResources().getConfiguration().locale;
  }
  }
  public void setViewPager(ViewPager pager) {
  this.pager = pager;
  if (pager.getAdapter() == null) {
    throw new IllegalStateException(
      "ViewPager does not have adapter instance.");
  }
  pager.setOnPageChangeListener(pageListener);
  notifyDataSetChanged();
  }
  public void setOnPageChangeListener(OnPageChangeListener listener) {
  this.delegatePageListener = listener;
  }
  public void notifyDataSetChanged() {
  tabsContainer.removeAllViews();
  tabCount = pager.getAdapter().getCount();
  for (int i = 0; i < tabCount; i++) {
    if (pager.getAdapter() instanceof IconTabProvider) {
    addIconTab(i,
      ((IconTabProvider) pager.getAdapter())
        .getPageIconResId(i));
    } else {
    addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
    }
  }
  updateTabStyles();
  getViewTreeObserver().addOnGlobalLayoutListener(
    new OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
      getViewTreeObserver()
        .removeGlobalOnLayoutListener(this);
      currentPosition = pager.getCurrentItem();
      scrollToChild(currentPosition, 0);
      }
    });
  }
  private void addTextTab(final int position, String title) {
  TextView tab = new TextView(getContext());
  tab.setText(title);
  tab.setGravity(Gravity.CENTER);
  tab.setSingleLine();
  addTab(position, tab);
  }
  private void addIconTab(final int position, int resId) {
  ImageButton tab = new ImageButton(getContext());
  tab.setImageResource(resId);
  addTab(position, tab);
  }
  private void addTab(final int position, View tab) {
  tab.setFocusable(true);
  tab.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    pager.setCurrentItem(position);
    }
  });
  tab.setPadding(tabPadding, 0, tabPadding, 0);
  tabsContainer
    .addView(tab, position, shouldExpand ? expandedTabLayoutParams
      : defaultTabLayoutParams);
  }
  private void updateTabStyles() {
  for (int i = 0; i < tabCount; i++) {
    View v = tabsContainer.getChildAt(i);
    v.setBackgroundResource(tabBackgroundResId);
    if (v instanceof TextView) {
    TextView tab = (TextView) v;
    tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
    tab.setTypeface(tabTypeface, tabTypefaceStyle);
    tab.setTextColor(tabTextColor);
    // setAllCaps() is only available from API 14, so the upper case
    // is made manually if we are on a
    // pre-ICS-build
    if (textAllCaps) {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
      tab.setAllCaps(true);
      } else {
      tab.setText(tab.getText().toString()
        .toUpperCase(locale));
      }
    }
    if (i == selectedPosition) {
      tab.setTextColor(selectedTabTextColor);
    }
    }
  }
  }
  private void scrollToChild(int position, int offset) {
  if (tabCount == 0) {
    return;
  }
  int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;
  if (position > 0 || offset > 0) {
    newScrollX -= scrollOffset;
  }
  if (newScrollX != lastScrollX) {
    lastScrollX = newScrollX;
    scrollTo(newScrollX, 0);
  }
  }
  @Override
  protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (isInEditMode() || tabCount == 0) {
    return;
  }
  final int height = getHeight();
  // draw underline
  rectPaint.setColor(underlineColor);
  canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(),
    height, rectPaint);
  // draw indicator line
  rectPaint.setColor(indicatorColor);
  // default: line below current tab
  View currentTab = tabsContainer.getChildAt(currentPosition);
  float lineLeft = currentTab.getLeft();
  float lineRight = currentTab.getRight();
  // if there is an offset, start interpolating left and right coordinates
  // between current and next tab
  if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
    View nextTab = tabsContainer.getChildAt(currentPosition + 1);
    final float nextTabLeft = nextTab.getLeft();
    final float nextTabRight = nextTab.getRight();
    lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset)
      * lineLeft);
    lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset)
      * lineRight);
  }
  canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height,
    rectPaint);
  // draw divider
  dividerPaint.setColor(dividerColor);
  for (int i = 0; i < tabCount - 1; i++) {
    View tab = tabsContainer.getChildAt(i);
    canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
      height - dividerPadding, dividerPaint);
  }
  }
  private class PageListener implements OnPageChangeListener {
  @Override
  public void onPageScrolled(int position, float positionOffset,
    int positionOffsetPixels) {
    currentPosition = position;
    currentPositionOffset = positionOffset;
    scrollToChild(position, (int) (positionOffset * tabsContainer
      .getChildAt(position).getWidth()));
    invalidate();
    if (delegatePageListener != null) {
    delegatePageListener.onPageScrolled(position, positionOffset,
      positionOffsetPixels);
    }
  }
  @Override
  public void onPageScrollStateChanged(int state) {
    if (state == ViewPager.SCROLL_STATE_IDLE) {
    scrollToChild(pager.getCurrentItem(), 0);
    }
    if (delegatePageListener != null) {
    delegatePageListener.onPageScrollStateChanged(state);
    }
  }
  @Override
  public void onPageSelected(int position) {
    selectedPosition = position;
    updateTabStyles();
    if (delegatePageListener != null) {
    delegatePageListener.onPageSelected(position);
    }
  }
  }
  public void setSelectedPosition(int selectedPosition) {
  this.selectedPosition = selectedPosition;
  }
  public void setIndicatorColor(int indicatorColor) {
  this.indicatorColor = indicatorColor;
  invalidate();
  }
  public void setIndicatorColorResource(int resId) {
  this.indicatorColor = getResources().getColor(resId);
  invalidate();
  }
  public int getIndicatorColor() {
  return this.indicatorColor;
  }
  public void setIndicatorHeight(int indicatorLineHeightPx) {
  this.indicatorHeight = indicatorLineHeightPx;
  invalidate();
  }
  public int getIndicatorHeight() {
  return indicatorHeight;
  }
  public void setUnderlineColor(int underlineColor) {
  this.underlineColor = underlineColor;
  invalidate();
  }
  public void setUnderlineColorResource(int resId) {
  this.underlineColor = getResources().getColor(resId);
  invalidate();
  }
  public int getUnderlineColor() {
  return underlineColor;
  }
  public void setDividerColor(int dividerColor) {
  this.dividerColor = dividerColor;
  invalidate();
  }
  public void setDividerColorResource(int resId) {
  this.dividerColor = getResources().getColor(resId);
  invalidate();
  }
  public int getDividerColor() {
  return dividerColor;
  }
  public void setUnderlineHeight(int underlineHeightPx) {
  this.underlineHeight = underlineHeightPx;
  invalidate();
  }
  public int getUnderlineHeight() {
  return underlineHeight;
  }
  public void setDividerPadding(int dividerPaddingPx) {
  this.dividerPadding = dividerPaddingPx;
  invalidate();
  }
  public int getDividerPadding() {
  return dividerPadding;
  }
  public void setScrollOffset(int scrollOffsetPx) {
  this.scrollOffset = scrollOffsetPx;
  invalidate();
  }
  public int getScrollOffset() {
  return scrollOffset;
  }
  public void setShouldExpand(boolean shouldExpand) {
  this.shouldExpand = shouldExpand;
  notifyDataSetChanged();
  }
  public boolean getShouldExpand() {
  return shouldExpand;
  }
  public boolean isTextAllCaps() {
  return textAllCaps;
  }
  public void setAllCaps(boolean textAllCaps) {
  this.textAllCaps = textAllCaps;
  }
  public void setTextSize(int textSizePx) {
  this.tabTextSize = textSizePx;
  updateTabStyles();
  }
  public int getTextSize() {
  return tabTextSize;
  }
  public void setTextColor(int textColor) {
  this.tabTextColor = textColor;
  updateTabStyles();
  }
  public void setTextColorResource(int resId) {
  this.tabTextColor = getResources().getColor(resId);
  updateTabStyles();
  }
  public int getTextColor() {
  return tabTextColor;
  }
  public void setSelectedTextColor(int textColor) {
  this.selectedTabTextColor = textColor;
  updateTabStyles();
  }
  public void setSelectedTextColorResource(int resId) {
  this.selectedTabTextColor = getResources().getColor(resId);
  updateTabStyles();
  }
  public int getSelectedTextColor() {
  return selectedTabTextColor;
  }
  public void setTypeface(Typeface typeface, int style) {
  this.tabTypeface = typeface;
  this.tabTypefaceStyle = style;
  updateTabStyles();
  }
  public void setTabBackground(int resId) {
  this.tabBackgroundResId = resId;
  updateTabStyles();
  }
  public int getTabBackground() {
  return tabBackgroundResId;
  }
  public void setTabPaddingLeftRight(int paddingPx) {
  this.tabPadding = paddingPx;
  updateTabStyles();
  }
  public int getTabPaddingLeftRight() {
  return tabPadding;
  }
  @Override
  public void onRestoreInstanceState(Parcelable state) {
  SavedState savedState = (SavedState) state;
  super.onRestoreInstanceState(savedState.getSuperState());
  currentPosition = savedState.currentPosition;
  requestLayout();
  }
  @Override
  public Parcelable onSaveInstanceState() {
  Parcelable superState = super.onSaveInstanceState();
  SavedState savedState = new SavedState(superState);
  savedState.currentPosition = currentPosition;
  return savedState;
  }
  static class SavedState extends BaseSavedState {
  int currentPosition;
  public SavedState(Parcelable superState) {
    super(superState);
  }
  private SavedState(Parcel in) {
    super(in);
    currentPosition = in.readInt();
  }
  @Override
  public void writeToParcel(Parcel dest, int flags) {
    super.writeToParcel(dest, flags);
    dest.writeInt(currentPosition);
  }
  public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
    @Override
    public SavedState createFromParcel(Parcel in) {
    return new SavedState(in);
    }
    @Override
    public SavedState[] newArray(int size) {
    return new SavedState[size];
    }
  };
  }
}

xml布局中直接引用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:layout_height="match_parent">
    <com.baobao.pagerslidingtabstrip.PagerSlidingTabStrip
    android:id="@+id/slide_tabs"
    android:layout_width="match_parent"
    android:layout_height="40dp"/>
  <android.support.v4.view.ViewPager
    android:id="@+id/slide_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

Activity代码

package com.baobao.pagerslidingtabstrip;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.TypedValue;
public class MainActivity extends FragmentActivity {
  private static final int VIEW_PAGE_SIZE = 8;
  private PagerSlidingTabStrip mSlideTabs;
  private DisplayMetrics mDm;
  private ViewPager mSlidePager;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //初始化 标签栏
  mDm = getResources().getDisplayMetrics();
  mSlidePager = (ViewPager) findViewById(R.id.slide_pager);
  mSlideTabs = (PagerSlidingTabStrip) findViewById(R.id.slide_tabs);
  if (mSlidePager.getAdapter() == null) {
    mSlidePager.setOffscreenPageLimit(VIEW_PAGE_SIZE);
    mSlidePager.setAdapter(new TabPageIndicatorAdapter(getSupportFragmentManager()));
  }
  mSlideTabs.setViewPager(mSlidePager);
  setTabsValue();
  }
  /**
   * 设置PagerSlidingTabStrip的样式
   */
  private void setTabsValue() {
  // 设置Tab是自动填充满屏幕的
  mSlideTabs.setShouldExpand(true);
  // 设置Tab的分割线是透明的
  //tabs.setDividerColor(Color.TRANSPARENT);
  // 设置Tab底部线的高度
  mSlideTabs.setUnderlineHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 2, mDm));
  // 设置Tab Indicator的高度
  mSlideTabs.setIndicatorHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 1, mDm));
  // 设置Tab标题文字的大小
  mSlideTabs.setTextSize((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, 14, mDm));
  // 设置Tab Indicator的颜色
  mSlideTabs.setIndicatorColor(getResources().getColor(R.color.common_blue));
  // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
  mSlideTabs.setSelectedTextColor(getResources().getColor(R.color.common_blue));
  // 取消点击Tab时的背景色
  mSlideTabs.setTabBackground(0);
  }
}

样式文件 attrs.xml

<resources>
  <declare-styleable name="Themes">
    <attr name="numberProgressBarStyle" format="reference" />
  </declare-styleable>
  <declare-styleable name="mGallery">
    <attr name="android:galleryItemBackground" />
  </declare-styleable>
     <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>
</resources>

效果图如上图，希望可以帮助到大家，如果大家还有其他问题欢迎加入我的qq群讨论交流：
开发一群：454430053开发二群：537532956