您的位置：首页 > 移动开发 > Android开发

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

2014-01-04 11:05 417 查看
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 plaincopyprint?

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

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

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

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

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

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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  viewpager 优化ViewPager android开发优化
相关文章推荐
新的分享
章节导航