安卓筆記之PagerSlidingTabStrip
阿新 • • 發佈：2019-02-11
今天學習了一下開源框架PagerSlidingTabStrip
這個框架很實用，用的也很廣。就是有點小缺陷，如果你直接用它的jar包的話，他的原始碼中預設的標籤字型和顏色不能夠修改，而且還沒有提供設定的方法。
private int tabTextSize = 12;//預設的tab字型大小
private int tabTextColor = 0xFF666666;//預設的顏色
庫檔案匯入
如果你在專案中需要修改它的標籤屬性的話最好還是別用jar包，直接依賴它的庫檔案。
首先把github中的原始碼下載下來，然後找到library資料夾，把它匯入的當前的專案所處的project中，然後將library
android {
compileSdkVersion 你自己的buildToolsVersion 你自己的defaultConfig {
minSdkVersion 15targetSdkVersion 你自己的}
在你的專案的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>