TabLayout

一、什么是TabLayout
1.以前使用TabHost。比如网易新闻客户端那样可以滑动的标题栏。
android.support.design.widget.TabLayout

使用场景：
TabLayout控件，切换Fragment
TabLayout+ViewPager+Fragment

二、使用

1.引入Design兼容包
2.布局

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.seasons.live.tablayout.TabLayoutActivity" >

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorPrimary_pink"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimary_pinkDark"
        app:tabTextColor="@color/colorPrimary_pink" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

属性：

app:tabIndicatorColor="@color/colorPrimary_pink"//指示器的颜色
app:tabTextColor="@color/colorPrimary_pink"//tab的文字颜色
app:tabSelectedTextColor="@color/colorPrimary_pinkDark"//选中的tab的文字颜色
app:tabMode="fixed"//scrollable:可滑动；fixed：不能滑动，平分tabLayout宽度
app:tabGravity="center"// fill:tabs平均填充整个宽度;center:tab居中显示

3.activity

final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        // 1.TabLayout和Viewpager关联
        tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {

            @Override
            public void onTabUnselected(Tab arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onTabSelected(Tab tab) {
                // 被选中的时候回调
                viewPager.setCurrentItem(tab.getPosition(), true);
            }

            @Override
            public void onTabReselected(Tab arg0) {
                // TODO Auto-generated method stub

            }
        });
        // 2.ViewPager滑动关联tabLayout
        viewPager
                .addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(
                        tabLayout));

        // 设置tabLayout的标签来自于PagerAdapter
        tabLayout.setTabsFromPagerAdapter(adapter);

        viewPager.setAdapter(adapter);
    }

三、如何将TabLayout实现成底部导航的样子？
1.就把TabLayout放在布局底部
2.如何去掉底部的indicator，可以app:tabIndicatorHeight=”0dp”
3.实现自己的效果，比如
微信：设置自定义的标签布局
Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(view);