巧用ViewPagerIndicator

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

原文链接 ：http://blog.csdn.net/lancees/article/details/9164421