因为项目需求需要做一个这样的页面

11.PNG

开始想着直接用FragmentTabHost加BadgeView角标来做非常方便，但后来需求又说这个页面还要左右能滑动，好吧。那就改用TabLayout来做吧，然后问题就来了，如果没有那个数字角标的话其实也是非常简单的，只需要直接settext再seticon就行，但是这个角标的问题有点麻烦了。

开始觉得用BadgeView吧，自定义样式也有点麻烦，而且添加起来也挺麻烦的，再加上网上各种方法都一大堆内容，实在是不方便的样子。

好吧，既然嫌麻烦那就用最简单的方法来做，直接上干货：

先是布局

<android.support.v7.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:paddingTop="5dp"
        android:background="#fff">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                app:tabIndicatorColor="#fff"
                app:tabIndicatorHeight="0dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#49b2ed"
                app:tabTextColor="#fff"
                app:tabTextAppearance="@style/TabText" />

        </RelativeLayout>

    </android.support.v7.widget.Toolbar>

    <!--<View-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="1dp"-->
    <!--android:background="#999" />-->

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:background="#fff"/>

核心代码

//这个一定要在setAdapter之后执行
private void setTabStyle() {
        for(int i = 0;i < mTitleArray.size();i++){//根据Tab数量循环来设置
            TabLayout.Tab tab = tab_title.getTabAt(i);
            if(tab != null) {
                View view = LayoutInflater.from(this).inflate(R.layout.tab_title_layout, null);
                ((TextView) view.findViewById(R.id.msgnum)).setText(String.valueOf(mGetCount[i]));//设置角标数量
                ((TextView) view.findViewById(R.id.tv_title)).setText(mTitleArray.get(i));//设置Tab标题
                if(i == 0) {//第一个默认为选择样式
                    ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorCambridgeblue));//将第一个Tab标题颜色设为蓝色
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mSelectArray[i]);//将第一个Tab图标设为蓝色
                }else {
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[i]);//将其他Tab图标设为灰色
                }
                tab.setCustomView(view);//最后添加view到Tab上面
            }
        }
}

item布局

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

<TextView
    android:id="@+id/msgnum"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingHorizontal="5dp"
    android:textSize="12dp"
    android:layout_gravity="right"
    android:textColor="@color/colorCambridgeblue"
    android:background="@drawable/stroke_all_blue"/>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical">
<android.support.v7.widget.AppCompatImageView
    android:id="@+id/tabicon"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:layout_gravity="center" />

<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12dp"
    android:gravity="center"
    android:textColor="@color/colorGray"
    android:textStyle="bold"/>

</LinearLayout>

</FrameLayout>

到这里基本就出来效果了
最后添加一个滑动时字体颜色和图标颜色改变的事件

@Override
public void onTabUnselected(TabLayout.Tab tab) {
    try {
        if (tab != null) {
            View view = tab.getCustomView();
            ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorGray));//设置一下文字颜色
            ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[tab.getPosition()]);//设置一下图标颜色
            tab.setCustomView(view);
        }
    }catch (Exception e){
        e.printStackTrace();
    }
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
    try {
        if (tab != null) {
            View view = tab.getCustomView();
            ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorCambridgeblue));
            ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mSelectArray[tab.getPosition()]);
            tab.setCustomView(view);
        }
        vp_content.setCurrentItem(tab.getPosition());
    }catch (Exception e){
        e.printStackTrace();
    }
}

ok，搞定
没用任何第三方插件就能实现而且核心代码就那么几条，是不是很灵活