修改ViewPagerIndicator的样式

Indicator的样式修改

• 在values/styles中添加<style>
• 创建<style>中使用到的drawable资源文件
• 在Manifest中使用我们自定义的样式
• 附用到的点九图片
• Refer

第1步：在values/styles中添加<style>

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</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>

第2步：创建<style>中使用到的drawable资源文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />     
    <item android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/base_tab_indicator" />
    <item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/base_tab_indicator" />
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#38A200" />
    <item android:state_pressed="true" android:color="#38A200" />
    <item android:state_focused="true" android:color="#38A200" />
    <item android:color="@android:color/black"/>
</selector> 

第3步：在Manifest中改用我们自定义的样式

        <activity
            android:name="com.xxx.shop.xxxActivity"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:theme="@style/StyledIndicators" />

四、.9图片

附上用到的.9图，如下：

五、Refer

1、开源控件ViewPagerIndicator的使用

2、https://github.com/JakeWharton/ViewPagerIndicator