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