Android-ViewPagerIndicator

ViewPagerIndicator是JakeWharton开源的一个Android框架，就是ViewPager的分页指示器。通过他可以快速开发应用，比如很多应用的指引界面，下面的小圆点，还有一些应用上面的Tab等等，ViewPageIndicator都能很好的实现

Download and Import

项目地址

在自己的工程中引用Lib，具体方法参考 如何引用第三方库

Layout

页面设计比较简单，添加如下两个控件即可

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

<android.support.v4.view.ViewPager
android:id="@+id/ac_orderlist_viewpage"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />

Java

页面代码不要继承Activity，继承FragmentActivity,参考代码如下

import com.viewpagerindicator.TabPageIndicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;

public class OrderlsitActivity extends FragmentActivity {

    private static final String[] CONTENT = new String[] { "新订单", "等待确认",
            "等待评价", "已完成" };

    private ViewPager viewPager = null;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);

        setContentView(R.layout.ac_orderlist);

        FragmentPagerAdapter adapter = new GoogleMusicAdapter(
                getSupportFragmentManager());

        ViewPager viewPager = (ViewPager) findViewById(R.id.ac_orderlist_viewpage);
        viewPager.setAdapter(adapter);

        TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator);
        
        indicator.setViewPager(viewPager);
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
    }

    class GoogleMusicAdapter extends FragmentPagerAdapter {
        public GoogleMusicAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return TestFragment.newInstance(CONTENT[position % CONTENT.length]);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position % CONTENT.length].toUpperCase();
        }

        @Override
        public int getCount() {
            return CONTENT.length;
        }
    }

}

Style

如果不添加style，那么实现效果会很丑，不是一般的丑，所以添加如下代码

<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:background">@drawable/custom_tab_indicator</item>
    <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
    <item name="android:textColor">#FF555555</item>
    <item name="android:textSize">16sp</item>
    <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
    <item name="android:dividerPadding">10dp</item>
    <item name="android:showDividers">middle</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</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>
</style>

另外还有最最重要的一条不要忘记添加，在AppTheme下添加如下代码

<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>

代码中的@drawable/custom_tab_indicator实现参考如下（这个就是项目中的simple中的样式）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected_focused" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected_focused" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />
</selector>

最后查看实现效果吧，so easy！！