TabIndicator+ViewPager实现左右滑动菜单效果

先来布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

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

</LinearLayout>

接着是Activity关键代码:
注:viewPager布局文件没有列出来，为了看到效果自己随意设置个背景颜色或者加个TextView就能区分开了~~

public class TgcxActivity extends Activity {
    private ViewPager vp;
    //菜单列表
    private String titles[] = { "标题一", "标题二" };
    private ArrayList<View> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tgcx);
        vp = (ViewPager) findViewById(R.id.vp_tgxc);
        // 初始化viewpager
        inintVp();
        //初始化适配器并设置给viewpager;
        TgxcVpAdapter vpAdapter = new TgxcVpAdapter(views, titles);
        vp.setAdapter(vpAdapter);
        // 为ViewPager设置指示器
        TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator_tgcx);
        indicator.setViewPager(vp);
    }
    private void inintVp() {
        views = new ArrayList<View>();
        for (int i = 0; i < titles.length; i++) {
            View v = LayoutInflater.from(this).inflate(R.layout.tgcx_vp_pager, null, false);
            views.add(v);
        }

    }
}

接着是指示器的样式（在values-styles.xml文件中添加）:

<resources>

    <style name="AppBaseTheme" parent="android:Theme.Light">
    </style>
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
            <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

<!--        设置viewPager的TabPageIndicator样式 -->
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <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">20dp</item>
        <item name="android:paddingRight">20dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <!-- 设置viewPager的TabPageIndicator的字体的样式 -->
    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_vp_tab</item>
    </style>
</resources>

下面是字体样式（在drawable文件夹中新建selector_vp_tab.xml文件–用来定义字体样式）:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="#EE2C2C"/>
    <item android:state_pressed="true" android:color="#EE2C2C"/>
    <item android:state_focused="true" android:color="#EE2C2C"/>
    <item android:color="@android:color/black"/>

</selector>

差点忘了viewpager适配器代码:

public class TgxcVpAdapter extends PagerAdapter {

    private String[] titles;
    private List<View> views;

    public TgxcVpAdapter(List<View> views, String[] titles) {
        super();
        this.views = views;
        this.titles = titles;
    }
    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public Object instantiateItem(View container, int position) {
        View view = views.get(position);
        ViewPager vp = (ViewPager) container;
        vp.addView(view);
        return view;
    }
    @Override
    public void destroyItem(View container, int position, Object object) {
        View view = views.get(position);
        ViewPager vp = (ViewPager) container;
        vp.removeView(view);
    }
}

基本搞定，最后再次提醒，自己添加viewPager布局文件~~
要注意的是如果菜单过少一定要在布局文件中把TabIndicator的宽度设置成match_parent要不然会很丑，反之如果菜单过多，一个屏幕显示不完，那就设置成wrap_parent吧！