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吧！