如今不少的應用頁面都是由一個個的TAB組成的,咱們能夠用佈局加事件監聽實現tab ,只是這樣的控制很是麻煩,並且有不少的開源項目能夠實現這樣的功能,咱們今天就介紹一下ViewPagerIndicator,這個項目就是能夠實現這種效果。html
首先下載依賴項目java
https://github.com/JakeWharton/Android-ViewPagerIndicatorandroid
這個頁面上有集成到本身項目的方式,大體就是:git
一、將該項目設爲本身項目的依賴項目。github
二、在相應窗口的佈局文件中引入TabPageIndicator,在Android-ViewPagerIndicator項目中有不少的tab的樣式,它們對應不一樣的類。ide
通常咱們都是將Android-ViewPagerIndicator與viewpager組合使用,當咱們切換tab的時候下面的viewpager也一塊兒切換。
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- >
- <com.viewpagerindicator.TabPageIndicator
- android:id="@+id/indicator"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" />
-
- <android.support.v4.view.ViewPager
- android:id="@+id/pager"
- android:layout_width="fill_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
- </LinearLayout>
三、而後在窗口Activity或者Fragment內,咱們獲取該TabPageIndicator和ViewPager,並將它們關聯起來。函數
- pager = (ViewPager) findViewById(R.id.pager);
- indicator = (TabPageIndicator) findViewById(R.id.indicator);
- indicator.setViewPager(pager);
四、改變tab的樣式,咱們這邊只看TabPageIndicator的樣式修改,其餘基本相似。咱們進入TabPageIndicator的源碼在構造函數。佈局
- public TabPageIndicator(Context context, AttributeSet attrs) {
- super(context, attrs);
- setHorizontalScrollBarEnabled(false);
- mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
- addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
- }
咱們能夠看出TabPageIndicator使用的是vpiTabPageIndicatorStyle樣式。咱們能夠在依賴項目中看到系統自帶的樣式,在依賴項目的values/vpi_styles.xml文件中,這裏面定義了全部tab類型的樣式。this
- <style name="Widget.TabPageIndicator" parent="Widget">
- <item name="android:gravity">center</item>
- <item name="android:background">@drawable/vpi__tab_indicator</item>
- <item name="android:paddingLeft">22dip</item>
- <item name="android:paddingRight">22dip</item>
- <item name="android:paddingTop">12dp</item>
- <item name="android:paddingBottom">12dp</item>
- <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
- <item name="android:textSize">12sp</item>
- <item name="android:maxLines">1</item>
- </style>
咱們能夠根據本身的須要繼承這個樣式並修改。spa
到這裏基本就OK了。Android-ViewPagerIndicator的集成很是簡單的。
Android-ViewPagerIndicator能夠與ActionBarSherlock合成開發的。很是方便
最後附上個人Viewpager適配器的類
- private class MyViewPagerAdapter extends FragmentPagerAdapter {
-
- private List<SelectItem> mList = new ArrayList<SelectItem>();
-
- public void setSelects(List<SelectItem> list) {
- this.mList = list;
- }
-
- public MyViewPagerAdapter(FragmentManager fm) {
- super(fm);
- }
-
- @Override
- public Fragment getItem(int position) {
- return mList.get(position).fragment;
- }
-
- @Override
- public CharSequence getPageTitle(int position) {
- return mList.get(position).desc;
- }
-
- @Override
- public int getCount() {
- return mList.size();
- }
-
- }