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

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

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

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="fill_parent"
 3     android:layout_height="fill_parent"
 4     android:orientation="vertical" >
 5 
 6     <com.viewpagerindicator.TabPageIndicator
 7         android:id="@+id/indicator"
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content" />
10 
11     <android.support.v4.view.ViewPager
12         android:id="@+id/pager"
13         android:layout_width="fill_parent"
14         android:layout_height="0dp"
15         android:layout_weight="1" />
16 </LinearLayout>

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

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

 1 @ContentView(R.layout.activity_telecom_fraud)
 2 public class TelecomFraudActivity extends BaseAppActivity{
 3     @ViewInject(R.id.indicator)
 4     private TabPageIndicator indicator;
 5     @ViewInject(R.id.pager)
 6     private ViewPager pager;
 7 
 8     private MyPageAdapter adapter;
 9     String []title = {"拉拉","呵呵"};
10     @Override
11     protected void init() {
12         adapter = new MyPageAdapter(getSupportFragmentManager());
13         pager.setAdapter(adapter);
14         indicator.setViewPager(pager);
15     }
16 
17     class MyPageAdapter extends FragmentPagerAdapter {
18         public MyPageAdapter(FragmentManager fm) {
19             super(fm);
20         }
21 
22         @Override
23         public Fragment getItem(int position) {
24             Fragment f;
25             if (position %title.length == 0){
26                 f = TFragment.newInstance();
27             }else{
28                 f = MFragment.newInstance();
29             }
30 
31             return f;
32         }
33 
34         @Override
35         public CharSequence getPageTitle(int position) {
36             return title[position%title.length].toUpperCase();
37         }
38 
39         @Override
40         public int getCount() {
41             return title.length;
42         }
43     }
44 }

1 这里面的TFragment.newInstance就是在TFragment中定义的一个静态方法，相当于创建对象实例化
2 
3  public static TFragment newInstance() {
4         TFragment fragment = new TFragment();
5         return fragment;
6     }

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

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

 1  private void getType(){
 2         EGRequestParams params=new EGRequestParams();
 3         HttpUtil.postNoProcess((BaseAppActivity) getActivity(), UrlConfig.ZIXUN_TYPE, params, new HttpUtil.Ok() {
 4             @Override
 5             public void success(String str) {
 6                 typeList=JSON.parseArray(str);
 7                 if (typeList.size()>0){
 8                     indicator.setVisibility(View.VISIBLE);
 9                     pagerAdapter = new MyPageAdapter(getChildFragmentManager());
10                     pager.setAdapter(pagerAdapter);
11                     indicator.setViewPager(pager);
12                     indicator.setCurrentItem(positions);
13                     pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
14                         @Override
15                         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
16                             curPosition=position;
17                         }
18 
19                         @Override
20                         public void onPageSelected(int position) {
21                             indicator.onPageSelected(position);
22                             positions = position;
23                         }
24 
25                         @Override
26                         public void onPageScrollStateChanged(int state) {
27 
28                         }
29                     });
30                 }
31             }
32             @Override
33             public void complete(String str) {
34 
35             }
36         });
37     }

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

 1  class MyPageAdapter extends FragmentPagerAdapter {
 2         public MyPageAdapter(FragmentManager fm) {
 3             super(fm);
 4         }
 5         @Override
 6         public Fragment getItem(int position) {
 7             FragmentTask f = FragmentTask.newInstance();
 8             Bundle bundle = new Bundle();
 9             bundle.putString("type", ((JSONObject) typeList.get(position)).getString("id"));
10             bundle.putString("position", position+"");
11             f.setArguments(bundle);
12             return f;
13         }
14         @Override
15         public CharSequence getPageTitle(int position) {
16             return ((JSONObject)typeList.get(position)).getString("name");
17         }
18         @Override
19         public int getCount() {
20             return typeList.size();
21         }
22     }

FragmentTask 里获取传过去的值

 1  Bundle bundle = getArguments();
 2         if (bundle != null){
 3             type = bundle.getString("type");
 4             position= bundle.getString("position");
 5         }
 6 
 7 ..........
 8 if (!position.equals(Fragment3.curPosition)){
 9             ZiXunTableView.initLoad();
10         }
11 
12 ........
13 EGRequestParams params=new EGRequestParams(); params.addBodyParameter("page",pageIndex+"");   params.addBodyParameter("size",pageSize+"");
14 params.addBodyParameter("programRefId",type);
15 .........

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

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

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

 1 <style name="Widget.TabPageIndicator" parent="Widget">  
 2         <item name="android:gravity">center</item>  
 3         <item name="android:background">@drawable/vpi__tab_indicator</item>  
 4         <item name="android:paddingLeft">22dip</item>  
 5         <item name="android:paddingRight">22dip</item>  
 6         <item name="android:paddingTop">12dp</item>  
 7         <item name="android:paddingBottom">12dp</item>  
 8         <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>  
 9         <item name="android:textSize">12sp</item>  
10         <item name="android:maxLines">1</item>  
11     </style>

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

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

新建viewpager_title_textcolor.xml

 1     <?xml version="1.0" encoding="utf-8"?>  
 2     <selector xmlns:android="http://schemas.android.com/apk/res/android">  
 3       
 4         <!-- Non focused states -->  
 5         <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>  
 6         <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>  
 7       
 8         <!-- Focused states -->  
 9         <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>  
10         <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>  
11       
12         <!-- Pressed -->  
13         <item android:state_pressed="true" android:color="#FF00A639"/>  
14       
15     </selector>

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

 1 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">  
 2     <item name="android:background">@drawable/custom_tab_indicator</item>  
 3     <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>  
 4     <item name="android:textColor">@drawable/viewpager_title_textcolor</item>  
 5     <item name="android:textSize">20sp</item>  
 6     <item name="android:divider">@drawable/custom_tab_indicator_divider</item>  
 7     <item name="android:showDividers">middle</item>  
 8     <item name="android:paddingLeft">8dp</item>  
 9     <item name="android:paddingRight">8dp</item>  
10     <item name="android:paddingTop">5dp</item>  
11     <item name="android:fadingEdge">horizontal</item>  
12     <item name="android:fadingEdgeLength">8dp</item>  
13 </style>