PagerSlidingTabStrip实现网易新闻导航栏效果

Posted 2020-06-13

PagerSlidingTabStrip实现网易新闻导航栏效果
之前在项目当中有一个需求，实现类似网易新闻标题导航的效果，于是在在github搜索下，找了一个开源PagerSlidingTabStrip，研究了这个空间的使用和一些方法，在此与大家分享，希望能够帮到有需要的朋友,好了废话不多讲，直接上代码。          

package com.example.textpagerslidingtabstrip.activity;
import com.example.textpagerslidingtabstrip.R;
import com.example.textpagerslidingtabstrip.weight.PagerSlidingTabStrip;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;

/**
 * 实现网易新闻导航栏效果
 * @author xll
 */
public class MainActivity extends FragmentActivity {
 
 private static final String TAG = "MainActivity.this";
 
 /** 导航Tab*/
 private PagerSlidingTabStrip tab;
 /** 导航滑动所需的viewPager*/
 private ViewPager viewPager;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  InitTabInfo();
 }
 private void InitTabInfo() {
  tab = (PagerSlidingTabStrip) findViewById(R.id.tabs);
  //设置tab背景色
//  tab.setBackgroundColor(Color.BLUE);
  //设置tab的透明度
//  tab.setAlpha(0.7f);
  //Android系统默认支持三种字体，分别为：“sans”, “serif”, “monospace"，除此之外还可以使用其他字体文件（*.ttf）
//  Typeface typeface = Typeface.defaultFromStyle(R.style.textAppearance);
//  tab.setTypeface(typeface,R.style.textAppearance);
  //选中的tab位置滚动到第一位
  tab.setScrollOffset(0);
  // true 大写  false 小写
  tab.setShouldExpand(true);
  tab.setIndicatorHeight(10);//滑动指示器的高度
  //滑动指示器的颜色
  tab.setIndicatorColor(getResources().getColor(R.color.red));
  //tab间隔的线的颜色
  tab.setDividerColor(getResources().getColor(R.color.huise));
  //tab未选中时的字体颜色
  tab.setTextColor(getResources().getColor(R.color.heise));
  //tab 选中时字体颜色
  tab.setSelectedTextColor(getResources().getColor(R.color.red));
  viewPager = (ViewPager) findViewById(R.id.viewPager);
  viewPager.setAdapter(new TabAdapter(getSupportFragmentManager()));
  //给ViewPager设置动画
//  viewPager.setAnimation(animation);
  tab.setViewPager(viewPager);
//  viewPager.setOnPageChangeListener(new MyPageChangeListener());
  tab.setOnPageChangeListener(new MyPageChangeListener());
 }
 /**
  * Tab 设置监听
  */
 class MyPageChangeListener implements OnPageChangeListener{
  @Override
  public void onPageScrollStateChanged(int arg0) {
   // TODO Auto-generated method stub
   Log.i(TAG, "onPageScrollStateChanged");
  }
  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
   // TODO Auto-generated method stub
   Log.i(TAG, "onPageScrolled");
  }
  @Override
  public void onPageSelected(int arg0) {
   // TODO Auto-generated method stub
   Log.i(TAG, "onPageSelected");
   int position = tab.getChildCount();
   Log.i(TAG, position+"====position");
  }
 }
 
 
 
 
 /**
  * 初始化Fragment
  */
 class TabAdapter extends FragmentStatePagerAdapter{
  /** 导航标题内容*/
  private  String[] titles={"新闻","情感","军事","头条","天气","财经"};
  public TabAdapter(FragmentManager fm) {
   super(fm);
   // TODO Auto-generated constructor stub
  }
  @Override
  public Fragment getItem(int arg0) {
   Fragment fragment = new TabFragment(titles[arg0]);
   return fragment;
  }
  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return titles.length==0?0:titles.length;
  }
  
  /**
   * 返回CharSequence 此方法必写
   */
  @Override
  public CharSequence getPageTitle(int position) {
   // TODO Auto-generated method stub
   return (titles[position]==null||titles[position].equals(""))?null:titles[position];
  }
 }
 
 
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button, so long
  // as you specify a parent activity in AndroidManifest.xml.
  int id = item.getItemId();
  if (id == R.id.action_settings) {
   return true;
  }
  return super.onOptionsItemSelected(item);
 }
}
Activity的代码比较简单，其中的一些属性没有全部列出，有兴趣的朋友可以自己试试。
 
 
//Fragment 代码片段
package com.example.textpagerslidingtabstrip.activity;
import com.example.textpagerslidingtabstrip.R;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView.FindListener;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class TabFragment extends Fragment {
 private String titles;
 private LayoutInflater mInflater;
 private View f_view;
 private TextView textview;
 private Context mContext;
 
 public TabFragment() {
  // TODO Auto-generated constructor stub
 }
     public TabFragment(String titless) {
  super();
  this.titles = titless;
 }
 @Override
 public View onCreateView(LayoutInflater inflater,
    ViewGroup container,  Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  mInflater = inflater;
  mContext = getActivity();
  f_view = inflater.inflate(R.layout.tab_farament, container, false);
  textview = (TextView) f_view.findViewById(R.id.textview);
  textview.setText(titles);
  return f_view;
 }
}
 
//PagerSlidingTabStrip 源码
package com.example.textpagerslidingtabstrip.weight;
import java.util.Locale;
import com.example.textpagerslidingtabstrip.R;
import android.annotation.SuppressLint;
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;

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 float currentPositionOffset = 0f;
 private Paint rectPaint;
 private Paint dividerPaint;
 private int indicatorColor = 0xFF666666;
 private int underlineColor = 0x1A000000;
 private int dividerColor = 0x1A000000;
 private boolean shouldExpand = true;
 private boolean textAllCaps = true;
 private int scrollOffset = 52;
 private int indicatorHeight = 5;
 private int underlineHeight = 2;
 private int dividerPadding = 12;
 private int tabPadding = 24;
 private int dividerWidth = 1;
 
 /** 可以自行改变值*/
 private int tabTextSize = 14;                   //Tab字体大小
 private int tabTextColor = 0xFF666666;   //tab子体颜色
 private int selectedTabTextColor = 0xFF666666;  //选中Tab的颜色
 private int selectedPosition = 0;
 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);
  // 
  selectedTabTextColor = a.getColor(
    R.styleable.PagerSlidingTabStrip_selectedTabTextColor,
    indicatorColor);
  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() {
     @SuppressWarnings("deprecation")
     @SuppressLint("NewApi")
     @Override
     public void onGlobalLayout() {
      // if (Build.VERSION.SDK_INT <
      // Build.VERSION_CODES.JELLY_BEAN) {
      getViewTreeObserver()
        .removeGlobalOnLayoutListener(this);
      // } else {
      // getViewTreeObserver().removeOnGlobalLayoutListener(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 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 underline
  rectPaint.setColor(underlineColor);
  canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(),
    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 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;
  requestLayout();
 }
 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;
 }
 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];
   }
  };
 }
}
效果图片我就不截取了，这里提供了Demo的连接http://download.csdn.net/detail/xianglinglong/9249783