美文网首页Android知识AndroidAndroid UI
MagicIndicator系列之二 —— MagicInd

MagicIndicator系列之二 —— MagicInd

作者: hackware | 来源:发表于2016-07-02 14:51 被阅读6826次

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

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

    相关文章

      网友评论

      • 不系之舟王小姐:请问谁知道怎么设置每个tab之间的间距???
      • AxIshmael:怎么设置默认显示的viewpager,比如有一、二、三、四 4个fragment,每次进来要默认显示“三”这个fragment???
      • 吴小博Toby:可以换行吗
      • a50cf46914d2:圆形的指示器是哪个?怎么用,详细点
      • 聞言:可不可以设置图片呀?就是又有文字又有图片的。不只是有文字?
      • 3bf199bcd55c:默认显示第n个页面,支持么
        JFang:能不能不用ViewPager绑定,因为我所有的类别下都只是一个列表而已。我想通过改变参数,来刷新数据
        hackware:@3bf199bcd55c 默认显示第几个页面和这个框架无关,如果你使用ViewPager,再绑定MagicIndicator后,调用ViewPager.setCurrentItem即可
      • litchi_coder:魅族手机怎么左右切换的方式变了,往右滑指示器往左切换
        hackware: @litchicoder 可能系统开启了right2left,对阿拉伯国家的用户更有好
      • 1251c9b12a4b:自适应模式为true但是不均分,什么原因
        hackware: @jianning0925 这是为了演示
        1251c9b12a4b:@jianning0925 自问自答,找到了,在getTitleWeight这个方法中index=2时返回的是1.5 :cold_sweat:
      • b7e9763ffd86:轮子的新高度,喜欢
      • coolzpw:6666 这个gif图怎么做的啊 用的啥软件啊
        hackware:@coolzpw GifCam,低版本在win10下好像有兼容性问题,最新版本是5.1
      • 遇到爱ka:今日头条在设置 commonNavigator.setRightPadding()后无效 设置setLeftPadding()
        hackware: @遇到爱ka 发现这个问题了,padding改有待优化

      本文标题:MagicIndicator系列之二 —— MagicInd

      本文链接:https://www.haomeiwen.com/subject/omdqjttx.html