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

今天介紹一個經常使用的框架，通常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> 

樣式的修改網上有不少方法和例子，你們均可以查一查

到這裏基本就OK了。Android-ViewPagerIndicator的集成很是簡單的。