浅谈TabLayout(ViewPager+Tab联动)

google发布了的Android Support Design库中提供了TabLayout

 

通过TabLayout+ViewPager实现导航栏效果,点击Tab ，ViewPager跟随变化，滑动ViewPager，Tab跟随变化

看效果图：

通过一个Demo来了解TabLayout的简单使用（Android Studio开发）,代码中都有注释了 ，很简单

1、build.gradle文件中加入

compile 'com.android.support:design:22.2.0'

 

2、写Xml文件，注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色    
app:tabSelectedTextColor="#00f"             被选中的tab的文本颜色
app:tabTextColor="#f00"                     未被选中的tab的文本颜色

 1 <LinearLayout xmlns:andro
 2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context=".MainActivity">
 7 
 8     <android.support.design.widget.TabLayout
 9         android:
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12         android:background="#777"
13         app:tabIndicatorColor="#0f0"
14         app:tabSelectedTextColor="#00f"
15         app:tabTextColor="#f00"
16         />
17 
18 
19     <android.support.v4.view.ViewPager
20         android:
21         android:layout_width="fill_parent"
22         android:layout_height="0dp"
23         android:layout_weight="1"
24         android:background="#cccc"
25         />
26 
27 </LinearLayout>

activity_main.xml