android Github-Client（ANDROID）开源之旅（三) ------ 巧用ViewPagerIndicator

本文主要是介绍android Github-Client（ANDROID）开源之旅（三) ------ 巧用ViewPagerIndicator，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Github-Client（ANDROID）开源之旅（三) ------ 巧用ViewPagerIndicator

接上篇博文：Github-Client（ANDROID）开源之旅（二) ------ 浅析ActionBarSherkLock

文中结合了网易新闻客户端讲解了开源库ActionBarSherklock的使用

今天蓝老师再给大家讲解一个开源库的使用，它就是ViewPagerIndicator（同样出自JakeWharton之手，ps：这胖子还是蛮厉害的）

官网地址：http://viewpagerindicator.com/

Github地址：https://github.com/JakeWharton/Android-ViewPagerIndicator

ViewPagerIndicator作为一款分页指标小部件兼容ViewPager，封装上做得还是不错的，目前为众多知名应用所使用

具体API使用大家下载官方demo示例瞅瞅就欧了（链接库都不懂得怎么引用的童鞋自个儿先去补补课）

以下是官网的效果图

本文就以优化大师的TAB滑动标签页为例来讲解该库的扩展使用

先上效果图,原版

山寨版

玩过优化大师的童鞋应该注意到，tab底部的下划线是会随着pager的滑动而实时变化，而网上很多demo则是标签页切换时下划线的动画效果，二者是有区别的，当然只要在onPageScrolled添加一些处理同样可以达到效果，不过代码就多了很多额外处理，另外这么做也不够通用，本着不重复发明轮子的原则，我们只需对现有控件做一些改造就可以实现我们想要的效果了

先看layout文件：

[java]  view plain copy  
 <LinearLayout  
         xmlns:android="http://schemas.android.com/apk/res/android"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:orientation="vertical"  
         android:background="#dddddd">  
           
       
         <RelativeLayout  
         android:layout_width="fill_parent"  
         android:layout_height="40dp"  
         android:background="#074060">  
           
                 <TextView  
                 android:id="@+id/title"  
                 android:layout_width="wrap_content"  
                 android:layout_height="wrap_content"  
                 android:layout_centerInParent="true"  
                 android:text="安卓优化大师"  
                 android:textColor="#eeeeee"  
                 android:textSize="20sp"/>                  
               
                 <ImageView  
                  android:layout_width="wrap_content"  
                  android:layout_height="wrap_content"  
                  android:src="@drawable/titlebar_logo"  
                  android:layout_centerVertical="true"  
                  android:layout_toLeftOf="@id/title"  
                  android:layout_marginRight="10dp"/>  
           
         </RelativeLayout>  
           
         <LinearLayout  
         android:layout_width="fill_parent"  
         android:layout_height="35dp"  
         android:orientation="vertical"  
         android:background="@drawable/main_header_background">  
           
                 <com.viewpagerindicator.TabPageIndicator  
                 android:id="@+id/tab_indicator"  
                 android:layout_height="wrap_content"  
                 android:layout_width="fill_parent"/>  
               
                 <com.lance.tablinepagerindictor.widget.UnderlinePageIndicatorEx  
                 android:id="@+id/underline_indicator"  
                 android:layout_height="3dp"  
                 android:layout_width="fill_parent"  
                 android:layout_alignParentBottom="true"/>  
           
        </LinearLayout>       
          
        <android.support.v4.view.ViewPager  
         android:id="@+id/pager"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"/>  
           
       
 </LinearLayout>  

再看UnderlinePageIndicatorEx的实现

[java]  view plain copy  
 public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{  
   
        public UnderlinePageIndicatorEx(Context context) {  
            super(context, null);  
              
         }  
   
         public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {  
             super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);  
               
         }  
   
         public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {  
             super(context, attrs, defStyle);  
               
         }  
           
           
         @Override  
         public void setViewPager(ViewPager viewPager) {  
             if (mViewPager == viewPager) {  
                 return;  
             }  
 //          if (mViewPager != null) {  
 //              //Clear us from the old pager.  
 //              mViewPager.setOnPageChangeListener(null);  
 //          }  
             if (viewPager.getAdapter() == null) {  
                 throw new IllegalStateException("ViewPager does not have adapter instance.");  
             }  
             mViewPager = viewPager;  
 //          mViewPager.setOnPageChangeListener(this);  
             invalidate();  
             post(new Runnable() {  
                 @Override public void run() {  
                     if (mFades) {  
                         post(mFadeRunnable);  
                     }  
                 }  
             });  
         }  
 }  

UnderlinePageIndicatorEx继承了UnderlinePageIndicator，前面提到链接库有所改动

事实上就是把成员变量的访问权限由private改为protected,然后重写了setViewPager方法(why?自个儿琢磨去)

最后看看activity中如何调用

[java]  view plain copy  
 public class MainActivity extends FragmentActivity {  
   
     private ContentFrameAdapter mContentAdapter;  
     private ViewPager mPager;  
     private TabPageIndicator mTabPageIndicator;  
     private UnderlinePageIndicatorEx mUnderlinePageIndicator;  
       
       
     private  int COUNT = 0;  
     private List<TitleStruct> mTitleList;  
     private List<ContentStruct> mContentList;  
       
       
       
   
     @Override  
     protected void onCreate(Bundle arg0) {  
   
         super.onCreate(arg0);  
         requestWindowFeature(Window.FEATURE_NO_TITLE);   
         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,     
                     WindowManager.LayoutParams.FLAG_FULLSCREEN);    
         setContentView(R.layout.activity_main);  
           
         initData();  
         setupViews();  
   
     }  
   
   
     private void setupViews(){        
            
          mPager = (ViewPager)findViewById(R.id.pager);  
          mPager.setAdapter(mContentAdapter);   
           
          mTabPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);     
          mTabPageIndicator.setViewPager(mPager);       
            
          mUnderlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);  
          mUnderlinePageIndicator.setViewPager(mPager);  
          mUnderlinePageIndicator.setFades(false);  
            
          mTabPageIndicator.setOnPageChangeListener(mUnderlinePageIndicator);  
     }  
       
       
     private void initData(){  
          mContentList = new ArrayList<ContentStruct>();  
          mTitleList = new ArrayList<TitleStruct>();  
           
          String[] arrStrings = getResources().getStringArray(R.array.sections);  
          COUNT = arrStrings.length;  
          for (int i = 0; i < COUNT; i++) {  
              ContentStruct object = new ContentStruct();  
              object.daString = arrStrings[i];  
              object.index = i;        
              mContentList.add(object);  
                
              TitleStruct object2 = new TitleStruct(arrStrings[i]);  
              mTitleList.add(object2);  
          }  
            
            
          mContentAdapter = new ContentFrameAdapter(getSupportFragmentManager());  
          mContentAdapter.setContentList(mContentList);  
          mContentAdapter.setTitleList(mTitleList);  
      
     }  
   
 }  