三叶草 发表于 2021-12-31 16:31:27

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;
      }
    };
}

}
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




https://blog.51cto.com/u_15146212/4868372
页: [1]
查看完整版本: Android 标签栏pagerslidingtabstrip用法实例(含Demo)