PagerSlidingTabStrip介绍及使用，让ViewPager更绚丽

以前一直想着，ViewPager中间的那个横线怎么跟着屏幕的滑动而滑动，如下图所示：

我们可以看到中间的那个红线在跟着屏幕滑动而滑动

现在github上已经有了这个开源项目，所以我们可以直接拿来用，很方便很实用。文章末尾我将放上资源，可以直接下载。

官网地址：https://github.com/astuetz/PagerSlidingTabStrip

关于怎么导入包，怎么导入程序，这里不再进行赘述，你可以看我之前的一个文章，有详细步骤：

http://blog.csdn.net/harryweasley/article/details/41413547

我简单翻译一下官网上的内容：

交互式页面指示器控件，完美配合ViewPager控件（来自Android Support Library）

注意：这里的ViewPager的适配器必须是继承的FragmentPagerAdapter，并重写getPageIconResId(int position)或者getPageTitle(int position)方法

用法

在sample/文件夹下有一个现成的可运行工程

1.加入library作为本地包工程，或者加入依赖在build.gradle（我对gradle不是很了解，所以用前面那个导入包的方法）

[java]  view plain  copy

1. dependencies {  
2.     compile 'com.astuetz:pagerslidingtabstrip:1.0.1'  
3. }  

2.在你的layout里加入PagerSlidingTabStrip控件，它通常要在ViewPager控件之上

[java]  view plain  copy

1. <com.astuetz.PagerSlidingTabStrip  
2.     android:id="@+id/tabs"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="48dip" />  

3.在你的onCreate方法（或者onCreateView对于一个fragment），绑定 PagerSlidingTabStrip 控件到ViewPager上

[java]  view plain  copy

1. // 初始化ViewPager并且添加适配器  
2.  ViewPager pager = (ViewPager) findViewById(R.id.pager);  
3.  pager.setAdapter(new TestAdapter(getSupportFragmentManager()));  
4.   
5.  //向ViewPager绑定PagerSlidingTabStrip    
6.  PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
7.  tabs.setViewPager(pager);  

4.（可选的）如果你想在你的ViewPager用到 onPageChangeListener监听方法，你应该如下设置，而不是直接用ViewPager设置

[java]  view plain  copy

1. // 从上面继续  
2.  tabs.setOnPageChangeListener(mPageChangeListener);  

个性化设置

为了让你的app不像另一个 Play Store上面的app，你可以添加这些属性来做出自己独具一格的应用。

• pstsIndicatorColor Color of the sliding indicator  滑动条的颜色
• pstsUnderlineColor Color of the full-width line on the bottom of the view  滑动条所在的那个全宽线的颜色
• pstsDividerColor Color of the dividers between tabs   每个标签的分割线的颜色
• pstsIndicatorHeightHeight of the sliding indicator       滑动条的高度
• pstsUnderlineHeight Height of the full-width line on the bottom of the view    滑动条所在的那个全宽线的高度
• pstsDividerPadding Top and bottom padding of the dividers   分割线底部和顶部的填充宽度
• pstsTabPaddingLeftRight Left and right padding of each tab   每个标签左右填充宽度
• pstsScrollOffset Scroll offset of the selected tab
• pstsTabBackground Background drawable of each tab, should be a StateListDrawable  每个标签的背景，应该是一个StateListDrawable  
• pstsShouldExpand If set to true, each tab is given the same weight, default false   如果设置为true，每个标签是相同的控件，均匀平分整个屏幕，默认是false
• pstsTextAllCaps If true, all tab titles will be upper case, default true   如果为true，所有标签都是大写字母，默认为true

所有的属性都有他们自己的getter和setter方法来随时改变他们

接下来，我将写下我自己的小demo，总结自己遇到的问题，来记录一下关于这个控件的问题。

先看下截图

首先是activity_main.xml文件

[java]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment">  
6.   
7.     <com.astuetz.PagerSlidingTabStrip  
8.         android:id="@+id/tabs"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="48dip"  
11.         app:pstsShouldExpand="true"  
12.         />  
13.   
14.     <android.support.v4.view.ViewPager  
15.         android:id="@+id/viewPager"  
16.         android:layout_below="@id/tabs"  
17.         android:layout_width="fill_parent"  
18.         android:layout_height="fill_parent" />  
19.   
20. </RelativeLayout>  

其中，1.android:layout_below="@id/tabs"一定要记得写上，是让ViewPager控件在tabs之  

2.   xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment， 这句话是我的理解是，如果你想要用PagerSlidingTabStrip，就必须加上，不过他会自动加，不需要你来管他。

接下来是三个fragment，都是很简单的设置了不同的颜色背景而已，我这里就不再贴出代码了，稍后会放上自己的小demo

最后，我们来看看MainActivity中都进行了什么处理吧，

[java]  view plain  copy

1. package com.example.viewfragment;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentActivity;  
6. import android.support.v4.app.FragmentManager;  
7. import android.support.v4.app.FragmentPagerAdapter;  
8. import android.support.v4.view.ViewPager;  
9.   
10. import com.astuetz.PagerSlidingTabStrip;  
11.   
12. public class MainActivity extends FragmentActivity {  
13.     ViewPager viewPager;  
14.     PagerSlidingTabStrip tabs;  
15.   
16.     @Override  
17.     protected void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.         viewPager = (ViewPager) findViewById(R.id.viewPager);  
21.         viewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager()));  
22.         tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
23. setTabsValue();
    
24.         tabs.setViewPager(viewPager);  
25.     }  

private void setTabsValue() {
// 设置Tab是自动填充满屏幕的
tabs.setShouldExpand(true);
// 设置Tab的分割线是透明的
tabs.setDividerColor(Color.TRANSPARENT);
// 设置Tab底部线的高度
tabs.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, dm));
// 设置Tab Indicator的高度
tabs.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, dm));
// 设置Tab标题文字的大小
tabs.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));
// 设置Tab Indicator的颜色
tabs.setIndicatorColor(Color.parseColor("#0078dc"));
// 设置选中Tab文字的颜色 (这是我自定义的一个方法)
tabs.setSelectedTextColor(Color.parseColor("#0078dc"));
// 设置正常Tab文字的颜色 (这是我自定义的一个方法)
tabs.setTextColor(Color.parseColor("#737373"));
// 取消点击Tab时的背景色
tabs.setTabBackground(0);
}

1.   
2.     class myPagerAdapter extends FragmentPagerAdapter {  
3.         String[] title = { "项目一", "项目二", "项目三" };  
4.         Fragment1 fragment1;  
5.         Fragment2 fragment2;  
6.         Fragment3 fragment3;  
7.   
8.         public myPagerAdapter(FragmentManager fm) {  
9.             super(fm);  
10.         }  
11.   
12.         @Override  
13.         public Fragment getItem(int position) {  
14.             switch (position) {  
15.             case 0:  
16.                 fragment1 = new Fragment1();  
17.                 return fragment1;  
18.             case 1:  
19.                 fragment2 = new Fragment2();  
20.                 return fragment2;  
21.             case 2:  
22.                 fragment3 = new Fragment3();  
23.                 return fragment3;  
24.   
25.             default:  
26.                 return null;  
27.             }  
28.         }  
29.   
30.         @Override  
31.         public int getCount() {  
32.   
33.             return title.length;  
34.         }  
35.   
36.         @Override  
37.         public CharSequence getPageTitle(int position) {  
38.             return title[position];  
39.         }  
40.   
41.     }  
42.   
43. }  

接下来是补充内容：

1.MainActivity继承的是FragmentActivity，因为想要用到getSupportFragmentManager()来构造适配器

2.

[java]  view plain  copy

1. public Fragment getItem(int position) {  
2.             switch (position) {  
3.             case 0:  
4.                 fragment1 = new Fragment1();  
5.                 return fragment1;  
6.             case 1:  
7.                 fragment2 = new Fragment2();  
8.                 return fragment2;  
9.             case 2:  
10.                 fragment3 = new Fragment3();  
11.                 return fragment3;  
12.   
13.             default:  
14.                 return null;  
15.             }  
16.         }  

在做这个方法的时候，出现了cannot convert from Fragment1 to Fragment这个错误，关于这个错误，你可以点击

http://blog.csdn.net/jason0539/article/details/9712273进行查看。

3.如果是重写的getPageTitle(int position)这个方法，则tabs是文字标题；如果是重写的getPageIconResId(int position)，则tabs是图标显示。

如图所示：

上面四个标签就是重写的getPageIconResId(int position)

[java]  view plain  copy

1. private final int[] ICONS = { R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,  
2.                 R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome };  
3.   
4.           
5.   
6.         @Override  
7.         public int getPageIconResId(int position) {  
8.             return ICONS[position];  
9.         }  

4.关于官网上的demo上fragment是这样给出的

[java]  view plain  copy

1. /* 
2.  * Copyright (C) 2013 Andreas Stuetz <andreas.stuetz@gmail.com> 
3.  * 
4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
5.  * you may not use this file except in compliance with the License. 
6.  * You may obtain a copy of the License at 
7.  * 
8.  *      http://www.apache.org/licenses/LICENSE-2.0 
9.  * 
10.  * Unless required by applicable law or agreed to in writing, software 
11.  * distributed under the License is distributed on an "AS IS" BASIS, 
12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
13.  * See the License for the specific language governing permissions and 
14.  * limitations under the License. 
15.  */  
16.   
17. package com.astuetz.viewpager.extensions.sample;  
18.   
19. import android.os.Bundle;  
20. import android.support.v4.app.Fragment;  
21. import android.util.TypedValue;  
22. import android.view.Gravity;  
23. import android.view.LayoutInflater;  
24. import android.view.View;  
25. import android.view.ViewGroup;  
26. import android.widget.FrameLayout;  
27. import android.widget.FrameLayout.LayoutParams;  
28. import android.widget.TextView;  
29.   
30. public class SuperAwesomeCardFragment extends Fragment {  
31.   
32.     private static final String ARG_POSITION = "position";  
33.   
34.     private int position;  
35.   
36.     public static SuperAwesomeCardFragment newInstance(int position) {  
37.         SuperAwesomeCardFragment f = new SuperAwesomeCardFragment();  
38.         Bundle b = new Bundle();  
39.         b.putInt(ARG_POSITION, position);  
40.         f.setArguments(b);  
41.         return f;  
42.     }  
43.   
44.     @Override  
45.     public void onCreate(Bundle savedInstanceState) {  
46.         super.onCreate(savedInstanceState);  
47.   
48.         position = getArguments().getInt(ARG_POSITION);  
49.     }  
50.   
51.     @Override  
52.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
53.   
54.         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
55.   
56.         FrameLayout fl = new FrameLayout(getActivity());  
57.         fl.setLayoutParams(params);  
58.   
59.         final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources()  
60.                 .getDisplayMetrics());  
61.   
62.         TextView v = new TextView(getActivity());  
63.         params.setMargins(margin, margin, margin, margin);  
64.         v.setLayoutParams(params);  
65.         v.setLayoutParams(params);  
66.         v.setGravity(Gravity.CENTER);  
67.         v.setBackgroundResource(R.drawable.background_card);  
68.         v.setText("CARD " + (position + 1));  
69.   
70.         fl.addView(v);  
71.         return fl;  
72.     }  
73.   
74. }  

关于TypedValue.applyDimension（）这个方法，你可以查看 http://blog.csdn.net/harryweasley/article/details/42172321

关于params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html

我这里就不在解释了

好了，关于PagerSlidingTabStrip我已经基本写完了，收获还是很大的。

接下来总结一下，我这个文章的其他链接地址：

1.关于cannot convert from Fragment1 to Fragment这个错误，你可以查看http://blog.csdn.net/jason0539/article/details/9712273

2.关于TypedValue.applyDimension（）这个方法，你可以查看http://blog.csdn.net/harryweasley/article/details/42172321
3.关于params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html
4.本篇博客地址：。。。。。。。。。。

5.PagerSlidingTabStrip在github上的地址  ，https://github.com/astuetz/PagerSlidingTabStrip

6.自己应用的下载地址http://download.csdn.net/detail/harryweasley/8314811

7.官网的PagerSlidingTabStrip下载地址  http://download.csdn.net/detail/harryweasley/8314807

8.关于怎么导入包，怎么导入程序，你可以查看  http://blog.csdn.net/harryweasley/article/details/41413547