android 中 viewpager 滑动的指示器

先看下效果图：

这个需要用到1个开源的 库，这个后面也会说下的。

工程目录：

1. MainActivity.java

1. public class MainActivity extends FragmentActivity {
2. private ViewPagerFrameAdapter adapter;        //适配器（标题和内容）
3. private ViewPager mPager;
4. private TabPageIndicator         tabbPageIndicator;         //
5. private UnderlinePageIndicatorEx underlinePageIndicator;
6. private  int COUNT = 0;
7. private List<String>   titles = new ArrayList<String>(); //标题
8. @Override
9. protected void onCreate(Bundle bundle) {
10. super.onCreate(bundle);
11. requestWindowFeature(Window.FEATURE_NO_TITLE);
12. setContentView(R.layout.activity_main);
13. //标题，这里自己造的假数据
14. for (int j = 0; j < 3 ; j++){
15. titles.add( "第"+ j +"标签卡");
16. }
17. mPager = (ViewPager)findViewById(R.id.pager);
18. adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
19. mPager.setAdapter(adapter);
20. //得到指示器
21. tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);
22. tabbPageIndicator.setViewPager(mPager);
23. //下标
24. underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
25. underlinePageIndicator.setViewPager(mPager);
26. underlinePageIndicator.setFades(false);
27. //设置指示器
28. tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
29. }
30. //adapter 没啥好说的 跟前面的一样
31. private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
32. private List<String> title; //页面标题头部数据
33. public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
34. super(fm);
35. this.title = title;
36. }
37. //根据position 返回 fragment
38. @Override
39. public Fragment getItem(int position) {
40. return ArrayFragment.newInstance(position);
41. }
42. //size
43. @Override
44. public int getCount() {
45. return title.size();
46. }
47. //顶部的title
48. @Override
49. public CharSequence getPageTitle(int position) {
50. if (titles != null){
51. return titles.get(position).toString();
52. }
53. return super.getPageTitle(position);
54. }
55. }
56. }

UnderlinePageIndicatorEx.java

1. //继承这个然后重写
2. public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
3. public UnderlinePageIndicatorEx(Context context) {
4. super(context, null);
5. }
6. public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
7. super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
8. }
9. public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
10. super(context, attrs, defStyle);
11. }
12. //自身的 ViewPage传递过去
13. @Override
14. public void setViewPager(ViewPager viewPager) {
15. if (mViewPager == viewPager){
16. return;
17. }
18. //          if (mViewPager != null) {
19. //              mViewPager.setOnPageChangeListener(null);
20. //          }
21. if (viewPager.getAdapter() == null) {
22. throw new IllegalStateException(" pager 没有 加入 adapter");
23. }
24. mViewPager = viewPager;
25. //          mViewPager.setOnPageChangeListener(this);
26. invalidate();
27. post(new Runnable(){
28. @Override public void run() {
29. if (mFades) {
30. post(mFadeRunnable);
31. }
32. }
33. });
34. }
35. }

ArrayFragment.java

1. public class ArrayFragment extends Fragment{
2. private int position;
3. public ArrayFragment(int position){
4. this.position = position;
5. }
6. // 返回   viwePager 下面滑动的页面
7. public static ArrayFragment newInstance(int position){
8. return new ArrayFragment(position);
9. }
10. @Override
11. public void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. }
14. @Override
15. public void onDestroy() {
16. super.onDestroy();
17. }
18. // 根据position 返回不同的view
19. @Override
20. public View onCreateView(LayoutInflater inflater, ViewGroup container,
21. Bundle savedInstanceState) {
22. View view = inflater.inflate(R.layout.layoutaa, null);
23. return view;
24. }
25. }

好了接下来是 布局xml了。

1. <LinearLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical"
6. >
7. <!--  标题      和      标题下面的  指示器  -->
8. <LinearLayout
9. android:layout_width="fill_parent"
10. android:layout_height="35dp"
11. android:orientation="vertical"
12. android:background="@drawable/main_header_background">
13. <com.viewpagerindicator.TabPageIndicator
14. android:id="@+id/tab_indicator"
15. android:layout_height="wrap_content"
16. android:layout_width="fill_parent"/>
17. <com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
18. android:id="@+id/underline_indicator"
19. android:layout_height="3dip"
20. android:layout_width="fill_parent"
21. android:layout_alignParentBottom="true"/>
22. </LinearLayout>
23. <android.support.v4.view.ViewPager
24. android:id="@+id/pager"
25. android:layout_width="fill_parent"
26. android:layout_height="fill_parent"/>
27. </LinearLayout>

接下来设置 滑动指示器的style

1. <!-- 总 style  直接引用  这个   由  tab style  和    Indicator style 组成 -->
2. <style name="StyledAllIndicators" parent="@android:style/Theme.Light">
3. <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
4. <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
5. </style>
6. <!-- tab的 style -->
7. <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
8. <item name="android:background">#00000000</item>
9. <item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
10. <item name="android:textColor">@color/selector_tab</item>
11. <item name="android:textSize">20sp</item>
12. <!-- 分割线，可有可无的 -->
13. <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
14. <item name="android:dividerPadding">10dip</item>
15. <item name="android:showDividers">middle</item>
16. <item name="android:paddingTop">4dp</item>
17. <item name="android:paddingLeft">8dp</item>
18. <item name="android:paddingBottom">4dp</item>
19. <item name="android:paddingRight">8dp</item>
20. <item name="android:fadingEdge">horizontal</item>
21. <item name="android:fadingEdgeLength">8dp</item>
22. </style>
23. <style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium">
24. <item name="android:typeface">monospace</item>
25. </style>
26. <!--  下标的指示器的颜色 -->
27. <style name="CustomUnderlinePageIndicator">
28. <item name="selectedColor">#EB5548</item>
29. <item name="android:background">#00000000</item>
30. <item name="fadeLength">1000</item>
31. <item name="fadeDelay">1000</item>
32. </style>

selector_tab.xml     这个是 选择器 在style中引用的，是用来切换 被选中的背景色的

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <item android:state_selected="true" android:color="#91D228" />
4. <item android:state_focused="true" android:color="#91D228" />
5. <item android:color="#dddddd" />
6. </selector>

好了 ，基本就这些了   fragment的的那个xml  自己随意画吧， 那个开源库随后上传。