Android-ViewPagerIndicator框架使用—

前言：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) {

            }

        });

源码以及Demo下载地址：http://download.csdn.net/detail/as294985925/6796117

巴特西

Android-ViewPagerIndicator框架使用——TitlePageIndicator

最新文章

热门文章