Tablayout

Tablayout 结合 viewPager

 <android.support.design.widget.TabLayout  
        android:id="@+id/tab_FindFragment_title"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/titleBlue"  
//下划线的颜色
 app:tabIndicatorColor="@color/white" 
//被选中的颜色 
 app:tabSelectedTextColor="@color/gray"  
//默认字体颜色 
app:tabTextColor="@color/white"  
        />  


    <android.support.v4.view.ViewPager  
        android:id="@+id/vp_FindFragment_pager"  
        android:layout_width="fill_parent"  
        android:layout_height="0dp"  
        android:layout_weight="1"  
        />  

更多的style设置

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">  
    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->  
<item name="tabIndicatorColor">@color/tab_indicator_color</item>  
//高度
<item name="tabIndicatorHeight">10dp</item> 
//padding
<item name="tabPaddingStart">12dp</item>  <item name="tabPaddingEnd">12dp</item>    <item name="tabBackground">@color/colorPrimary</item>  
    <item name="tabTextAppearance">@style/TabTextAppearance</item>  
    <item name="tabSelectedTextColor">@color/tab_indicator_color</item>  
</style>  

//设置字体的大小 颜色
<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">  
    <item name="android:textSize">20sp</item>  
    <item name="android:textColor">@color/white</item>  
    <item name="textAllCaps">false</item>  
</style>

设置完成后 在xml中加上style

style="@style/MyCustomTabLayout"

代码中设置 关联 Tablayout 和 viewpager

//先设置默认的 title 后面可以改  mTablayout.addTab(mTablayout.newTab().setText("头条1"));     mTablayout.addTab(mTablayout.newTab().setText("头条2"));        mTablayout.addTab(mTablayout.newTab().setText("头条3"));        mTablayout.addTab(mTablayout.newTab().setText("头条4"));

//设置 viewpager
MyPagerAdapter adapter = new MyPagerAdapter(getChildFragmentManager());
//添加viewpager 的fragment        adapter.addFragment(NewsListFragment.newInstance("1"));
adapter.addFragment(NewsListFragment.newInstance("2"));
mViewPager.setAdapter(adapter);


//向tablayout 中添加 viewpager
mTabLayout.setupWithViewPager(mViewPager);

1. 其中 viewpaer的adapter 需要注意
title 实际上就是去调用adapter.getPageTitle(i)方法，所以使用此TabLayout就要adapter要实现getPageTitle()方法.

//返回每个标题的 title
 @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

2. tablayout的 标题可以自定义布局
其中1个实现就是 加角标，来源
http://download.csdn.net/download/oushangfeng123/9056283

/**
     * 设置Tablayout上的标题的角标
     */
    private void setUpTabBadge(int position) {
        TabLayout.Tab tab = mTabLayout.getTabAt(position);
        if (tab != null) {
            View view = LayoutInflater.from(this).inflate(R.layout.tab_title_layout, null);
            ((TextView) view.findViewById(R.id.tv_title)).setText(mTitles.get(position));
            tab.setCustomView(view);
            BadgeView badgeView = new BadgeView(this, (View) view.getParent());
            badgeView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
            badgeView.setText(position+"");
            badgeView.show(true);
        }
    }

3 . 给title 添加图片， 其实可以按照2的方式设置，自定义view 的 selector, 这里还有另外一种方式设置 tablayout的图标for循环设置icon

TabLayout.Tab tab = mTabLayout.getTabAt(position).setIcon(R.drawable.tab_title_bg1);

就这样设置一下 选中和未选中的图片就好了

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

    <item android:state_selected="true" android:drawable="@mipmap/ic_launcher"/>
    <item android:state_selected="false" android:drawable="@mipmap/ic_launcher1"/>

</selector>