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文件：

<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的实现

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中如何调用

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;@Overrideprotected 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

欲知后事如何，且听下回分解

morebrilliant，PleasepayattentiontomyCSDNblog-->http://blog.csdn.net/geniuseoe2012

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

更多相关文章

随机推荐