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

文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。

原文链接：wukong.blog.csdn.net/article/details/79360351