簡單實現

效果圖

步驟：

• 需求：TabLayout的簡單使用
• 確定佈局—找到控制元件–設定adapter–
• 1 initView()
• 2 initAdapter()
• 3 initTablayout()
• 4 initViewpager()

佈局：

Eclipse注意V4，V7，Design包裡面的屬性是不主動提示的，要手敲或copy

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 

    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<!--要引用全路徑+特有屬性不提示，最好copy，title的大小不可設定，只能通過@style設定-->
    <android.support.design.widget.TabLayout
 
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:tabBackground="@color/TabLayoutBG"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight
 
="3dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/holo_blue_dark"
        app:tabTextAppearance="@style/TabLayoutTabTextAppearance"
        app:tabTextColor="@android:color/black"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabLayout">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

設定tab字型大小+去掉字母預設大寫限制

<style name="TabLayoutTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">15sp</item>
</style>

parent也可以是：

parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">

java程式碼

//注意這2行程式碼的順序：viewpaper要先設定adapter，才可以讓 tablayout繫結,否則報錯：viewpager沒有setAdapter()
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(0);

常見問題

怎麼新增Tittle

tabLayout.setTabMode(TabLayout.MODE_FIXED);//官網解釋fixed是個滑動
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(0)));/**注意建立TAB物件：tabLayout.newTab()*/
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(3)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(4)));

上述以前可以，但現在不行了，下面解釋

怎麼將二者繫結 TabLayout+Viewpager？

private void initViewPager() {
    //注意這2行程式碼的順序：viewpaper要先設定adapter，才可以讓 tablayout繫結,否則報錯：viewpager沒有setAdapter()
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    viewPager.setCurrentItem(0);
    }

為什麼呼叫方法setupWithViewPager()後Title消失了？

因為setupWithViewPager()方法內部呼叫了removeAllTabs()。

按住ctrl+滑鼠左鍵，進入原始碼：

Step1

tabLayout.setupWithViewPager(viewPager);

Step2:setupWithViewPager()

public void setupWithViewPager(@Nullable ViewPager viewPager) {
    setupWithViewPager(viewPager, true);
}

Step3：setupWithViewPager（）

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,boolean implicitSetup) {

    if (viewPager != null) {
        ...
        if (adapter != null) {
            // Now we'll populate ourselves from the pager adapter, adding an observer if
            // autoRefresh is enabled
            setPagerAdapter(adapter, autoRefresh);
        }

    } else {
        // We've been given a null ViewPager so we need to clear out the internal state,
        // listeners and observers
        mViewPager = null;
        setPagerAdapter(null, false);
    }
    ...
}

Step4:setPagerAdapter()

void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
    ...
    // Finally make sure we reflect the new adapter
    populateFromPagerAdapter();
}

Step5: populateFromPagerAdapter()

void populateFromPagerAdapter() {
    removeAllTabs();
    ...
}

到這裡我們就應該知道原因了，下面在看看這個方法是怎麼實現的。

Step6：removeAllTabs()

/**
 * Remove all tabs from the action bar and deselect the current tab.
 */
public void removeAllTabs() {
    // Remove all the views
    for (int i = mTabStrip.getChildCount() - 1; i >= 0; i--) {
        removeTabViewAt(i);
    }

    for (final Iterator<Tab> i = mTabs.iterator(); i.hasNext();) {
        final Tab tab = i.next();
        i.remove();
        tab.reset();
        sTabPool.release(tab);
    }

    mSelectedTab = null;
}

怎麼解決：“呼叫方法setupWithViewPager()後Title消失” ？

方法一：

在setupWithViewPager()後 新增title

tabLayout.setupWithViewPager(viewPager);
//如果不呼叫下面的程式碼，執行後發現tablayout沒有了Title,
// 這是因為原始碼呼叫了removeAllTabs();以前沒有，具體API幾新增的這個方法不清楚
//方法一：
tabLayout.getTabAt(0).setText("精選");
tabLayout.getTabAt(1).setText("訂閱");
tabLayout.getTabAt(2).setText("發現");

方法二：ViewPager的adapter中呼叫getPageTitle(int position)

//設定Tab的標題
@Override
public CharSequence getPageTitle(int position) {
    return titles[position];
}

app:tabGravity=”fill” app:tabGravity=”center”的區別？

app:tabGravity=”center” tab居中顯示，若tab數量較少，導致無法填充滿螢幕寬度，會居中顯示，兩邊會有空白。

app:tabGravity=”fill”

app:tabGravity=”center”

android:background=”” 與app:tabBackground=“” 的區別？

見上圖：

app:tabMode=”fixed”和app:tabMode=”scrollable”的區別？

app:tabMode=”fixed”和app:tabMode=”scrollable”的區別也是這樣，fixed會充滿螢幕寬度，tab數量較少時，scrollable不足以充滿螢幕寬度，而且是左對齊。

怎麼去掉下劃線？

讓下劃線的高度為0即可。

app:tabIndicatorHeight="0dp"

怎麼給tab新增分割線？

LinearLayout tab1 = (LinearLayout) tabLayout.getChildAt(0);
tab1.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
tab1.setDividerDrawable(getResources().getDrawable(R.drawable.divider));

divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/item6"/>
    <size android:width="1dp"/>
</shape>

屬性

下載原始碼

TabLayout新增TAB的3種方式

第一種：addTab()

tabLayout2.addTab(tabLayout2.newTab().setText("tab1").setIcon(R.mipmap.ic_launcher_round));

第二種：在xml佈局中直接新增TabItem

 <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <android.support.design.widget.TabItem
            android:id="@+id/tab1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="首頁"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="聯絡人"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="朋友圈"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="我"/>
    </android.support.design.widget.TabLayout>

第三種：呼叫adapter中的方法getPageTitle（）

這也是最常用的

//設定Tab的標題
@Override
public CharSequence getPageTitle(int position) {
    return titles[position];
}

Android Developer 文件中還介紹了ViewPager包裹TabLayout，不知道怎麼使用

SlidingTabLayout + SlidingTabStrip