Android TabLayout 分分鐘打造一個滑動標籤頁

使用滾動的標籤指示器和滑動的內容頁面，是手機應用常常出現的一種設計風格，常見的比較出名的應用有：微信（首頁）、網易新聞、今日頭條和知乎等。有過幾年安卓開發經驗的朋友確定知道，在GitHub上，實現這種功能有兩個比較出名的開源項目：PagerSlidingTabStrip 和 JakeWharton大神的ViewPagerIndicator，特別是後者，估計你們或多或少都曾今在本身的項目中使用到過。固然，如今也能使用這兩個開源庫，只是咱們有了更多的選擇，好比本文給你們介紹的TabLayout。

自2014年I/O結束後，Google在Support Design包中發佈了一些列新的控件，其中就包括TabLayout。配合着ViewPager和Fragment的使用，TabLayout能夠幫助開發者們分分鐘打造一個滑動標籤頁，很是方便。本文做爲Material Design系列學習的第一篇，將介紹TabLayout的兩種常見使用場景：頂部標籤頁（如知乎），底部菜單欄（如微信）。先看一下最終可以實現的效果：

頂部標籤.gif

底部菜單.gif

基礎介紹

---

咱們能夠在代碼中定義TabLayout的每個Tab項，也能夠經過TabLayout對象調用newTab（）方法建立，好比：

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下劃線的高度、字體顏色、選擇監聽事件等這些方法均可以在官網看到，本文主要講TabLayout的常見應用場景，因此各屬性的設置就不碎碎唸了，你們能夠自行查閱。

頂部標籤頁

---

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綁定在一塊兒，使雙方各自的改變都能直接影響另外一方，解放了開發人員對雙方變更事件的監聽；第二個是在ViewPager的Adapter適配器中重寫 getPageTitle 方法，在這個方法中設置標籤指示器的標題。

底部菜單欄

---

上面咱們使用了系統定義好的View作了一個純文字加下劃線組合的標籤指示器。其實，咱們也能自定義一個佈局，而後賦值給TabLayout的Tab視圖，好比作一個微信首頁界面。

相比頂部標籤指示器，底部菜單欄只是將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代碼中，設置TabLayout的指示器高度爲0，即達到了隱藏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作一個滑動標籤頁或者底部菜單欄，實現起來很是方便，代碼量也很少，極大地減小了咱們的開發量。可是，TabLayout也不是萬能的，若是想作出更多地特效仍是須要咱們本身去開發。因此，若是你想本身作一個滑動標籤指示器，強烈推薦你們去看看TabLayout的源碼，相信對你必定有所啓發。

示例源碼

---

我在GitHub上創建了一個Repository，用來存放整個Android Material Design系列控件的學習案例，會伴隨着文章逐漸更新完善，歡迎你們補充交流，Star地址：

github.com/Mike-bel/MD…

關注做者

---

本文由 亦楓 創做並首發於 亦楓的我的博客 ，同步受權微信公衆號：技術鳥（NiaoTech），歡迎關注。