谷歌在Material Design中推出TabLayout以替代開源庫PagerSlidingTabStrip和ViewPagerIndicator的使用。事實上，這類indicator指示器的布局可謂是Android中最常見的布局設計了破讨，TabLayout的出現(xiàn)給我們帶來一定便利砂蔽，它的使用對開發(fā)者更加友好碑定，并且和Toolbar一樣流码，配合material design的其他控件使用能輕易創(chuàng)造出酷炫的效果，下面我們快來學習它延刘。
一漫试、創(chuàng)建布局
使用TabLayout時，常與ViewPager一起關聯(lián)使用碘赖，布局如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"/>
</LinearLayout>
注意TabLayout中的tabMode屬性可選scrollable或fixed：
- scrollable可以滑動驾荣，向左對齊，如今日頭條普泡，網(wǎng)易新聞就是scrollable播掷，但是在Tab選項卡較少時會無法填滿TabLayout欄。
- fixed則無法滑動劫哼，每個選項卡平均分配空間叮趴，適合較少Tab選項卡的情況割笙，當選項卡較多時权烧，會出現(xiàn)每個選項卡內容無法顯示完整的情況，請大家大家根據(jù)情況選擇伤溉。
也可在代碼中使用以下方法設置般码。
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
或
tabLayout.setTabMode(TabLayout.MODE_FIXED);
還有另一個比較類似的屬性是app:tabGravity可選fill或centre：
- 當選項卡很少需要置于中心時，就需要用到centre乱顾，可以參考簡書手機App首頁標題欄“文章”板祝，“專題”兩個選項卡的居中效果。
- 當選項卡需要填滿TabLayout布局時走净，則用到fill券时。
二孤里、創(chuàng)建Fragment
public class PageFragment extends android.support.v4.app.Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment #" + mPage);
return view;
}
}
Fragment的布局為
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
</TextView>
沒什么說的，布局是一個簡單的TextView橘洞，通過實例化Fragment傳遞參數(shù)捌袜。
三、創(chuàng)建ViewPager的適配器
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
private Context context;
private static final String[] mTitles = {"tab1", "tab2", "tab3"};
public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
super(fm);
this.context = context;
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return mTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
四炸枣、在MainActivity中設置TabLayout
public class ThirdActivity extends FragmentActivity {
private SimpleFragmentPagerAdapter pagerAdapter;
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_third);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
}
TabLayout
五虏等、自定義TabLayout樣式
你應該不會滿足于現(xiàn)在的TabLayout，實際應用中适肠，往往會改變TabLayout的背景霍衫，字體大小和顏色，指示標的寬度和顏色等等侯养。
在MainActivity布局下給TabLayout添加一個style如下：
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/tab_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
并且在styles中添加一個樣式：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="tab_style" parent="Widget.Design.TabLayout">
<!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabIndicatorColor">@color/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
<item name="tabBackground">@color/colorPrimary</item>
<item name="tabSelectedTextColor">@color/colorAccent</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="textAllCaps">false</item>
</style>
</resources>
注意這里的@color/colorAccent是粉色敦跌，@color/colorPrimary是藍色。
各個屬性所代表的含義：
1.tabMaxWidth：tab item的最大寬度逛揩，當app:tabMode="fixed"時不起作用峰髓，當app:tabMode="fixed"時才起作用。其中：
2.tabIndicatorColor：TabLayout指示器的顏色
3.tabIndicatorHeight：TabLayout指示器高度
4.tabPaddingStart：距離開始的長度
5.tabPaddingEnd：距離結束的長度
6.tabBackground：TabLayout背景
7.tabTextAppearance：TabLayout title字體屬性
8.tabSelectedTextColor：當前選擇的tab的字體顏色
9.textAllCaps：TabLayout創(chuàng)建的Tab默認的是true息尺，如果設置圖標的話要設置成false携兵。
這時再運行看下效果：
自定義style的TabLayout
六、添加icon到tab
當前的TabLayout沒有方法讓我們去添加icon搂誉，我們可以使用SpannableString結合ImageSpan來實現(xiàn)徐紧，在SimpleFragmentPagerAdapter中：
//自己隨便從官網(wǎng)找?guī)讉€icon吧
private static final int[] mImgIds = {R.drawable.ic_stars_black_18dp,
R.drawable.ic_supervisor_account_black_24dp,
R.drawable.ic_today_black_24dp
};
//...
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
Drawable image = context.getResources().getDrawable(mImgIds[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
再運行可以看到：
添加icon的TabLayout
如果要同時把icon和text添加到tab同理，把getPageTitle()方法改為：
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
Drawable image = context.getResources().getDrawable(mImgIds[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
// Replace blank spaces with image icon
SpannableString sb = new SpannableString(" " + mTitles[position]);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
七炭懊、添加自定義的view到tab
1并级、自定義一個簡單的tab布局tab_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_tab"
android:layout_width="30dp"
android:scaleType="fitXY"
android:layout_height="30dp"/>
<TextView
android:id="@+id/tv_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
2、在適配器中增加getTabView(...)方法：
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
private Context context;
private static final String[] mTitles = {"tab1", "tab2", "tab3"};
private static final int[] mImgIds = {
R.drawable.ic_today_black_24dp,
R.drawable.ic_supervisor_account_black_24dp,
R.drawable.ic_stars_black_18dp
};
public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
super(fm);
this.context = context;
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return mTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
// return mTitles[position];
return null;
}
public View getTabView(int position) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab);
TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
iv_tab.setImageResource(mImgIds[position]);
tv_tab.setText(mTitles[position]);
return view;
}
}
3侮腹、在MainActivity中使用
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
//獲得到對應位置的Tab
TabLayout.Tab tab = tabLayout.getTabAt(i);
//設置自定義的標題
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
}
效果如下圖：
自定義view的TabLayout
八嘲碧、處理配置改變
當屏幕旋轉或者配置改變的時候，我們需要保存當前的狀態(tài)父阻。
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(POSITION,tabLayout.getSelectedTabPosition());
}
@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));
}
關于TabLayout的講解到此結束愈涩，當AppBar包裹Toolbar和TabLayout時，會有更好的效果加矛。另外履婉，設置自定義view后，自定義的style中tabSelectedTextColor就失效了斟览，只找到了用selector使tab切換時圖片改變顏色的方法毁腿，沒找到改變文字顏色的方法，請各位有識之士不吝賜教。
本文參考文章：
android design library提供的TabLayout的用法
Android TabLayout 淺顯總結
