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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,326评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,228评论 1 304
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,979评论 0 252
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,489评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,894评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,900评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,075评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,803评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,565评论 1 249
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,778评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,255评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,582评论 3 261
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,254评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,151评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,952评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,035评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,839评论 2 277

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,637评论 4 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,590评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,634评论 1 92
  • 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况。Spring Boot提供了一个默认的映射:/e...
    Bobby0322阅读 3,176评论 0 4
  • 从天山下来 一直是雪 让我把世界看的 透明和清澈 夏天抱着雪白的冰凉 谁说我不喜欢 烈焰焚情燃烧的火 你如碳素的黑...
    赛腾烟阅读 404评论 8 18