使用MagicIndicator创建一个Tab指示器【第一篇】

MagicIndicator的强大在于它的可扩展性很好，但同时使用时也需要配置写入很多代码，那么我们简单封装一个工具类:

1.创建一个工具类

//菜单指示器创建工具类
public class TabCreateUtils {
    /**
     * 类型：橘色指示器
     * 字：选中橘色，未选中黑色，加粗
     * 指示器：指示器长度和文字长度相同，橘色
     */
    public static void setOrangeTab(Context context,MagicIndicator magicIndicator, ViewPager viewPager, List<String> tabNames) {
        CommonNavigator commonNavigator = new CommonNavigator(context);
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {

            @Override
            public int getCount() {
                return tabNames == null ? 0 : tabNames.size();
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                ColorTransitionPagerTitleView colorTransitionPagerTitleView = new ColorTransitionPagerTitleView(context);
                colorTransitionPagerTitleView.setNormalColor(ContextCompat.getColor(context, R.color.text_black));
                colorTransitionPagerTitleView.setSelectedColor(ContextCompat.getColor(context, R.color.tab_orange));
                colorTransitionPagerTitleView.setTextSize(16);
                colorTransitionPagerTitleView.setText(tabNames.get(index));
                colorTransitionPagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        viewPager.setCurrentItem(index);
                    }
                });
                return colorTransitionPagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
                indicator.setColors(ContextCompat.getColor(context, R.color.tab_orange));
                indicator.setRoundRadius(3);
                return indicator;
            }
        });
        commonNavigator.setAdjustMode(true);
        magicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(magicIndicator, viewPager);
    }
}

其中commonNavigator.setAdjustMode(true);可以让指示器在数量较少的情况下也铺满，避免个数少时，缩进在一起。

2.使用：

 TabCreateUtils.setOrangeTab(this.getContext(),magicIndicator,viewPager, Arrays.asList(tabNames));

最后效果如下：

一个简单的Tab菜单选项

有的同学需要角标，这个库也是支持的，下面我们创建一个角标的Tab:

    public static void setOrangeTab(Context context,MagicIndicator magicIndicator, ViewPager viewPager, String[] tabNames) {
        CommonNavigator commonNavigator = new CommonNavigator(context);
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {

            @Override
            public int getCount() {
                return tabNames == null ? 0 : tabNames.length;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {



                ColorTransitionPagerTitleView colorTransitionPagerTitleView = new ColorTransitionPagerTitleView(context);
                colorTransitionPagerTitleView.setNormalColor(ContextCompat.getColor(context, R.color.text_black));
                colorTransitionPagerTitleView.setSelectedColor(ContextCompat.getColor(context, R.color.tab_orange));
                colorTransitionPagerTitleView.setTextSize(16);
                colorTransitionPagerTitleView.setText(tabNames[index]);
                colorTransitionPagerTitleView.setOnClickListener(view -> viewPager.setCurrentItem(index));
                //创建一个角标注入到当前Tab
                final BadgePagerTitleView badgePagerTitleView = new BadgePagerTitleView(context);
                badgePagerTitleView.setInnerPagerTitleView(colorTransitionPagerTitleView);
                if (index==0){
                    //创建一个TextView来显示角标
                    TextView badgeTextView = new TextView(context);
                    badgeTextView.setText("99" );
                    badgeTextView.setTextColor(Color.WHITE);
                    badgeTextView.setTextSize(10);
                    badgeTextView.setPadding(UIUtil.dip2px(context, 4),0,UIUtil.dip2px(context, 4),0);
                    badgeTextView.setBackgroundResource(R.drawable.round_orange_btn_bg);
                    badgePagerTitleView.setBadgeView(badgeTextView);
                    //定位角标位于Tab的X，Y轴的位置
                    badgePagerTitleView.setXBadgeRule(new BadgeRule(BadgeAnchor.CONTENT_RIGHT, UIUtil.dip2px(context, 6)));
                    badgePagerTitleView.setYBadgeRule(new BadgeRule(BadgeAnchor.CONTENT_TOP, 0));
                }
                badgePagerTitleView.setAutoCancelBadge(false);
                return badgePagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
                indicator.setColors(ContextCompat.getColor(context, R.color.tab_orange));
                indicator.setRoundRadius(3);
                return indicator;
            }
        });
        commonNavigator.setAdjustMode(true);
        magicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(magicIndicator, viewPager);
    }

效果如下：

角标

但有的时候我们并不需要关联ViewPager来使用，只是想简单实现点击后触发不同的事件。那么我们可以做一个不关联ViewPager的指示器Tab