簡介
TabLayout provides a horizontal layout to display tabs.
源碼注釋中表示沉唠，TabLayout是提供了一個水平的布局來展示標(biāo)簽蕾盯。通常我們用來做選項卡這類效果材失。平常我們有用過開源庫 PagerSlidingTabStrip 和 ViewPagerIndicator 來實現(xiàn)效果。
簡單使用
1.導(dǎo)入兼容包
compile 'com.android.support:design:24.1.1'
2.layout中添加
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
3.java中使用
@BindView(R.id.tablayout)
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
tabLayout.addTab(tabLayout.newTab().setText("頭條"));
tabLayout.addTab(tabLayout.newTab().setText("社會"));
tabLayout.addTab(tabLayout.newTab().setText("娛樂"));
tabLayout.addTab(tabLayout.newTab().setText("體育"));
tabLayout.addTab(tabLayout.newTab().setText("科技"));
tabLayout.addTab(tabLayout.newTab().setText("財經(jīng)"));
}
java代碼中鹃共，通過addTab()方法來添加選項鬼佣，有4個重載方法：
addTab()
看過源碼知道驶拱，不管使用哪一個方法霜浴，最終都會調(diào)用最后一個方法，參數(shù)最多的蓝纲。
（1） Tab tab：就是Tab類實例阴孟。
（2） int position：指定添加的Tab插入的位置。
（3） boolean setSelected：指定添加的Tab是否為選中狀態(tài)
關(guān)于Tab類的一些設(shè)置方法，下面會說明。
4.效果
TabLayout簡單使用
TabLayout樣式調(diào)整
屬性
在layout中添加的時候會發(fā)現(xiàn)有如下可設(shè)置的屬性：
TabLayout屬性
- tabBackground：設(shè)置整個TabLayout背景
- tabIndicatorColor：設(shè)置指示器的顏色
- tabIndicatorHeight：設(shè)置指示器的高度
- tabTextColor：設(shè)置未選中項中的字體顏色
- tabSelectedTextColor：設(shè)置選中項中的字體顏色
- tabTextAppearance：設(shè)置style改變字體屬性
- tabMode：設(shè)置Tablayout的布局模式阳啥，有兩個值
fixed：固定的畅蹂，不能滑動，很多標(biāo)簽的時候會被擠壓
scrollable：可以滑動的
默認(rèn)是fixed - tabGravity：設(shè)置TabLayout的布局方式圆米，有兩個值
fill：充滿
center：居中
默認(rèn)是fill，且只有當(dāng)tabMode為fixed時才有效 - tabMaxWidth：設(shè)置tab項最大的寬度
- tabMinWidth：設(shè)置tab項最小的寬度
- tabContentStart：設(shè)置TabLayout開始位置的偏移量
- paddingStart，paddingEnd：設(shè)置整個TabLayout的內(nèi)邊距
- tabPadding喝检，tabPaddingStart，tabPaddingEnd撼泛，tabPaddingTop挠说，tabPaddingBottom：設(shè)置tab項的內(nèi)邊距
示例：
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#ffffffff"
app:tabMode="scrollable"
app:tabTextAppearance="@style/AppTheme.TabLayout.TextAppearance"/>
style中添加樣式
同樣，我們可以在style中添加一個樣式愿题，給TabLayout設(shè)置style屬性损俭。
style.xml
<style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
<item name="tabMode">scrollable</item>
<item name="tabIndicatorColor">@android:color/white</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabTextAppearance">@style/AppTheme.TabLayout.TextAppearance</item>
<item name="tabBackground">@color/colorPrimary</item>
<item name="tabSelectedTextColor">@android:color/white</item>
</style>
<style name="AppTheme.TabLayout.TextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#b2ffffff</item>
<item name="textAllCaps">false</item>
</style>
layout
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/AppTheme.TabLayout"/>
效果
樣式調(diào)整效果
Tab類
Tab類是TabLayout中的靜態(tài)內(nèi)部類，源碼：
Tab靜態(tài)內(nèi)部類
看源碼知道Tab類的構(gòu)造方法是私有的潘酗，不能直接new對象杆兵，注釋也表明了使用方法，通過newTab()方法來創(chuàng)建實例仔夺。
Tab類的一些設(shè)置方法琐脏，看下圖：
Tab相關(guān)設(shè)置方法
- setContentDescription：設(shè)置tab標(biāo)簽內(nèi)容描述
- seCustomView：設(shè)置一個自定義view來顯示標(biāo)簽
- setIcon：給tab設(shè)置一個icon
- setTag：給tab設(shè)置一個標(biāo)簽
- setText：設(shè)置tab的文本內(nèi)容
示例
@BindView(R.id.tablayout)
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
TabLayout.Tab tab1 = tabLayout.newTab();
tab1.setContentDescription("one");
tab1.setIcon(R.mipmap.ic_launcher);
tab1.setText("頭條");
tab1.setTag(1);
tabLayout.addTab(tab1);
//自定義view
View view = LayoutInflater.from(this).inflate(R.layout.custom_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(R.mipmap.ic_launcher);
tv_tab.setText("社會");
TabLayout.Tab tab2 = tabLayout.newTab();
tab2.setCustomView(view);
tab2.setContentDescription("two");
tab2.setTag(2);
tabLayout.addTab(tab2);
tabLayout.addTab(tabLayout.newTab().setText("娛樂"));
tabLayout.addTab(tabLayout.newTab().setText("體育"));
tabLayout.addTab(tabLayout.newTab().setText("科技"));
tabLayout.addTab(tabLayout.newTab().setText("財經(jīng)"));
}
自定義view的布局：
<?xml version="1.0" encoding="utf-8"?>
<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:textColor="#b2ffffff"
android:layout_marginLeft="3dp"
android:gravity="center" />
</LinearLayout>
效果
Tab設(shè)置效果
TabLayout+ViewPager
使用TabLayout時，更多的是用場景是配合ViewPager一起使用囚灼，通過TabLayout的setupWithViewPager()方法骆膝，使兩者關(guān)聯(lián)起來祭衩。
示例：
layout布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/AppTheme.TabLayout"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
創(chuàng)建Fragment
（1）布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:gravity="center">
</TextView>
</LinearLayout>
（2）java類
public class TabFragment extends Fragment {
public static final String PAGE_TITLE = "PAGE_TITLE";
private String title;
public static TabFragment newInstance(String title) {
Bundle bundle = new Bundle();
bundle.putString(PAGE_TITLE, title);
TabFragment tabFragment = new TabFragment();
tabFragment.setArguments(bundle);
return tabFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
title = getArguments().getString(PAGE_TITLE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab, container, false);
TextView titleTv = (TextView) view.findViewById(R.id.title_tv);
titleTv.setText(title);
return view;
}
}
創(chuàng)建ViewPager適配器
public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
private static final String[] mTitles = {"頭條", "社會", "娛樂", "體育", "科技", "財經(jīng)"};
public TabFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return TabFragment.newInstance(mTitles[position]);
}
@Override
public int getCount() {
return mTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
Activity中關(guān)聯(lián)
@BindView(R.id.tablayout)
TabLayout tabLayout;
@BindView(R.id.viewpager)
ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(mViewPager);
}
效果
TabLayout+ViewPager
