使用滾動的標(biāo)簽指示器和滑動的內(nèi)容頁面张峰，是手機(jī)應(yīng)用經(jīng)常出現(xiàn)的一種設(shè)計風(fēng)格，常見的比較出名的應(yīng)用有：微信（首頁）堪簿、網(wǎng)易新聞痊乾、今日頭條和知乎等。有過幾年安卓開發(fā)經(jīng)驗(yàn)的朋友肯定知道椭更，在GitHub上符喝，實(shí)現(xiàn)這種功能有兩個比較出名的開源項(xiàng)目：PagerSlidingTabStrip 和 JakeWharton大神的ViewPagerIndicator，特別是后者甜孤，估計大家或多或少都曾今在自己的項(xiàng)目中使用到過协饲。當(dāng)然，現(xiàn)在也能使用這兩個開源庫缴川，只是我們有了更多的選擇茉稠，比如本文給大家介紹的TabLayout。
自2014年I/O結(jié)束后把夸，Google在Support Design包中發(fā)布了一些列新的控件而线，其中就包括TabLayout。配合著ViewPager和Fragment的使用恋日，TabLayout可以幫助開發(fā)者們分分鐘打造一個滑動標(biāo)簽頁膀篮，非常方便。本文作為Material Design系列學(xué)習(xí)的第一篇岂膳，將介紹TabLayout的兩種常見使用場景：頂部標(biāo)簽頁（如知乎）誓竿，底部菜單欄（如微信）。先看一下最終能夠?qū)崿F(xiàn)的效果：
基礎(chǔ)介紹
我們可以在代碼中定義TabLayout的每一個Tab項(xiàng)谈截，也可以通過TabLayout對象調(diào)用newTab（）方法創(chuàng)建筷屡，比如：
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
TabLayout的寬度分配模式、Indicator下劃線的高度簸喂、字體顏色毙死、選擇監(jiān)聽事件等這些方法都可以在官網(wǎng)看到，本文主要講TabLayout的常見應(yīng)用場景喻鳄，所以各屬性的設(shè)置就不碎碎念了扼倘，大家可以自行查閱。
頂部標(biāo)簽頁
TabLayout的使用需要借助Android Design包除呵，所以我們需要在 build.gradle中引入design包：
compile 'com.android.support:design:23.3.0'
在布局文件 activity_tab_layout.xml 中加入TabLayout和ViewPager控件：
<?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:orientation="vertical">
<include
layout="@layout/include_toolbar"/>
<android.support.design.widget.TabLayout
android:id="@+id/tl_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_48"
android:background="@color/blue">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
然后我們看一下 TabLayoutActivity 中的代碼：
package com.yifeng.mdstudysamples;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
/**
* Created by yifeng on 16/8/3.
*
*/
public class TabLayoutActivity extends BaseActivity {
private TabLayout mTabTl;
private ViewPager mContentVp;
private List<String> tabIndicators;
private List<Fragment> tabFragments;
private ContentPagerAdapter contentAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
mTabTl = (TabLayout) findViewById(R.id.tl_tab);
mContentVp = (ViewPager) findViewById(R.id.vp_content);
initContent();
initTab();
}
private void initTab(){
mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);
mTabTl.setTabTextColors(ContextCompat.getColor(this, R.color.gray), ContextCompat.getColor(this, R.color.white));
mTabTl.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.white));
ViewCompat.setElevation(mTabTl, 10);
mTabTl.setupWithViewPager(mContentVp);
}
private void initContent(){
tabIndicators = new ArrayList<>();
for (int i = 0; i < 3; i++) {
tabIndicators.add("Tab " + i);
}
tabFragments = new ArrayList<>();
for (String s : tabIndicators) {
tabFragments.add(TabContentFragment.newInstance(s));
}
contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
mContentVp.setAdapter(contentAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_tab_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.tab_add:
tabIndicators.add("Tab " + tabIndicators.size());
tabFragments.add(TabContentFragment.newInstance(tabIndicators.get(tabIndicators.size()-1)));
contentAdapter.notifyDataSetChanged();
return true;
case R.id.tab_mode_fixed:
mTabTl.setTabMode(TabLayout.MODE_FIXED);
return true;
case R.id.tab_mode_scrollable:
mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);
break;
}
return super.onOptionsItemSelected(item);
}
class ContentPagerAdapter extends FragmentPagerAdapter{
public ContentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return tabFragments.get(position);
}
@Override
public int getCount() {
return tabIndicators.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tabIndicators.get(position);
}
}
}
核心代碼有兩個地方再菊，第一個是 setupWithViewPager 方法將TabLayout和ViewPager綁定在一起隅肥，使雙方各自的改變都能直接影響另一方，解放了開發(fā)人員對雙方變動事件的監(jiān)聽袄简；第二個是在ViewPager的Adapter適配器中重寫 getPageTitle 方法，在這個方法中設(shè)置標(biāo)簽指示器的標(biāo)題泛啸。
底部菜單欄
上面我們使用了系統(tǒng)定義好的View做了一個純文字加下劃線組合的標(biāo)簽指示器绿语。其實(shí)，我們也能自定義一個布局候址，然后賦值給TabLayout的Tab視圖吕粹，比如做一個微信首頁界面。
相比頂部標(biāo)簽指示器岗仑，底部菜單欄只是將TabLayout布局在了下面：
<?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:orientation="vertical">
<include
layout="@layout/include_toolbar"/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tl_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_56"
android:background="@color/white">
</android.support.design.widget.TabLayout>
</LinearLayout>
在Activity代碼中匹耕，設(shè)置TabLayout的指示器高度為0，即達(dá)到了隱藏Indicator的目的荠雕，然后通過getTabAt（position）的方法獲取TabLayout的每一個Tab稳其，并賦值為自定義布局視圖，代碼也很簡單：
package com.yifeng.mdstudysamples;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by yifeng on 16/8/3.
*
*/
public class TabLayoutBottomActivity extends BaseActivity {
private TabLayout mTabTl;
private ViewPager mContentVp;
private List<String> tabIndicators;
private List<Fragment> tabFragments;
private ContentPagerAdapter contentAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout_bottom);
mTabTl = (TabLayout) findViewById(R.id.tl_tab);
mContentVp = (ViewPager) findViewById(R.id.vp_content);
initContent();
initTab();
}
private void initTab(){
mTabTl.setTabMode(TabLayout.MODE_FIXED);
mTabTl.setSelectedTabIndicatorHeight(0);
ViewCompat.setElevation(mTabTl, 10);
mTabTl.setupWithViewPager(mContentVp);
for (int i = 0; i < tabIndicators.size(); i++) {
TabLayout.Tab itemTab = mTabTl.getTabAt(i);
if (itemTab!=null){
itemTab.setCustomView(R.layout.item_tab_layout_custom);
TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_menu_item);
itemTv.setText(tabIndicators.get(i));
}
}
mTabTl.getTabAt(0).getCustomView().setSelected(true);
}
private void initContent(){
tabIndicators = new ArrayList<>();
for (int i = 0; i < 4; i++) {
tabIndicators.add("Tab " + i);
}
tabFragments = new ArrayList<>();
for (String s : tabIndicators) {
tabFragments.add(TabContentFragment.newInstance(s));
}
contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
mContentVp.setAdapter(contentAdapter);
}
class ContentPagerAdapter extends FragmentPagerAdapter{
public ContentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return tabFragments.get(position);
}
@Override
public int getCount() {
return tabIndicators.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tabIndicators.get(position);
}
}
}
從這兩種使用場景可以看出炸卑，利用TabLayout做一個滑動標(biāo)簽頁或者底部菜單欄既鞠，實(shí)現(xiàn)起來非常方便，代碼量也不多盖文，極大地減少了我們的開發(fā)量嘱蛋。但是，TabLayout也不是萬能的五续，如果想做出更多地特效還是需要我們自己去開發(fā)洒敏。所以，如果你想自己做一個滑動標(biāo)簽指示器疙驾，強(qiáng)烈推薦大家去看看TabLayout的源碼凶伙，相信對你一定有所啟發(fā)。
示例源碼
我在GitHub上建立了一個Repository它碎，用來存放整個Android Material Design系列控件的學(xué)習(xí)案例镊靴，會伴隨著文章逐漸更新完善，歡迎大家補(bǔ)充交流链韭，Star地址：
