Android-ViewPagerIndicator框架使用——TabPageIndicator以及样式的修改

今天介绍一个常用的框架，一般app都会用到这样的框架，下面就来介绍框架的使用以及样式的修改，那就以我自己写的例子来向大家介绍吧！

首先给出xml ，在相应窗口的布局文件中引入TabPageIndicator，在Android-ViewPagerIndicator项目中有很多的tab的样式，它们对应不同的类。 一般我们都是将Android-ViewPagerIndicator与viewpager组合使用，当我们切换tab的时候下面的viewpager也一起切换。

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical" >

     <com.viewpagerindicator.TabPageIndicator
         android:id="@+id/indicator"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content" />

     <android.support.v4.view.ViewPager
         android:id="@+id/pager"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1" />
 </LinearLayout>

然后看看主代码怎么写的：

这是title比较少的情况下，我们都这样写

 @ContentView(R.layout.activity_telecom_fraud)
 public class TelecomFraudActivity extends BaseAppActivity{
     @ViewInject(R.id.indicator)
     private TabPageIndicator indicator;
     @ViewInject(R.id.pager)
     private ViewPager pager;

     private MyPageAdapter adapter;
     String []title = {"拉拉","呵呵"};
     @Override
     protected void init() {
         adapter = new MyPageAdapter(getSupportFragmentManager());
         pager.setAdapter(adapter);
         indicator.setViewPager(pager);
     }

     class MyPageAdapter extends FragmentPagerAdapter {
         public MyPageAdapter(FragmentManager fm) {
             super(fm);
         }

         @Override
         public Fragment getItem(int position) {
             Fragment f;
             if (position %title.length == 0){
                 f = TFragment.newInstance();
             }else{
                 f = MFragment.newInstance();
             }

             return f;
         }

         @Override
         public CharSequence getPageTitle(int position) {
             return title[position%title.length].toUpperCase();
         }

         @Override
         public int getCount() {
             return title.length;
         }
     }
 }

 这里面的TFragment.newInstance就是在TFragment中定义的一个静态方法，相当于创建对象实例化

  public static TFragment newInstance() {
         TFragment fragment = new TFragment();
         return fragment;
     }

MFragment也一样，这里就不上传代码了

其实一般做app项目时我们一般都是调用接口来获取title的值，这种情况下一般title就比较多，那我们就不可能一一写出其对应的fragment，一般都会采取下面的方式
首先通过接口获取到title

  private void getType(){
         EGRequestParams params=new EGRequestParams();
         HttpUtil.postNoProcess((BaseAppActivity) getActivity(), UrlConfig.ZIXUN_TYPE, params, new HttpUtil.Ok() {
             @Override
             public void success(String str) {
                 typeList=JSON.parseArray(str);
                 if (typeList.size()>0){
                     indicator.setVisibility(View.VISIBLE);
                     pagerAdapter = new MyPageAdapter(getChildFragmentManager());
                     pager.setAdapter(pagerAdapter);
                     indicator.setViewPager(pager);
                     indicator.setCurrentItem(positions);
                     pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                         @Override
                         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                             curPosition=position;
                         }

                         @Override
                         public void onPageSelected(int position) {
                             indicator.onPageSelected(position);
                             positions = position;
                         }

                         @Override
                         public void onPageScrollStateChanged(int state) {

                         }
                     });
                 }
             }
             @Override
             public void complete(String str) {

             }
         });
     }

然后通过title的id，position来确定fragment的数据（都是从接口获取的数据）

  class MyPageAdapter extends FragmentPagerAdapter {
         public MyPageAdapter(FragmentManager fm) {
             super(fm);
         }
         @Override
         public Fragment getItem(int position) {
             FragmentTask f = FragmentTask.newInstance();
             Bundle bundle = new Bundle();
             bundle.putString("type", ((JSONObject) typeList.get(position)).getString("id"));
             bundle.putString("position", position+"");
             f.setArguments(bundle);
             return f;
         }
         @Override
         public CharSequence getPageTitle(int position) {
             return ((JSONObject)typeList.get(position)).getString("name");
         }
         @Override
         public int getCount() {
             return typeList.size();
         }
     }

FragmentTask 里获取传过去的值

  Bundle bundle = getArguments();
         if (bundle != null){
             type = bundle.getString("type");
             position= bundle.getString("position");
         }

 ..........
 if (!position.equals(Fragment3.curPosition)){
             ZiXunTableView.initLoad();
         }

 ........
 EGRequestParams params=new EGRequestParams(); params.addBodyParameter("page",pageIndex+"");   params.addBodyParameter("size",pageSize+"");
 params.addBodyParameter("programRefId",type);
 .........

改变tab的样式，我们这边只看TabPageIndicator的样式修改，其他基本类似。我们进入TabPageIndicator的源码在构造函数。

     public TabPageIndicator(Context context, AttributeSet attrs) {
                                 super(context, attrs);
         setHorizontalScrollBarEnabled(false);
         mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
         addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
     }  

我们可以看出TabPageIndicator使用的是vpiTabPageIndicatorStyle样式。我们可以在依赖项目中看到系统自带的样式，在依赖项目的values/vpi_styles.xml文件中，这里面定义了所有tab类型的样式。

 <style name="Widget.TabPageIndicator" parent="Widget">
         <item name="android:gravity">center</item>
         <item name="android:background">@drawable/vpi__tab_indicator</item>
         <item name="android:paddingLeft">22dip</item>
         <item name="android:paddingRight">22dip</item>
         <item name="android:paddingTop">12dp</item>
         <item name="android:paddingBottom">12dp</item>
         <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
         <item name="android:textSize">12sp</item>
         <item name="android:maxLines">1</item>
     </style> 

我们可以根据自己的需要继承这个样式并修改。

还有设置字体颜色的，点击时字体会变色

新建viewpager_title_textcolor.xml

     <?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">  

         <!-- Non focused states -->
         <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>
         <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>  

         <!-- Focused states -->
         <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>
         <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>  

         <!-- Pressed -->
         <item android:state_pressed="true" android:color="#FF00A639"/>  

     </selector>  

在style.xml中修改CustomTabPageIndicator的android:textColor属性即可：

 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
     <item name="android:background">@drawable/custom_tab_indicator</item>
     <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
     <item name="android:textColor">@drawable/viewpager_title_textcolor</item>
     <item name="android:textSize">20sp</item>
     <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
     <item name="android:showDividers">middle</item>
     <item name="android:paddingLeft">8dp</item>
     <item name="android:paddingRight">8dp</item>
     <item name="android:paddingTop">5dp</item>
     <item name="android:fadingEdge">horizontal</item>
     <item name="android:fadingEdgeLength">8dp</item>
 </style> 

样式的修改网上有很多方法和例子，大家都可以查一查

到这里基本就OK了。Android-ViewPagerIndicator的集成非常简单的。