TabPageIndicator的简单使用

配置依赖

 compile 'com.viewpagerindicator:library:2.4.1' 

 maven { url " http://dl.bintray.com/populov/maven" } 

开始使用

Layout布局文件：

   
   

    
    

     
     <?xml version="1.0" encoding="utf-8"?>
    
    
    
    

     
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
    
    
    

     
         xmlns:tools="http://schemas.android.com/tools"
    
    
    
    

     
         android:layout_width="match_parent"
    
    
    
    

     
         android:layout_height="match_parent"
    
    
    
    

     
         android:orientation="vertical"
    
    
    
    

     
         tools:context=".MainActivity">
    
    
    
    

     
      
    
    
    
    

     
         <com.viewpagerindicator.TabPageIndicator
    
    
    
    

     
             android:id="@+id/tbi"
    
    
    
    

     
             android:layout_width="match_parent"
    
    
    
    

     
             android:layout_height="wrap_content" />
    
    
    
    

     
      
    
    
    
    

     
         <android.support.v4.view.ViewPager
    
    
    
    

     
             android:id="@+id/vp"
    
    
    
    

     
             android:layout_width="match_parent"
    
    
    
    

     
             android:layout_height="match_parent" />
    
    
    
    

     
     </LinearLayout>
    
    
   
   

MainActivity.java

   
   

    
    

     
     package com.zhangwei.vpidemo;
    
    
    
    

     
      
    
    
    
    

     
     import android.os.Bundle;
    
    
    
    

     
     import android.support.v4.app.Fragment;
    
    
    
    

     
     import android.support.v4.view.ViewPager;
    
    
    
    

     
     import android.support.v7.app.ActionBarActivity;
    
    
    
    

     
      
    
    
    
    

     
     import com.viewpagerindicator.TabPageIndicator;
    
    
    
    

     
     import com.zhangwei.vpidemo.adapter.VpiPageAdapter;
    
    
    
    

     
      
    
    
    
    

     
     import java.util.ArrayList;
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
     /**
    
    
    
    

     
      * 能new 接口的实习类不要去new接口
    
    
    
    

     
      */
    
    
    
    

     
     public class MainActivity extends ActionBarActivity {
    
    
    
    

     
      
    
    
    
    

     
         private TabPageIndicator tbi;
    
    
    
    

     
         private ViewPager vp;
    
    
    
    

     
         private VpiPageAdapter adapter;
    
    
    
    

     
         private ArrayList<Fragment> fragments = new ArrayList<>();
    
    
    
    

     
      
    
    
    
    

     
         private String[] titles = {"测试", "测试", "测试", "测试", "测试", "测试", "测试", "测试", "测试", "测试"};
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
         @Override
    
    
    
    

     
         protected void onCreate(Bundle savedInstanceState) {
    
    
    
    

     
             super.onCreate(savedInstanceState);
    
    
    
    

     
             setContentView(R.layout.activity_main);
    
    
    
    

     
             init();
    
    
    
    

     
         }
    
    
    
    

     
      
    
    
    
    

     
         private void init() {
    
    
    
    

     
             this.vp = (ViewPager) findViewById(R.id.vp);
    
    
    
    

     
             this.tbi = (TabPageIndicator) findViewById(R.id.tbi);
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             fragments.add(new TestFragment());
    
    
    
    

     
             adapter = new VpiPageAdapter(getSupportFragmentManager(), fragments, titles);
    
    
    
    

     
             vp.setAdapter(adapter);
    
    
    
    

     
             tbi.setViewPager(vp);
    
    
    
    

     
      
    
    
    
    

     
         }
    
    
    
    

     
     }
    
    
   
   

TextFragment.java

   
   

    
    

     
     package com.zhangwei.vpidemo;
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
     import android.os.Bundle;
    
    
    
    

     
     import android.support.v4.app.Fragment;
    
    
    
    

     
     import android.view.LayoutInflater;
    
    
    
    

     
     import android.view.View;
    
    
    
    

     
     import android.view.ViewGroup;
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
     public class TestFragment extends Fragment {
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
         public TestFragment() {
    
    
    
    

     
             // Required empty public constructor
    
    
    
    

     
         }
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
         @Override
    
    
    
    

     
         public View onCreateView(LayoutInflater inflater, ViewGroup container,
    
    
    
    

     
                                  Bundle savedInstanceState) {
    
    
    
    

     
             // Inflate the layout for this fragment
    
    
    
    

     
             return inflater.inflate(R.layout.fragment_test, container, false);
    
    
    
    

     
         }
    
    
    
    

     
      
    
    
    
    

     
      
    
    
    
    

     
     }
    
    
   
   

Fragment的布局稍微简单就不拿出来了！

适配器的代码 VpiPageAdapter.java

  
  

   
   

    
    package com.zhangwei.vpidemo.adapter;
   
   
   
   

    
     
   
   
   
   

    
    import android.support.v4.app.Fragment;
   
   
   
   

    
    import android.support.v4.app.FragmentManager;
   
   
   
   

    
    import android.support.v4.app.FragmentPagerAdapter;
   
   
   
   

    
     
   
   
   
   

    
    import com.viewpagerindicator.TabPageIndicator;
   
   
   
   

    
     
   
   
   
   

    
    import java.util.List;
   
   
   
   


    
     
   
   
   
   

    
    public class VpiPageAdapter extends FragmentPagerAdapter {
   
   
   
   

    
     
   
   
   
   

    
        private List<Fragment> fragments;
   
   
   
   

    
        String[] titles;
   
   
   
   

    
     
   
   
   
   

    
        public VpiPageAdapter(FragmentManager fm, List<Fragment> fragments, String[] titles) {
   
   
   
   

    
            super(fm);
   
   
   
   

    
            this.fragments = fragments;
   
   
   
   

    
            this.titles = titles;
   
   
   
   

    
        }
   
   
   
   

    
     
   
   
   
   

    
        @Override
   
   
   
   

    
        public Fragment getItem(int position) {
   
   
   
   

    
            return fragments.get(position);
   
   
   
   

    
        }
   
   
   
   

    
     
   
   
   
   

    
        @Override
   
   
   
   

    
        public int getCount() {
   
   
   
   

    
            return fragments == null ? 0 : fragments.size();
   
   
   
   

    
        }
   
   
   
   

    
     
   
   
   
   

    
        /**
   
   
   
   

    
         *
   
   
   
   

    
         * @param position
   
   
   
   

    
         * @return
   
   
   
   

    
         */
   
   
   
   

    
        @Override
   
   
   
   

    
        public CharSequence getPageTitle(int position) {
   
   
   
   

    
            return titles != null ? titles[position] : super.getPageTitle(position);
   
   
   
   

    
        }
   
   
   
   

    
    }
   
   
  
  

在res下面新建一个color.xml 新建一个vpi_tabindicator_text_selector.xml

   
   

    
    

     
     <?xml version="1.0" encoding="utf-8"?>
    
    
    
    

     
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    
    

     
         <item android:color="@android:color/holo_red_dark" android:state_selected="true" />
    
    
    
    

     
         <item android:color="@android:color/black" />
    
    
    
    

     
     </selector>
    
    
   
   

最后修改样式

   
   

    
    

     
     <resources>
    
    
    
    

     
         <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    
    
    
    

     
             <item name="vpiTabPageIndicatorStyle">@style/CustomVpiTabPageIndicatorStyle</item>
    
    
    
    

     
         </style>
    
    
    
    

     
      
    
    
    
    

     
         <style name="CustomVpiTabPageIndicatorStyle" parent="Widget.TabPageIndicator">
    
    
    
    

     
             <item name="android:background">@drawable/vpi__tab_indicator</item>
    
    
    
    

     
             <item name="android:textAppearance">@style/TabPageIndicatorTextAppearance</item>
    
    
    
    

     
             <item name="android:textSize">14sp</item>
    
    
    
    

     
         </style>
    
    
    
    

     
      
    
    
    
    

     
         <style name="TabPageIndicatorTextAppearance" parent="TextAppearance.TabPageIndicator">
    
    
    
    

     
             <item name="android:textColor">@color/vpi_tabindicator_text_selector</item>
    
    
    
    

     
         </style>
    
    
    
    

     
     </resources>
    
    
   
   

效果图

、

由于官方的原因 之前那个依赖库用不了 所以在这再给一个  只需要改依赖库的地址就好  

compile 'fr.avianey.com.viewpagerindicator:library:2.4.1@aar'