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

96
作者 hackware
2016.07.02 14:51* 字数 1436

原计划这周给大家带来 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。

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

Android