安卓笔记之PagerSlidingTabStrip

今天学习了一下开源框架PagerSlidingTabStrip

github网址https://github.com/astuetz/PagerSlidingTabStrip

这个框架很实用，用的也很广。就是有点小缺陷，如果你直接用它的jar包的话，他的源码中默认的标签字体和颜色不能够修改，而且还没有提供设置的方法。

private int tabTextSize = 12;//默认的tab字体大小
private int tabTextColor = 0xFF666666;//默认的颜色

库文件导入

如果你在项目中需要修改它的标签属性的话最好还是别用jar包，直接依赖它的库文件。

首先把github中的源码下载下来，然后找到library文件夹，把它导入的当前的项目所处的project中，然后将library改为PagerSlidingTabStrip，修改一下这个库文件的gradle：

android {
    compileSdkVersion 你自己的
    buildToolsVersion 你自己的
    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 你自己的
    }

在你的项目的gradle中添加

compile project(':PagerSlidingTabStrip')

再同步一下，这样就可以用了。

PagerSlidingTabStrip的使用

用法很简单，把它当作一个普通的控件就可以了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.admin.myapplication.MainActivity">
<com.astuetz.PagerSlidingTabStrip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/pagerSliding"
    app:pstsIndicatorColor="@color/colorPrimaryDark"
    android:layout_height="40dp">
</com.astuetz.PagerSlidingTabStrip>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/viewPager"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</RelativeLayout>

在使用的时候一定要注意viewPager的setAdapter方法一定要在mPagerSlidingTabStrip.setViewPager(mViewPager);的前面执行，不然会出现空指针。

public class MainActivity extends Activity {
    private PagerSlidingTabStrip mPagerSlidingTabStrip;
    private ViewPager mViewPager;
    private HomeAdapter mHomeAdapter;
    private String[] mMainTitles={"主页","娱乐","科技","美食","新闻"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initData() {
        mHomeAdapter=new HomeAdapter();
        mViewPager.setAdapter(mHomeAdapter);
        mPagerSlidingTabStrip.setViewPager(mViewPager);//要在setAdapter的后面执行
    }

    private void initView() {
        mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.pagerSliding);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
    }

       private class HomeAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            if(mMainTitles!=null)
            return mMainTitles.length;
            return 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView textView=new TextView(UIUtils.getContext());
            textView.setText(mMainTitles[position]);
            return textView;
        }

        /**
         * 必须要重写此方法
         * @param position
         * @return
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return mMainTitles[position];
        }
    }

如何改成你想要的PagerSlidingTabStrip？

如果你想要为在滑动的同时改变标签的字体和颜色，可以通过以下方式：

在源码中添加以下属性
private int tabSelectedSize=18;//选择时的字体大小
private int tabSelectedColor=0x1F00ff00;//选择时的字体颜色
private int mSelectedPosition;//被选择的下标

在源码的attr.xml文件中添加

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <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" />
        <!--添加字体的属性-->
        <attr name="tabSelectedColor" format="color"/>
        <attr name="tabSelectedSize" format="dimension"/>
        <attr name="tabTextSize" format="dimension"/>
        <attr name="tabTextColor" format="color"/>

    </declare-styleable>

</resources>

在源码中的添加这写代码到其他属性相同位置

tabTextColor=a.getColor(R.styleable.PagerSlidingTabStrip_tabTextColor,tabTextColor);
tabSelectedColor=a.getColor(R.styleable.PagerSlidingTabStrip_tabSelectedColor,tabSelectedColor);
tabTextSize=a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_tabTextSize,tabTextSize);
tabSelectedSize=a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_tabSelectedSize,tabSelectedSize);

在PageListener类中

@Override
public void onPageSelected(int position) {
if (delegatePageListener != null) {
delegatePageListener.onPageSelected(position);
}
mSelectedPosition = position;//将mselectedPosition的值改为当前的position
updateTabStyles();//更新标签样式
}

在updateTabStyles()中

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==mSelectedPosition){
tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabSelectedSize);
tab.setTextColor(tabSelectedColor);
}
}


}

}

之后就可以用了

<com.astuetz.PagerSlidingTabStrip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/pagerSliding"
    app:tabTextColor="@color/colorAccent"
    app:tabSelectedColor="#00ff00"
    app:tabTextSize="14sp"
    app:tabSelectedSize="16sp"
    app:pstsIndicatorColor="@color/colorPrimaryDark"
    app:pstsIndicatorHeight="2dp"
    android:layout_height="40dp">
</com.astuetz.PagerSlidingTabStrip>