MagicIndicator系列之二 —— MagicIndicator使用指南

我创业了，从程序员转行经济学家。欢迎关注我的微博 @隆中后生仔 ，我要以一己之力吊打经济学界，吊打微信之父张小龙。 我 26 岁，青年正当时，未来大有可为。

原计划这周给大家带来 MagicIndicator 的原理性文章（虽说不难，都是一个套路，但还是有必要阐述一下），可这两天加班加点给 MagicIndicator 增加了一些新特性，使得它的可定制能力更强了，这也就直接导致使用时要关注的配置参数更多了，所以我觉得有必要对这些参数进行一一讲解，方便大家快速入手。

本篇是 MagicIndicator 系列博文的第二篇，如果你还没有看过 MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器 ，建议先看完再过来看这篇。

开篇

---

额，我还是先贴图吧，从图中就可以看出 MagicIndicator 支持的一些特性：

magicindicator.gif

我稍稍介绍一下，在代码层面，每一个指示器就是一个 **IPagerNavigator ** , MagicIndicator 中目前内置了两个 IPagerNavigator （后续不断增多），分别是：

• CommonNavigator
• CircleNavigator

顾名思义， CommonNavigator 是一个通用的指示器，也就是指我们常见的横向的、带有很多子元素的的指示器。子元素中可带文本、图标以及你想要的任何View。效果图中除了最后一个指示器是 CircleNavigator 外，其余全是对 CommonNavigator 进行参数配置的结果，怎么样，是不是觉得很强大！

CircleNavigator 功能则比较简单，我把它作为内置的指示器只是为了凸显 MagicIndicator 的扩展能力，具体用法请参考我的 demo 吧，今天不做过多介绍。

CommonNavigator

---

这才是今天的主角。

考虑到绝大部分应用中的指示器都类似上面的效果，因此我将它抽象出来。同时为了使得大家通过简单配置（自定义 IPagerNavigator 显得麻烦）即可满足一般需求，我找了很多带指示器的应用，诸如小飞读报、讯飞输入法、一点资讯、今日头条、网易新闻、微信、豌豆荚等，挨个研究它们的指示器效果，总结出了一些共有的特性。这些特性在代码层面，表现为 CommonNavigator 的7个成员变量，分别是：

/**
 * 提供给外部的参数配置
 */
/****************************************************/
private boolean mAdjustMode;   // 自适应模式，为true表示title均分宽度，适用于数目固定的、少量的title
private boolean mEnablePivotScroll; // 启动中心点滚动
private float mScrollPivotX = 0.5f; // 滚动中心点 0.0f - 1.0f
private boolean mSmoothScroll = true;   // 是否平滑滚动，适用于 !mAdjustMode && !mFollowTouch
private boolean mFollowTouch = true;    // 是否手指跟随滚动
private int mRightPadding;
private int mLeftPadding;
/****************************************************/

看到注释我想你就已经比较明了啦，不过我还是想对这几个属性展开说明：

• mAdjustMode
  自适应模式，默认为 false，适用于数目固定的、子元素较少的指示器，比如讯飞输入法的皮肤界面：

  
  
  

  shurufa.gif
  
  

  自适应模式下，每个子元素的宽度默认是均分的。如果你不想均分，重写 CommonNavigatorAdapter 的 getTitleWeight 方法吧。同时，其余6个属性都不生效了，因为都没意义啦。

• mFollowTouch
  手指跟随滚动，默认为true，此模式下，只要 ViewPager 滚动，子元素也会跟着滚动，否则要等手指抬起后（onPageSelected）才开始滚动，看看小飞读报的效果吧：

  
  
  xiaofeidubao.gif

• mScrollPivotX
  滚动的中心点，默认为0.5f，也就是居中，就像刚才小飞读报的效果，如果你设置为0.15f，就是网易新闻的效果啦：

  
  
  wangyixinwen.gif
  
  

  gif略卡，大家不要怪我，都是网易新闻的错，该优化优化下界面卡顿啦。

• mEnablePivotScroll
  是否开启中心点滚动，默认为 false，开启后，选中某一个子元素时，将会根据 mScrollPivotX 滚动到合适的位置，否则，只有当子元素不完全可见时，才会触发滚动，使得子元素完全可见。

• mSmoothScroll
  是否平滑滚动，默认为 true，在 !mAdjustMode && !mFollowTouch 下生效。也就是当子元素不完全可见时，触发滚动使之完全可见时是否平滑滚动。

• mLeftPadding，mRightPadding
  CommonNavigator 内部的 HorizontalScrollView 的 左右padding，默认为0。至于它有什么用，看看今日头条的效果吧：
  

  

  toutiao.gif
  
  可以看到，添加频道按钮和搜索按钮是悬在指示器上边的，但是指示器中的最后一个元素却可以滚出来，在 MagicIndicator 中，设置一下 mRightPadding 就可以搞定啦。

好了，这几个属性都介绍完了，相信大家都明白了吧。关于效果图中的效果是如何做到的，后面会有专门的博客来讲解如何扩展 MagicIndicator 打造任意的切换效果。

结语

---

如果大家觉得 MagicIndicator 很好，对你有帮助，欢迎多多 star + fork，关注！关注！，也请帮忙推广一下哈。感激不尽。

MagicIndicator 是我计划长期维护的项目，由于才刚开始，现在的指示器效果还不是很多，后续会不断加入更多炫酷的效果，如果你想加入我，打造更好的用户体验，私信我吧。

MagicIndicator 疑难解答，交流请加QQ群：373360748。

今天就到此为止吧。周末愉快！