Android-ViewPagerIndicator架構使用——TitlePageIndicator

前言：TitlePageIndicator這個就是效果比較好。

　　　　一：定義布局檔案simple_titles：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>      

　　　　二：代碼中使用：

setContentView(R.layout.simple_titles);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

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

　　　　　　其中的mAdapter在定義的時候需要實作IconPagerAdapter中的getPageTitle方法

　　protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", };
    /**
     * 定義tittle标題
     */
    @Override
    public CharSequence getPageTitle(int position) {
      return TestFragmentAdapter.CONTENT[position % CONTENT.length];
    }      

　　　　三：可修改的屬性：

<declare-styleable name="TitlePageIndicator">

        <!-- 距離左側和右側的距離 -->
        <attr name="clipPadding" format="dimension" />
        <!-- 底邊線和底邊訓示的顔色 -->
        <attr name="footerColor" format="color" />
        <!-- 底邊線的高度 -->
        <attr name="footerLineHeight" format="dimension" />
        <!-- 訓示樣式選擇，尖角還條形 -->
        <attr name="footerIndicatorStyle">
            <enum name="none" value="0" />
            <enum name="triangle" value="1" />
            <enum name="underline" value="2" />
        </attr>
        <!-- 訓示的高度 -->
        <attr name="footerIndicatorHeight" format="dimension" />
        <!-- 效果就是訓示變寬了 -->
        <attr name="footerIndicatorUnderlinePadding" format="dimension" />
        <!-- 文字tittle和底邊訓示的距離 -->
        <attr name="footerPadding" format="dimension" />
        <!-- 訓示的位置，tittle的上面，還是tittle的下面 -->
        <attr name="linePosition">
            <enum name="bottom" value="0" />
            <enum name="top" value="1" />
        </attr>
        <!-- 被選擇tittle的顔色 -->
        <attr name="selectedColor" />
        <!-- 被選擇的tittle顯示是否加粗 -->
        <attr name="selectedBold" format="boolean" />
        <!-- 未被選擇的tittle的顔色 -->
        <attr name="android:textColor" />
        <!-- 文字的大小 -->
        <attr name="android:textSize" />
        <!-- 下一個item距離上一個item多遠時，上一個item開始移動消失 -->
        <attr name="titlePadding" format="dimension" />
        <!-- 訓示和上邊view的距離 -->
        <attr name="topPadding" format="dimension" />
        <!-- 整體的背景色 -->
        <attr name="android:background" />
    </declare-styleable>      

　　　　四：使用自定義屬性

　　　　　　1.布局中使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#18FF0000"
        android:padding="10dip"
        android:textColor="#AA000000"
        app:footerColor="#FFAA2222"
        app:footerIndicatorHeight="3dp"
        app:footerIndicatorStyle="underline"
        app:footerLineHeight="1dp"
        app:selectedBold="true"
        app:selectedColor="#FF000000" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>      

　　　　　　3.代碼中使用：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_titles);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

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

        final float density = getResources().getDisplayMetrics().density;
        indicator.setBackgroundColor(0x18FF0000);
        indicator.setFooterColor(0xFFAA2222);
        indicator.setFooterLineHeight(1 * density); //1dp
        indicator.setFooterIndicatorHeight(3 * density); //3dp
        indicator.setFooterIndicatorStyle(IndicatorStyle.Underline);
        indicator.setTextColor(0xAA000000);
        indicator.setSelectedColor(0xFF000000);
        indicator.setSelectedBold(true);
    }      

　　　　　　3.theme使用：

　　　　　　　　設定主題其中StyledIndicators可以自己随便定義，然後在配置檔案中使用即可：

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item>
    </style>

    <style name="CustomTitlePageIndicator">
        <item name="android:background">#18FF0000</item>
        <item name="footerColor">#FFFF7F24</item>
        <item name="footerLineHeight">1dp</item>
        <item name="footerIndicatorHeight">2dp</item>
        <item name="linePosition">top</item>
        <item name="titlePadding">30dp</item>
        <item name="footerIndicatorStyle">underline</item>
        <item name="android:textColor">#AAFF7F24</item>
        <item name="selectedColor">#FFFF7F24</item>
        <item name="selectedBold">true</item>
    </style>      

　　　　　　　　使用主題:

<activity
            android:name=".SampleTitlesStyledTheme"
            android:label="Titles/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>      

　　　　五：在使用的時候，可以點選目前被選擇的tittle，觸發點選事件，隻需要實作OnCenterItemClickListener即可：

public class SampleTitlesCenterClickListener extends BaseSampleActivity implements OnCenterItemClickListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_titles);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(mPager);
        indicator.setFooterIndicatorStyle(IndicatorStyle.Underline);
        indicator.setOnCenterItemClickListener(this);
        mIndicator = indicator;
    }

    @Override
    public void onCenterItemClick(int position) {
        Toast.makeText(this, "You clicked the center title!", Toast.LENGTH_SHORT).show();
    }
}      

　　　　　　也可以設定滑動監聽：

mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                Toast.makeText(SampleTitlesWithListener.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });