Android学习笔记--ViewPagerIndicator集成-优快云博客

本文链接：https://blog.youkuaiyun.com/loveqRc/article/details/54311883

这篇博客介绍了如何在Android中集成并定制ViewPagerIndicator，包括TabPageIndicator的布局引入、方法重写、与ViewPager的绑定。通过示例展示了如何修改默认样式，以及在Application或Activity级别设置样式，并提供了自定义ViewpagerIndicator样式的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewPagerIndicator

TabPageIndicator

布局引入，例如：

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

    <include layout="@layout/common_top"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

继承FragmentPagerAdapter重写public CharSequence getPageTitle(int position)方法。例如：

    @Override
  public CharSequence getPageTitle(int position) {
        return UIUtils.getStringArr(R.array.touzi_tab)[position];
    }

TabPageIndicator绑定ViewPager例如：
```
tabIndictor.setViewPager(pager);
```
这时的效果是这样的：

经过上面几步已经引入了TabPageIndicator，TabPageIndicator默认的样式不满足我们的需求，下面修改TabPageIndicator的样式。可以在Application里面修改样式，也可以在Activity中修改样式，如果在Application修改那么每个Activity的样式一样。引入TabPageIndicator样式，例如：android:theme="@style/Theme.PageIndicatorDefaults"，此时的效果是这样的：
这里写图片描述
Theme.PageIndicatorDefaults源码：

<style name="Theme.PageIndicatorDefaults" parent="android:Theme">
    <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
    <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
</style>

<style name="Widget">
</style>

<style name="Widget.TabPageIndicator" parent="Widget">
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/vpi__tab_indicator</item>
    <item name="android:paddingLeft">22dip</item>
    <item name="android:paddingRight">22dip</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingBottom">12dp</item>
    <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
    <item name="android:textSize">12sp</item>
    <item name="android:maxLines">1</item>
</style>

<style name="TextAppearance.TabPageIndicator" parent="Widget">
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/vpi__dark_theme</item>
</style>

<style name="Widget.IconPageIndicator" parent="Widget">
    <item name="android:layout_marginLeft">6dp</item>
    <item name="android:layout_marginRight">6dp</item>
</style>

自定义viewpagerIndicator样式

  <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>