viewpagerindicator

###首先要关联一个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>