修改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