最简单的TabLayout自定义样式(加角标)方法

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

11.PNG

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

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

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

先是布局

核心代码

//这个一定要在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布局

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

@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，搞定
没用任何第三方插件就能实现而且核心代码就那么几条，是不是很灵活