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

 

分类： android开源之旅 android2013-06-24
18:38 2450人阅读 评论(14) 收藏 举报

githubViewPagerIndicatortab

接上篇博文：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
plaincopy

<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
plaincopy

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
plaincopy

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
欲知后事如何，且听下回分解

more brilliant，Please pay attention to my CSDN blog -->http://blog.csdn.net/geniuseoe2012 

开源之旅（四)   Github-Client（ANDROID）开源之旅（四)
------ 简介Roboguice