Android開源控件ViewPager Indicator的使用方法

Android Viewpager Indicator是Android開發中最經常使用的控件之一，幾乎全部的新聞類APP中都有使用，下面介紹其基本使用方法。

1. ViewPager Indicator的Library

查看Viewpager Indicator的Library代碼，能夠看到此項目的設計思想：
首先定義了一個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的實現類

 而後再看下Viewpager Indicator的實現類，共有6個，由6個類分別實現，它們分別爲：
    2.1 小圓圈類型的
    2.2 帶圖標類型的                    
    2.3 小橫線類型的，距離屏幕最下邊端有必定的距離。
    2.4 標籤類型的（Tab）
    2.5 標題類型的，與標籤類型的有點像，但它當前的標題頁的左/右邊的標題會捲起，即往兩端縮進去。
    2.6 屏幕底部小橫線類型的，而且會佔滿整行。                   
                    

3. Viewpager Indicator隨附帶的Demo

    3.1 Demo項目的設計
    項目由一個ListSamples的ListActivity入口，它主要用做組裝全部的子indicator的列表。
    TestFragment.java，全部ViewPager上真正顯示的視圖。
    TestFragmentAdapter.java，全部ViewPager裏的Adapter，爲ViewPager生成TestFragment。
    Samplexxx.java，全部的indicator的顯示，一個類顯示一種使用方法或特性。

    3.2 具體使用方法
    查看SampleCirclesDefault.java基本就能夠明白它的基本使用方法：
    首先，把Indicator包含進xml文件中，以下，注意它應該緊鄰在ViewPager的上方或下方，總之要挨在一塊兒。
  

<com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titles"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" />

    其次，使用titleIndicator.setViewPager(pager)把二者綁定在一塊兒，以下所示：

//Set the pager with an adapter
 ViewPager pager = (ViewPager)findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

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

    最後，若是你要監聽ViewPager中包含的Fragment的改變(手滑動切換了頁面)，使用OnPageChangeListener爲它指定一個監聽器，那麼不能直接設置在ViewPager上，而要設置在Indicator上，以下所示：

//continued from above
 titleIndicator.setOnPageChangeListener(mPageChangeListener);

    
4.修改indicator的樣式（Theme）
    4.1 Theme XML，在AndroidManifest.xml中相應的Activity中設置，好比：

     <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>

   
    4.2 Layout XML，在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"
        />

    
    4.3    Object methods，直接在代碼中設置，以下：

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);

                            
    具體有哪些屬性能夠參考library項目中的vpi__attrs.xml文件。
   

參考：
https://github.com/JakeWharton/Android-ViewPagerIndicator