先来布局文件:
<?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吧!