Android开源框架--ViewPagerIndicator的使用

说明：

ViewPagerIndicator可以理解成ViewPager的滑动时的一个指示器。在使用ViewPager的时候能够指示ViewPager所在的位置，就像Google Play中切换的效果一样，还能使用在应用初始化的介绍页面。

使用步骤：

在项目中关联ViewPagerIndicator的library 下载链接：https://github.com/JakeWharton/Android-ViewPagerIndicator

布局文件：必须和ViewPager搭配使用

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.viewpagerindicator</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.TabPageIndicator</span>
    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/tpi"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fill_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> />

<android<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.support</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.v</span>4<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ViewPager</span>
    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/vp"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fill_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span>
    android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

将ViewPagerIndicator和ViewPager关联起来, ViewPager页面发生变化时, ViewPagerIndicator的指针也会跟随变化

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">mIndicator<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setViewPager</span>(mViewPager)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mAdapter = new mViewPagerAdapter()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
mViewPager<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setAdapter</span>(mAdapter)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

在ViewPager的Adapter中,重写该方法:

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * 返回标题, 用于在indicator的指针中显示
 */</span>
<span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> CharSequence <span class="hljs-title" style="box-sizing: border-box;">getPageTitle</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> position) {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> title;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

需要给activity设置样式

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">activity
</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">".MainActivity"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:theme</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@style/Theme.PageIndicatorDefaults"</span> /></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

修改样式：

修改样式中的图片, 文字颜色等

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><style <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Theme.PageIndicatorDefaults"</span> parent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:Theme"</span>>
    <<span class="hljs-property" style="box-sizing: border-box;">item</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vpiIconPageIndicatorStyle"</span>>@style/Widget.IconPageIndicator</<span class="hljs-property" style="box-sizing: border-box;">item</span>>
    <<span class="hljs-property" style="box-sizing: border-box;">item</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vpiTabPageIndicatorStyle"</span>>@style/Widget.TabPageIndicator</<span class="hljs-property" style="box-sizing: border-box;">item</span>>
 </style></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

页签样式修改

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><style name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Widget.TabPageIndicator"</span> parent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Widget"</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:gravity"</span>>center</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:background"</span>>@drawable/vpi__tab_indicator</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">>//修改页签背景</span>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:paddingLeft"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">22</span>dip</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:paddingRight"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">22</span>dip</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:paddingTop"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>dp</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:paddingBottom"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>dp</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:textAppearance"</span>>@style/TextAppearance.TabPageIndicator</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:textSize"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>sp</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:textColor"</span>>@drawable/vpi__tab_text_color</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">>//修改页签字体颜色</span>
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:maxLines"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span></<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">item</span>>
</style></code>