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

淩亂°似流年 2022-09-20 05:53 116阅读 0赞

[github][] [ViewPagerIndicator][] [tab][]

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

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

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

官网地址：[http://viewpagerindicator.com/][http_viewpagerindicator.com]

Github地址：[https://github.com/JakeWharton/Android-ViewPagerIndicator][https_github.com_JakeWharton_Android-ViewPagerIndicator]

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

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

以下是官网的效果图

![1372061011_5188.jpg][]

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

先上效果图,原版

![1372061010_2933.png][]  
山寨版

![1372061010_3207.png][]

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

![1372061011_7152.png][]

先看layout文件：

**\[java\]**  view plain copy print ?

1.  <LinearLayout  
2.          xmlns:android="http://schemas.android.com/apk/res/android"  
3.          android:layout\_width="fill\_parent"  
4.          android:layout\_height="fill\_parent"  
5.          android:orientation="vertical"  
6.          android:background="\#dddddd">  
7.            
8.        
9.          <RelativeLayout  
10.         android:layout\_width="fill\_parent"  
11.         android:layout\_height="40dp"  
12.         android:background="\#074060">  
13.           
14.                 <TextView  
15.                 android:id="@+id/title"  
16.                 android:layout\_width="wrap\_content"  
17.                 android:layout\_height="wrap\_content"  
18.                 android:layout\_centerInParent="true"  
19.                 android:text="安卓优化大师"  
20.                 android:textColor="\#eeeeee"  
21.                 android:textSize="20sp"/>                  
22.               
23.                 <ImageView  
24.                  android:layout\_width="wrap\_content"  
25.                  android:layout\_height="wrap\_content"  
26.                  android:src="@drawable/titlebar\_logo"  
27.                  android:layout\_centerVertical="true"  
28.                  android:layout\_toLeftOf="@id/title"  
29.                  android:layout\_marginRight="10dp"/>  
30.           
31.         </RelativeLayout>  
32.           
33.         <LinearLayout  
34.         android:layout\_width="fill\_parent"  
35.         android:layout\_height="35dp"  
36.         android:orientation="vertical"  
37.         android:background="@drawable/main\_header\_background">  
38.           
39.                 <com.viewpagerindicator.TabPageIndicator  
40.                 android:id="@+id/tab\_indicator"  
41.                 android:layout\_height="wrap\_content"  
42.                 android:layout\_width="fill\_parent"/>  
43.               
44.                 <com.lance.tablinepagerindictor.widget.UnderlinePageIndicatorEx  
45.                 android:id="@+id/underline\_indicator"  
46.                 android:layout\_height="3dp"  
47.                 android:layout\_width="fill\_parent"  
48.                 android:layout\_alignParentBottom="true"/>  
49.           
50.        </LinearLayout>       
51.          
52.        <android.support.v4.view.ViewPager  
53.         android:id="@+id/pager"  
54.         android:layout\_width="fill\_parent"  
55.         android:layout\_height="fill\_parent"/>  
56.           
57.       
58. </LinearLayout>

再看UnderlinePageIndicatorEx的实现

**\[java\]**  view plain copy print ?

1.  **public** **class** UnderlinePageIndicatorEx **extends** UnderlinePageIndicator\{  
2.    
3.         **public** UnderlinePageIndicatorEx(Context context) \{  
4.             **super**(context, **null**);  
5.               
6.          \}  
7.    
8.          **public** UnderlinePageIndicatorEx(Context context, AttributeSet attrs) \{  
9.              **super**(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);  
10.               
11.         \}  
12.   
13.         **public** UnderlinePageIndicatorEx(Context context, AttributeSet attrs, **int** defStyle) \{  
14.             **super**(context, attrs, defStyle);  
15.               
16.         \}  
17.           
18.           
19.         @Override  
20.         **public** **void** setViewPager(ViewPager viewPager) \{  
21.             **if** (mViewPager == viewPager) \{  
22.                 **return**;  
23.             \}  
24. //          if (mViewPager != null) \{   
25. //              //Clear us from the old pager.   
26. //              mViewPager.setOnPageChangeListener(null);   
27. //          \}   
28.             **if** (viewPager.getAdapter() == **null**) \{  
29.                 **throw** **new** IllegalStateException("ViewPager does not have adapter instance.");  
30.             \}  
31.             mViewPager = viewPager;  
32. //          mViewPager.setOnPageChangeListener(this);   
33.             invalidate();  
34.             post(**new** Runnable() \{  
35.                 @Override **public** **void** run() \{  
36.                     **if** (mFades) \{  
37.                         post(mFadeRunnable);  
38.                     \}  
39.                 \}  
40.             \});  
41.         \}  
42. \}

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 print ?

1.  **public** **class** MainActivity **extends** FragmentActivity \{  
2.    
3.      **private** ContentFrameAdapter mContentAdapter;  
4.      **private** ViewPager mPager;  
5.      **private** TabPageIndicator mTabPageIndicator;  
6.      **private** UnderlinePageIndicatorEx mUnderlinePageIndicator;  
7.        
8.        
9.      **private**  **int** COUNT = 0;  
10.     **private** List<TitleStruct> mTitleList;  
11.     **private** List<ContentStruct> mContentList;  
12.       
13.       
14.       
15.   
16.     @Override  
17.     **protected** **void** onCreate(Bundle arg0) \{  
18.   
19.         **super**.onCreate(arg0);  
20.         requestWindowFeature(Window.FEATURE\_NO\_TITLE);   
21.         getWindow().setFlags(WindowManager.LayoutParams.FLAG\_FULLSCREEN,     
22.                     WindowManager.LayoutParams.FLAG\_FULLSCREEN);    
23.         setContentView(R.layout.activity\_main);  
24.           
25.         initData();  
26.         setupViews();  
27.   
28.     \}  
29.   
30.   
31.     **private** **void** setupViews()\{        
32.            
33.          mPager = (ViewPager)findViewById(R.id.pager);  
34.          mPager.setAdapter(mContentAdapter);   
35.           
36.          mTabPageIndicator = (TabPageIndicator) findViewById(R.id.tab\_indicator);     
37.          mTabPageIndicator.setViewPager(mPager);       
38.            
39.          mUnderlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline\_indicator);  
40.          mUnderlinePageIndicator.setViewPager(mPager);  
41.          mUnderlinePageIndicator.setFades(**false**);  
42.            
43.          mTabPageIndicator.setOnPageChangeListener(mUnderlinePageIndicator);  
44.     \}  
45.       
46.       
47.     **private** **void** initData()\{  
48.          mContentList = **new** ArrayList<ContentStruct>();  
49.          mTitleList = **new** ArrayList<TitleStruct>();  
50.           
51.          String\[\] arrStrings = getResources().getStringArray(R.array.sections);  
52.          COUNT = arrStrings.length;  
53.          **for** (**int** i = 0; i < COUNT; i++) \{  
54.              ContentStruct object = **new** ContentStruct();  
55.              object.daString = arrStrings\[i\];  
56.              object.index = i;        
57.              mContentList.add(object);  
58.                
59.              TitleStruct object2 = **new** TitleStruct(arrStrings\[i\]);  
60.              mTitleList.add(object2);  
61.          \}  
62.            
63.            
64.          mContentAdapter = **new** ContentFrameAdapter(getSupportFragmentManager());  
65.          mContentAdapter.setContentList(mContentList);  
66.          mContentAdapter.setTitleList(mTitleList);  
67.      
68.     \}  
69.   
70. \}

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);
       
    	}
    
    }

简洁明了，是不是比在activity添加一堆乱七八糟的东西要好看的多？

其它的就没啥好咋乎的了，最后附上工程链接：

http://download.csdn.net/detail/geniuseoe2012/5641165

[github]: http://www.csdn.net/tag/github
[ViewPagerIndicator]: http://www.csdn.net/tag/ViewPagerIndicator
[tab]: http://www.csdn.net/tag/tab
[Github-Client_ANDROID_ ------ _ActionBarSherkLock]: http://blog.csdn.net/geniuseoe2012/article/details/9046487
[http_viewpagerindicator.com]: http://viewpagerindicator.com/
[https_github.com_JakeWharton_Android-ViewPagerIndicator]: https://github.com/JakeWharton/Android-ViewPagerIndicator
[1372061011_5188.jpg]: https://img-my.csdn.net/uploads/201306/24/1372061011_5188.jpg
[1372061010_2933.png]: https://img-my.csdn.net/uploads/201306/24/1372061010_2933.png
[1372061010_3207.png]: https://img-my.csdn.net/uploads/201306/24/1372061010_3207.png
[1372061011_7152.png]: https://img-my.csdn.net/uploads/201306/24/1372061011_7152.png