ViewPager Indicator的使用方法

原文：http://my.oschina.net/u/1403288/blog/208402

项目源码：https://github.com/wangjing0311/ViewPagerIndicator.git

一、源码分析

1.PageIndicator接口，它里面定义了最重要和基本的indicator表现出的一些方法：
    1.1 首先一个indicator必须要与一个ViewPager关联在一起，所以它提供了一个setViewPager方法。
    1.2 它扩展了ViewPager.OnPageChangeListener接口，表示接管了ViewPager的Pager改变时的监听处理，
          这也是为什么为ViewPager设置OnPageChangeListener监听器时不能设置在ViewPager上而必须设置在
          indicator上的原因。
    1.3 还有一个notifyDataSetChanged通知方法，表示为这个ViewPager提供View(一般是Fragment)的  Adapter 里面的数据集发生变化时，执行的动作，这里可增加相关的逻辑。 

2.Viewpager Indicator的实现类（6个）

　 2.1 小圆圈类型的
    2.2 带图标类型的                    
    2.3 小横线类型的，距离屏幕最下边端有一定的距离。
    2.4 标签类型的（Tab）
    2.5 标题类型的，与标签类型的有点像，但它当前的标题页的左/右边的标题会卷起，即往两端缩进去。
    2.6 屏幕底部小横线类型的，并且会占满整行。                    

二、Demo分析

1. Demo项目的设计
    项目由一个ListSamples的ListActivity入口，它主要用作组装所有的子indicator的列表。
    TestFragment.java，所有ViewPager上真正显示的视图。
    TestFragmentAdapter.java，所有ViewPager里的Adapter，为ViewPager生成TestFragment。
    Samplexxx.java，所有的indicator的显示，一个类显示一种使用方法或特性。 

2.使用

1）layout.xml

<com.viewpagerindicator.TabPageIndicator
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

2)Activity将viewpager与indicator联系在一起

ViewPager pager = (ViewPager)findViewById(R.id.viewpager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

//Bind the title indicator to the adapter
TabPageInitlecator titleIndicator = (TabPageITitlePageIndicatoreById(R.id.titles);
titleIndicator.setViewPager(pager);

3）加入监听（不设置在ViewPager上，要设置在Indicator上）

titleIndicator.setOnPageChangeListener(mPageChangeListener);

3.修改indicator的样式（Theme）

1)AndroidManifest.xml

<activity
    android:name=".SampleCirclesStyledTheme"
    android:label="Circles/Styled (via theme)"
    android:theme="@style/StyledIndicators">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
    </intent-filter>
</activity>

android:theme="@style/StyledIndicators" ==> values/styles.xml

<resources>
    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>
        <item name="vpiLinePageIndicatorStyle">@style/CustomLinePageIndicator</item>
        <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
        <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
    </style>

2)Layout.xml

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/indicator"
    android:padding="10dip"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:background="#FFCCCCCC"
    app:radius="10dp"
    app:fillColor="#FF888888"
    app:pageColor="#88FF0000"
    app:strokeColor="#FF000000"
    app:strokeWidth="2dp"
    />

3)Activity的对象方法

CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
mIndicator = indicator;
indicator.setViewPager(mPager);

final float density = getResources().getDisplayMetrics().density;
indicator.setBackgroundColor(0xFFCCCCCC);
indicator.setRadius(10 * density);
indicator.setPageColor(0x880000FF);
indicator.setFillColor(0xFF888888);
indicator.setStrokeColor(0xFF000000);
indicator.setStrokeWidth(2 * density);