Android Widget TabLayout

Android

WHAT

HOW

Gradle 中以来Support Design

在布局中使用

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#7f00" />
<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// 在宽度比较大时,fill tab充满宽度;center 居中,只包裹tab宽度
app:tabGravity="fill"
// tab 模式,fixed 均等分配tab宽度,不可以滚动;scrollable 在宽度不够情况下可以横向滚动
app:tabMode="fixed"
// tab 的背景
app:tabBackground="@android:color/darker_gray"
// 底部下划线指示器颜色
app:tabIndicatorColor="#ff0"
// 下划线指示器高度
app:tabIndicatorHeight="10dp"
app:tabPaddingBottom="0dp"
app:tabPaddingTop="0dp"
// 文字颜色
app:tabSelectedTextColor="#7ff0"
app:tabTextColor="#f00"
// tab 文字的样式
app:tabTextAppearance="@style/textAppearance"

代码中控制Tab标题,Icon或者自定义Tab布局

TabLayout tabLayout = (TabLayout)findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2").setIcon(R.mipmap.icon));
// 或者给Tab使用自定义View布局
TabLayout.Tab customTab = tabLayout.newTab();
TextView textView = new TextView(this);
textView.setText("custom");
textView.setBackgroundColor(Color.RED);
textView.setTextColor(Color.BLUE);
customTab.setCustomView(textView);
tabLayout.addTab(customTab);

通常是和ViewPager + Fragment搭配一起使用

ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
// init Fragments and Titles
// ...
// 必须先让ViewPager设置Adapter,然后才能使用TabLayout的setupWithViewPager
viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
// ---
private String[] mTitles;
private List<Fragment> mFragmentList;
private class TabPagerAdapter extends FragmentPagerAdapter{
    public TabPagerAdapter(FragmentManager fm) {
            super(fm);
    }
    // 获取对应的Tab Title
    public CharSequence getPageTitle(int position){
        return mTitles[position];
    }
    // 返回对应位置的Fragment
    public Fragment getItem(int position) {
            return mFragmentList.get(position);
    }
    // 返回Tab的个数,也是ViewPager的页数
    public int getCount() {
            return mFragmentList.size();
    }
}

和ViewPager搭配的情况下Tab 的title则是从Adapter中设置的,ViewPager将和TabLayout一起联动

TabLayoutSample

WHY

TODO:未完待续...

TabLayout extends HorizontalScrollView

底部下划线
private final SlidingTabStrip mTabStrip;

特殊用法:

TabLayout作为ViewPager的decor

对应布局写法:

<!-- 直接嵌入到ViewPager中 -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>

这里判断TabLayout如果是嵌入到ViewPager的方式,则自动调用setupWithViewPager

protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    if (mViewPager == null) {
        // If we don't have a ViewPager already, check if our parent is a ViewPager to
        // setup with it automatically
        final ViewParent vp = getParent();
        if (vp instanceof ViewPager) {
            // If we have a ViewPager parent and we've been added as part of its decor, let's
            // assume that we should automatically setup to display any titles
            setupWithViewPager((ViewPager) vp, true, true);
        }
    }
}