Android-ViewPagerIndicator簡單集成

如今不少的應用頁面都是由一個個的TAB組成的,咱們能夠用佈局加事件監聽實現tab ,只是這樣的控制很是麻煩,並且有不少的開源項目能夠實現這樣的功能,咱們今天就介紹一下ViewPagerIndicator,這個項目就是能夠實現這種效果。html


首先下載依賴項目java

https://github.com/JakeWharton/Android-ViewPagerIndicatorandroid

 

這個頁面上有集成到本身項目的方式,大體就是:git

一、將該項目設爲本身項目的依賴項目。github

二、在相應窗口的佈局文件中引入TabPageIndicator,在Android-ViewPagerIndicator項目中有不少的tab的樣式,它們對應不一樣的類。ide

通常咱們都是將Android-ViewPagerIndicator與viewpager組合使用,當咱們切換tab的時候下面的viewpager也一塊兒切換。
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical"  
  5.     >  
  6.     <com.viewpagerindicator.TabPageIndicator  
  7.         android:id="@+id/indicator"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content" />  
  10.   
  11.     <android.support.v4.view.ViewPager  
  12.         android:id="@+id/pager"  
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="0dp"  
  15.         android:layout_weight="1" />  
  16. </LinearLayout>  

三、而後在窗口Activity或者Fragment內,咱們獲取該TabPageIndicator和ViewPager,並將它們關聯起來。函數

  1. pager = (ViewPager) findViewById(R.id.pager);  
  2. indicator = (TabPageIndicator) findViewById(R.id.indicator);  
  3. indicator.setViewPager(pager);//關聯  

四、改變tab的樣式,咱們這邊只看TabPageIndicator的樣式修改,其餘基本相似。咱們進入TabPageIndicator的源碼在構造函數。佈局

  1. public TabPageIndicator(Context context, AttributeSet attrs) {  
  2.                             super(context, attrs);  
  3.     setHorizontalScrollBarEnabled(false);  
  4.     mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);  
  5.     addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));  
  6. }  

咱們能夠看出TabPageIndicator使用的是vpiTabPageIndicatorStyle樣式。咱們能夠在依賴項目中看到系統自帶的樣式,在依賴項目的values/vpi_styles.xml文件中,這裏面定義了全部tab類型的樣式。this

  1. <style name="Widget.TabPageIndicator" parent="Widget">  
  2.         <item name="android:gravity">center</item>  
  3.         <item name="android:background">@drawable/vpi__tab_indicator</item>  
  4.         <item name="android:paddingLeft">22dip</item>  
  5.         <item name="android:paddingRight">22dip</item>  
  6.         <item name="android:paddingTop">12dp</item>  
  7.         <item name="android:paddingBottom">12dp</item>  
  8.         <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>  
  9.         <item name="android:textSize">12sp</item>  
  10.         <item name="android:maxLines">1</item>  
  11.     </style>  

咱們能夠根據本身的須要繼承這個樣式並修改。spa

到這裏基本就OK了。Android-ViewPagerIndicator的集成很是簡單的。

 

Android-ViewPagerIndicator能夠與ActionBarSherlock合成開發的。很是方便


最後附上個人Viewpager適配器的類
  1. private class MyViewPagerAdapter extends FragmentPagerAdapter {  
  2.   
  3.         private List<SelectItem> mList = new ArrayList<SelectItem>();  
  4.   
  5.         public void setSelects(List<SelectItem> list) {  
  6.             this.mList = list;  
  7.         }  
  8.   
  9.         public MyViewPagerAdapter(FragmentManager fm) {  
  10.             super(fm);  
  11.         }  
  12.   
  13.         @Override  
  14.         public Fragment getItem(int position) {  
  15.             return mList.get(position).fragment;  
  16.         }  
  17.   
  18.         @Override  
  19.         public CharSequence getPageTitle(int position) {  
  20.             return mList.get(position).desc;  
  21.         }  
  22.   
  23.         @Override  
  24.         public int getCount() {  
  25.             return mList.size();  
  26.         }  
  27.   
  28.     } 
相關文章
相關標籤/搜索