Android中TabLayout使用详解

冷不防 2022-08-19 14:11 193阅读 0赞

## 一、     什么是TabLayout ##

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合或者自定义RadioButton来达到很漂亮的效果。但是TabPageIndicator是第三方的和RaidoButton实现起来比较繁琐。在2015年的google大会上，google发布了新的<code>Android Support Design</code>库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。 </td> 
 </tr> 
 </tbody> 
</table>

##  ##

## 二、使用TabLayout ##

<table> 
 <tbody> 
 <tr> 
 <td> 1、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在gradle中添加依赖 compile 'com.android.support:design:23.1.1' 2、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在布局文件中添加TabLayout &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" &nbsp;&nbsp;&nbsp; xmlns:app="http://schemas.android.com/apk/res-auto" &nbsp;&nbsp;&nbsp; android:layout_width="match_parent" &nbsp;&nbsp;&nbsp; android:layout_height="match_parent" &nbsp;&nbsp;&nbsp; android:orientation="vertical"&gt; &nbsp;&nbsp;&nbsp; &lt;android.support.design.widget.TabLayout &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:id="@+id/tab_FindFragment_title" &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_width="match_parent" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_height="wrap_content" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:background="#f00" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app:tabIndicatorColor="#fff" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app:tabSelectedTextColor="#00f" app:tabMode="scrollable" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app:tabTextColor="#fff"/&gt; &nbsp;&nbsp;&nbsp; &lt;android.support.v4.view.ViewPager &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:id="@+id/vp_FindFragment_pager" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_width="fill_parent" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_height="0dp" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_weight="1"/&gt; &lt;/LinearLayout&gt; 其中： <pre style="background:#2B2B2B">app:tabIndicatorColor="#fff"&nbsp; //下方滚动的下划线颜色</pre> <pre style="background:#2B2B2B">app:tabIndicatorHeight="10dp"&nbsp; //滚动的下划线的宽度</pre> <pre style="background:#2B2B2B">
 app:tabSelectedTextColor="#00f" // tab被选中后，文字的颜色&nbsp; 
 app:tabTextColor="#fff" &nbsp;//&nbsp;tab默认的文字颜色&nbsp;</pre> <pre style="background:#2B2B2B">app:tabMode="scrollable"&nbsp; //&nbsp;Tab可滚动&nbsp; 默认不可以滚动</pre> <pre style="background:#2B2B2B">&nbsp;</pre> 3、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 给ViewPager设置与之关联的TabLayout <pre style="background-color:#2b2b2b; color:#a9b7c6; font-family:'Consolas'; font-size:13.5pt">//给ViewPager添加OnPageChangeListener。TabLayout.TabLayoutOnPageChangeListener(tabLayout)
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));</pre> 4、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 给TabLayout设置相关内容 <pre style="background-color:#2b2b2b; color:#a9b7c6; font-family:'Consolas'; font-size:13.5pt">//设置Tab的内容来自PagerAdapter
tabLayout.setTabsFromPagerAdapter(adapter);
//设置OnTabSelectedListener监听器来实现TabLayout和ViewPager的联动
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
 @Override
 public void onTabSelected(TabLayout.Tab tab){
 viewPager.setCurrentItem(tab.getPosition());
 }

@Override
 public void onTabUnselected(TabLayout.Tab tab){

}

}
});</pre> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## 三、     TabLayout官方进一步封装 ##

<table> 
 <tbody> 
 <tr> 
 <td> 上面的使用相对比较繁琐，google官方对TabLayout做了进一步封装。 <pre style="background:#2B2B2B">tabLayout.setupWithViewPager(viewPager);</pre> 对上面的步骤进行了封装，省去了ViewPager和TabLayout之间的联动手动设置。 一步搞定。 注意：上面这行代码必须在ViewPager的Adapter设置完之后调用，否则会抛异常。 </td> 
 </tr> 
 </tbody> 
</table>