Material Design学习之TabLayout

1、作用
配合ViewPager的切换显示。

2、使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMargin="44dp"
            android:background="#64ffda"
            app:contentScrim="#0097a7"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:title="title">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/b"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:theme="@style/AppBarStyle"
                android:popupTheme="@style/AppBarPopStyle"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize">



            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            style="@style/MyTabLayoutStyle"
            ></android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>

Activity代码：

        TabLayout tl = (TabLayout) findViewById(R.id.tab_layout);

        //显示模式，MODE_FIXED是铺满布局，MODE_SCROLLABLE是可滑动的（Tab较多的时候使用）
        tl.setTabMode(TabLayout.MODE_FIXED);
        ViewPager vp = (ViewPager) findViewById(R.id.vp);
        vp.setAdapter(new TabFragmentAdapter(getSupportFragmentManager(),this));

        //和ViewPager适配器关联
        tl.setupWithViewPager(vp);

适配器代码：

public class TabFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    private List<String> titles;
    private List<Integer> icons;
    private Context context;


    public TabFragmentAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;

        icons = new ArrayList<>();
        icons.add(R.mipmap.aixin);
        icons.add(R.mipmap.search);
        icons.add(R.mipmap.share);
        icons.add(R.mipmap.zhifubao);

        fragments = new ArrayList<>();
        titles = new ArrayList<>();
        titles.add("Tab X");
        fragments.add(new TabFragment());
        for (int i=0;i<3;i++){
            TabItemFragment f = new TabItemFragment();
            Bundle bundle = new Bundle();
            bundle.putString("key","Tab View " + i);
            titles.add("Tab " + i);
            f.setArguments(bundle);
            fragments.add(f);
        }
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {

//        return titles.get(position);

        Drawable d = context.getResources().getDrawable(icons.get(position));
        d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
        SpannableString ss = new SpannableString("   " + titles.get(position));
        ImageSpan is = new ImageSpan(d,ImageSpan.ALIGN_BOTTOM);
        ss.setSpan(is,0,1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return ss;
    }
}

可选择的样式：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">?android:textColorSecondary</item>
    <item name="textAllCaps">true</item>
</style>

把Tab的Text换成icon + Text：
在Adapter里面更改代码：

@Override
    public CharSequence getPageTitle(int position) {

//        return titles.get(position);

        Drawable d = context.getResources().getDrawable(icons.get(position));
        d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());
        SpannableString ss = new SpannableString("   " + titles.get(position));
        ImageSpan is = new ImageSpan(d,ImageSpan.ALIGN_BOTTOM);
        ss.setSpan(is,0,1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return ss;
    }

运行，发现没有显示，这是因为TabLayout创建的tab默认设置textAllCaps属性为true，这阻止了ImageSpan被渲染出来，可以通过下面的样式文件定义来改变：

<style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout" >
        <item name="tabIndicatorColor">#000</item>
        <item name="tabTextAppearance">@style/MytabTextAppearance</item>
    </style>

    <style name="MytabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
    </style>

3、参考博客：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html