Tablayout的简单使用

版权声明：本文为博主原创文章，未经博主允许不得转载。

在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用，TabPagerIndicator是第三方的，使用起来比较繁琐；

2015谷歌大会官方发布了TabLayout，可以很简单很完美的实现这种效果；

因为是官方发布的，所以使用起来不用任何第三方的东西；而且非常简单明了；

同样，如果想要使用Tablayout必须在build中配置：

[java] view plain copy

 

1. dependencies {    
2.     compile 'com.android.support:design:23.1.1'    
3. }    

先看下布局：

[html] view plain copy

 

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical"  
7.     tools:context="www.tablayout.com.tablayoutdemo.MainActivity">  
8.   
9.     <!--  
10.     app:tabIndicatorColor="@color/white"    // 下方滚动的下划线颜色  
11.     app:tabSelectedTextColor="@color/gray"  // tab被选中后，文字的颜色  
12.     app:tabTextColor="@color/white"         // tab默认的文字颜色  
13.     app:tabMode="scrollable"                //设置标题滑动模式  
14.     -->  
15.     <android.support.design.widget.TabLayout  
16.         android:id="@+id/tablayout"  
17.         android:layout_width="match_parent"  
18.         android:layout_height="wrap_content"  
19.         android:background="@android:color/holo_blue_light"  
20.         app:tabIndicatorColor="@android:color/holo_red_dark"  
21.         app:tabSelectedTextColor="@android:color/holo_red_dark"  
22.         app:tabTextColor="@android:color/background_dark"  
23.         app:tabMode="scrollable"  
24.         />  
25.   
26.     <android.support.v4.view.ViewPager  
27.         android:id="@+id/viewpager"  
28.         android:layout_width="match_parent"  
29.         android:layout_height="0dp"  
30.         android:layout_weight="1" />  
31.   
32. </LinearLayout>  

代码使用起来也非常简单

第一步：初始化ViewPager并设置adapter

第二步：给Tablayout设置标题

第三部：将Tablayout和ViewPager关联到一起

[java] view plain copy

 

1. <span style="white-space:pre">    </span>//第一步：初始化ViewPager并设置adapter  
2.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
3.         viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList));  
4.   
5.         //第二步：初始化Tablayout，给ViewPager设置标题（选项卡）  
6.         tabLayout = (TabLayout) findViewById(R.id.tablayout);  
7.           
8.         tabLayout.addTab(tabLayout.newTab().setText("UFC"));//添加tab选项卡  
9.         tabLayout.addTab(tabLayout.newTab().setText("武林风"));  
10.         tabLayout.addTab(tabLayout.newTab().setText("昆仑决"));  
11.         tabLayout.addTab(tabLayout.newTab().setText("荣耀"));  
12.         tabLayout.addTab(tabLayout.newTab().setText("勇士的崛起"));  
13.         tabLayout.addTab(tabLayout.newTab().setText("K-1"));  
14.           
15.         //第三步：关联ViewPager  
16.         tabLayout.setupWithViewPager(viewPager);  

好了，正常情况下就到此结束了，但是我在写这个demo的时候碰到一个坑：

标题死活显示不出来，浪费了很长时间，最后在Tablayout关联Viewpager之后添加从新设置下标题即可：

[java] view plain copy

 

1. //在关联ViewPager之后添加如下代码，前三步不用更改  
2.         tabLayout.getTabAt(0).setText("UFC");  
3.         tabLayout.getTabAt(1).setText("武林风");  
4.         tabLayout.getTabAt(2).setText("昆仑决");  
5.         tabLayout.getTabAt(3).setText("荣耀");  
6.         tabLayout.getTabAt(4).setText("勇士的崛起");  
7.         tabLayout.getTabAt(5).setText("K-1");  

总体来说Tablayout完全可以代替TabPagerIndicator，而且使用起来比较简单，最重要的还是官方的；

点击打开链接免费下载源码