通常在ViewPager的上方蓖议，我們都會放一個標簽指示器與ViewPager進行聯(lián)動矢否，同樣“愛閱”也是遵照這樣的設(shè)計風格進行設(shè)計和實現(xiàn)的腥刹。可選擇的實現(xiàn)方案其實有很多宴卖，比如：TabPageIndicator或者GitHub上的開源框架PagerSlidingTabTrip滋将。但是這些都是第三方的而且也已經(jīng)比較老了，所以我使用Android自帶的控件TabLayout來實現(xiàn)這個效果症昏，而且TabLayout更為強大随闽，因為Tab標簽可以使用自定義View并且可以實現(xiàn)多種屬性的設(shè)置。
首先來看下效果圖：
點此進入目錄：[干貨] 十天 教你從創(chuàng)意到上線APP
一肝谭、TabLayout的基本使用
1掘宪、在布局中加入該控件
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_main"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
android:background="#D2A2CC"
app:tabMode="scrollable" />
2蛾扇、在代碼中找到并設(shè)置
@BindView(R.id.tab_layout_main)
TabLayout mTabLayout;
mTabLayout.addTab(tablayout.newTab().setText("新聞"));
mTabLayout.addTab(tablayout.newTab().setText("天氣"));
mTabLayout.addTab(tablayout.newTab().setText("娛樂"));
顯示效果
向上滑動還可收縮成這樣：
這樣我們就把最簡單的用法掌握了，但如果你想要往里面加入一些個性化設(shè)置也是可以的魏滚，比如你想加入圖片的話镀首，可以這么辦：
mTabLayout.addTab(tablayout.newTab().setText("新聞").setIcon(R.mipmap.icon1));
mTabLayout.addTab(tablayout.newTab().setText("天氣").setIcon(R.mipmap.icon2));
mTabLayout.addTab(tablayout.newTab().setText("娛樂").setIcon(R.mipmap.icon3));
二、結(jié)合ViewPager施展魔法
基本的設(shè)置結(jié)束了鼠次，那么這個時候我們要實現(xiàn)最開始的效果 —— 滑動ViewPager的同時改變Tab的狀態(tài)更哄，要真么辦呢？
1腥寇、首先要準備好ViewPager的數(shù)據(jù)
在我們上午實現(xiàn)的ViewPagerAdapter中重寫getPageTitle()方法成翩，以此返回每個ViewPager的標題的數(shù)據(jù)，代碼如下：
@Override
public CharSequence getPageTitle(int position) {
return mCategoryList.get(position).getName();
}
這個方法里對應返回的值就是我們最終想要顯示在Tab中的標題赦役，所以你要可以根據(jù)你自己的業(yè)務場景來進行實現(xiàn)捕传。
2、把ViewPager和TabLayout進行綁定
代碼很簡單扩劝，一行搞定：
mTabLayout.setupWithViewPager(mViewpager);
沒錯庸论，setupWithViewPager()是TabLayout自帶的方法，就是專門用來和ViewPager視圖進行綁定的棒呛。如果沒有其他問題聂示，你會發(fā)現(xiàn)我們的基本視圖效果已經(jīng)實現(xiàn)了，但是如果你想要實現(xiàn)更多的屬性效果簇秒，可以參看接下來總結(jié)的一些常用屬性鱼喉。
三、TabLayout常用屬性
1趋观、顏色改變
- 改變選中字體的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
- 改變未選中字體的顏色
app:tabTextColor="@color/colorPrimary"
- 改變指示器下標的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
- 改變整個TabLayout的顏色
app:tabBackground="color"
2扛禽、尺寸與圖標
- 改變TabLayout內(nèi)部字體大小
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
- 改變指示器下標的高度
app:tabIndicatorHeight="4dp"
- 添加圖標
mTabLayout.addTab(tabLayout.newTab().setText("Tab A").setIcon(R.mipmap.ic_launcher));
- 內(nèi)容的顯示模式
app:tabGravity="center" // 居中，如果是fill皱坛，則是充滿
3编曼、寬度限制
- 設(shè)置最大的tab寬度
app:tabMaxWidth="xxdp"
- 設(shè)置最小的tab寬度
app:tabMinWidth="xxdp"
4、TabLayout的監(jiān)聽事件
選中了某個tab的監(jiān)聽事件OnTabSelectedListener()
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//選中了tab的邏輯
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未選中tab的邏輯
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次選中tab的邏輯
}
});
至此為止剩辟，我們TabLayout的最常用屬性就介紹完畢了掐场，如果你還有更復雜的需求，比如：Tab點擊縮放的實現(xiàn)贩猎，可以參考該鏈接：TabLayout使用方法詳解
聯(lián)系方式：
