###首先要关联一个library
### 布局activity_main把图片放到drawable下面
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tpi"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</com.viewpagerindicator.TabPageIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="@id/tpi" >
</android.support.v4.view.ViewPager>
### 建一个布局 f1
### MainActivity
public class MainActivity extends FragmentActivity {
private static final String[] title = new String[] { "头条", "房产", "另一面",
"女人", "财经", "数码", "情感", "科技", "北京", "娱乐", "游戏", "奥运" };
private TabPageIndicator tpi;
private ViewPager vp;
List<Fragment>list=new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tpi=(TabPageIndicator) findViewById(R.id.tpi);
getFragment();
vp=(ViewPager) findViewById(R.id.vp);
vp.setAdapter(new MyFramentPagerAdapter(getSupportFragmentManager(),list,title));
tpi.setViewPager(vp);
}
private void getFragment() {
for(int i=0;i<title.length;i++){
Fragment fragment=new Fragment();
Bundle bundle=new Bundle();
bundle.putString("title", title[i]);
fragment.setArguments(bundle);
list.add(fragment);
}
}
}
### MyFragmentPagerAdapter 适配器
public class MyFramentPagerAdapter extends FragmentPagerAdapter {
private final FragmentManager fm;
private final String[] title;
private final List<com.bw.indicator.Fragment> list;
public MyFramentPagerAdapter(FragmentManager fm, List<com.bw.indicator.Fragment> list, String[] title) {
super(fm);
// TODO Auto-generated constructor stub
this.fm = fm;
this.list = list;
this.title = title;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return title.length;
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return title[position];
}
}
### 为了效果好看 还需要2个xml文件 放在drawable下面
###selector_tabtext.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>
### tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" />
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" />
</selector>
### values---styles.xml里面添加
<style name="StyledIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/tab_indicator</item>
<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">10dp</item>
<item name="android:paddingRight">10dp</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>
<item name="android:textColor">@drawable/selector_tabtext</item>
</style>
### AndroidMainfest.xml里面修改添加
android:theme="@style/StyledIndicators"
### Android Studio 配置的时候 需要修改
<style name="StyledIndicators" parent="Theme.AppCompat.Light.NoActionBar"> <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item> </style>