美文网首页android学习之路Android工程师Android
MagicIndicator系列之一 —— 使用MagicI

MagicIndicator系列之一 —— 使用MagicI

作者: hackware | 来源:发表于2016-06-26 21:04 被阅读24490次

    说到 ViewPager 指示器,想必大家都不陌生,绝大部分应用中都有这个。使用频率非常之高。但系统对它的支持并不好,自带的 PagerTabStrip 和 PagerTitleStrip 太弱,很难满足需求。当然也有第三方框架诸如 Jake Wharton 大神的 ViewPagerIndicator , PagerSlidingTabStrip 等,我曾经尝试着使用它们,但还是被它们的可定制能力给吓退了。

    背景


    近期交互改版,需要在指示器上增加吸附效果,刚开始我有点懵逼,因为之前的指示器只是简单的使用了 HorizontalScrollView + 横向 LinearLayout ,向 LinearLayout 里面添加一些 TextView 当做标题,选中的时候只是简单的改变 TextView 的颜色,没有任何动画,因此实现起来相对简单(项目前期时间紧迫)。这估计也是大部分应用的做法吧。

    考虑到后面如果交互再改版,那我又会懵逼了,所以干脆自己来打造一个可扩展、可定制能力 很强 真TM强 的 ViewPager 指示器框架 —— MagicIndicator

    magicindicator.gif

    关于命名


    之所以叫 MagicIndicator,是因为 鸿神 之前搞了一个 MagicViewPager, 我觉得这两个可以很好的搭配使用,并且正如大家看到的,它确实比较 Magic。

    如何使用


    这期就不打算给大家讲原理性文章了,只讲如何集成(主要是这两天都在写这个,被媳妇骂惨了,没时间写了),后面我会有一个系列的文章来讲这个,涉及到的内容大概有:

    • MagicIndicator 原理

    • 如何扩展 MagicIndicator 打造任意的切换效果

    • 如何使用 MagicIndicator 来打造主流应用(诸如微信主页的切换)的指示器效果

    好,我们开始。

    首先,你需要从我的 Github 上将工程代码 check 下来,直接导入即可运行,里面包含源码和 demo。工程中有个 Module 叫做 magicindicator,直接拷到你的项目中即可。包结构如下:

    Paste_Image.png

    不要忘了添加依赖哦:

    dependencies {
        compile project(':magicindicator')
    }
    

    导入成功后,就可以使用啦。你需要先在布局文件里引入 MagicIndicator:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="net.lucode.hackware.magicindicatordemo.MainActivity">
    
        <net.lucode.hackware.magicindicator.MagicIndicator
            android:id="@+id/magic_indicator"
            android:layout_width="match_parent"
            android:layout_height="@dimen/navigator_common_height"
            android:background="#d43d3d" />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@android:color/white" />
    
    </LinearLayout>
    

    再在代码里面找到它,并进行简单设置:

    final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
    final CommonNavigator commonNavigator = new CommonNavigator(this);
    commonNavigator.setAdapter(new CommonNavigatorAdapter() {
    
        @Override
        public int getCount() {
            return mDataList == null ? 0 : mDataList.size();
        }
    
        @Override
        public IPagerTitleView getItemView(Context context, final int index) {
            ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
    
            clipPagerTitleView.setText(mDataList.get(index));
            clipPagerTitleView.setTextColor(Color.parseColor("#f2c4c4"));
            clipPagerTitleView.setClipColor(Color.WHITE);
    
            clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mPager.setCurrentItem(index);
                }
            });
    
            return clipPagerTitleView;
        }
    
        @Override
        public IPagerIndicator getIndicator(Context context) {
            return null;    // 没有指示器,因为title的指示作用已经很明显了
        }
    });
    magicIndicator.setNavigator(commonNavigator);
    

    这样,你就可以轻松的实现效果图中 今日头条 式(效果图中第一个)切换效果。

    额,上面这代码明显没有和 ViewPager 相关联,因此滑动 ViewPager 时是看不到切换效果的,我们给 ViewPager 添加一个监听器:

    mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            magicIndicator.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    
        @Override
        public void onPageSelected(int position) {
            magicIndicator.onPageSelected(position);
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
            magicIndicator.onPageScrollStateChanged(state);
        }
    });
    
    mPager.setCurrentItem(1);
    

    这样, MagicIndicator 就算成功引入项目啦。

    • 注意,以上代码明显没有和 ViewPager 强关联,因此在不使用 ViewPager 的情况下,仍然可以使用 MagicIndicator。只是需要你手动调用 onPageXXX 系列方法回调即可。当然,后续我会提供帮助类来简化这个过程。
    • 等 MagicIndicator 基本稳定、成型后,我会把它提交到 MavenCenter 和 JCenter 中,方便大家使用。

    内建的指示器


    MagicIndicator 目前内建了好几种指示器,基本可以满足绝大部分需求,并且每一种指示器都支持通过 插值器(Interpolator) 来微调效果(如果你还不会 巧用插值器,可以参考我的前一篇博文 Android水波纹特效的简单实现 ),后面我还会不定期的往里面添加更多炫酷的效果,敬请期待。下面演示一下使用内建的指示器实现效果图中的 小尖角 式切换效果:

    final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
    final CommonNavigator commonNavigator = new CommonNavigator(this);
    commonNavigator.setAlwaysScrollToCenter(true);
    commonNavigator.setAdapter(new CommonNavigatorAdapter() {
    
        @Override
        public int getCount() {
            return mDataList == null ? 0 : mDataList.size();
        }
    
        @Override
        public IPagerTitleView getItemView(Context context, final int index) {
            SimplePagerTitleView simplePagerTitleView = new SimplePagerTitleView(context);
    
            simplePagerTitleView.setText(mDataList.get(index));
            simplePagerTitleView.setNormalColor(Color.parseColor("#333333"));
            simplePagerTitleView.setSelectedColor(Color.parseColor("#e94220"));
    
            simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mPager.setCurrentItem(index);
                }
            });
    
            return simplePagerTitleView;
        }
    
        @Override
        public IPagerIndicator getIndicator(Context context) {
            TriangularPagerIndicator indicator = new TriangularPagerIndicator(context);
            indicator.setLineColor(Color.parseColor("#e94220"));
            return indicator;
        }
    });
    magicIndicator.setNavigator(commonNavigator);
    

    看到没有,如果你想换一个效果,只需在 getItemView 里返回不同的指示器标题(IPagerTitleView),在 getIndicator 里返回不同的指示器(IPagerIndicator)就可以啦。

    如何扩展


    当内建的指示器不能满足你的需求时,你可以轻易的扩展,如果你的需求貌似可以使用 HorizontalScrollView + 横向 LinearLayout 方式实现,建议继承 IPagerTitleViewIPagerIndicator 即可,如果不行,那就完全自定义吧,继承 **IPagerNavigator ** (导航器 —— 我觉得上面的那些效果本质是一个导航器,指示器只是包含在导航器中的一个元素而已) 吧。效果图中的最后一个效果就是如此:

    final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
    final CircleNavigator circleNavigator = new CircleNavigator(this);
    circleNavigator.setCount(mDataList.size());
    circleNavigator.setCircleColor(Color.RED);
    magicIndicator.setNavigator(circleNavigator);
    

    当然,我可不希望每当内置指示器达不到你的需求时,你总是去继承这些个类,为了简化,我在最新的代码里增加了 CommonPagerTitleView,使用方法如下:

    final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
    CommonNavigator commonNavigator = new CommonNavigator(this);
    commonNavigator.setAdapter(new CommonNavigatorAdapter() {
    
        @Override
        public int getCount() {
            return mDataList == null ? 0 : mDataList.size();
        }
    
        @Override
        public IPagerTitleView getItemView(Context context, final int index) {
            CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView(MainActivity.this);
            commonPagerTitleView.setContentView(R.layout.simple_pager_title_layout);
    
            // 初始化
            final ImageView titleImg = (ImageView) commonPagerTitleView.findViewById(R.id.title_img);
            titleImg.setImageResource(R.mipmap.ic_launcher);
            final TextView titleText = (TextView) commonPagerTitleView.findViewById(R.id.title_text);
            titleText.setText(mDataList.get(index));
    
            commonPagerTitleView.setOnPagerTitleChangeListener(new CommonPagerTitleView.OnPagerTitleChangeListener() {
    
                @Override
                public void onSelected(int index) {
                    titleText.setTextColor(Color.RED);
                }
    
                @Override
                public void onDeselected(int index) {
                    titleText.setTextColor(Color.BLACK);
                }
    
                @Override
                public void onLeave(int index, float leavePercent, boolean leftToRight) {
                    titleImg.setScaleX(1.3f + (0.8f - 1.3f) * leavePercent);
                    titleImg.setScaleY(1.3f + (0.8f - 1.3f) * leavePercent);
                }
    
                @Override
                public void onEnter(int index, float enterPercent, boolean leftToRight) {
                    titleImg.setScaleX(0.8f + (1.3f - 0.8f) * enterPercent);
                    titleImg.setScaleY(0.8f + (1.3f - 0.8f) * enterPercent);
                }
            });
    
            commonPagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mPager.setCurrentItem(index);
                }
            });
    
            return commonPagerTitleView;
        }
    
        @Override
        public IPagerIndicator getIndicator(Context context) {
            return null;
        }
    });
    magicIndicator.setNavigator(commonNavigator);
    

    效果图:

    custom.gif

    关于扩展 MagicIndicator,后面会有详细的博文来讲解,敬请留意。如果你扩展 MagicIndicator 实现了很炫酷的指示器效果,欢迎共享出来。

    更多


    MagicIndicator 同样考虑到了 ViewPager 内容变化的情况,当你的 ViewPager 内容发生变化时,除了调用 PagerAdapter.notifyDataSetChanged ,还记得先调用 IPagerNavigator.notifyDataSetChanged 哦:

    mDataList.clear();
    mDataList.add("欢迎关注");
    mDataList.add("我的博客");
    mDataList.add("hackware.lucode.net");
    commonNavigator.notifyDataSetChanged();
    mAdapter.notifyDataSetChanged();
    

    结语


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

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

    MagicIndicator 疑难解答,交流请加QQ群:373360748。

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

    相关文章

      网友评论

      • edc8b43e0a93:你这个如果设置pager.setCurrentItem(1); 同时设置选中颜色,为什么第一个会默认有颜色
      • 帅狗黑皮668:我想问下如何 设置SimplePagerTitleView simplePagerTitleView = new ScaleTransitionPagerTitleView(
        context);字体默认大小的改变比如,默认为14sp滑动到某个下面为15sp,还有就是怎么设置底部的下划线宽度固定?
      • 郑州程序员王一:mDataList和mPager这些属性从哪里来的?好奇怪,既然是入门教程,为何不写详细些
      • hua_dm:您好!请问能在fragment实现吗? 比如:我底部有4个tab,每个都是viewpager+fragment,在其中一个嵌入这个可行吗? 我试了一下没有实现:sweat:
      • 天道小马哥:你好楼主,我想问下如何 设置SimplePagerTitleView simplePagerTitleView = new ScaleTransitionPagerTitleView(
        context);字体默认大小的改变比如,默认为14sp滑动到某个下面为15sp
      • realxz:你好,我想知道在数据源发生改变的时候,MagicIndicator 能够有相应的动画吗
      • fed01d72d8a6:不能获取选中了哪一个吗
      • beae917f7420:怎么设置tab之间的间距呢?
      • eb4f33e7dae6:本来打算自己写,想了想还是从网上copy算了 懒癌,感谢大神;:+1:
      • a50cf46914d2:下划线样式的指示器的下划线长度怎么自定义?
      • 太初_062f:楼主为什么我用Fragmentadapter达不到你说
        的效果呢??
      • thsai:要是有方法设置indicator的item之间的间距就完美了
      • thsai:设置 commonNavigator.setAdjustMode(true)后, 再设置下面那根线的宽度 indicator.setLineWidth()就没效果了?
      • winelx:博主,怎么设置这个指示器在显示在某个条目,因为像限时抢购这种时间不同,进去默认限时的位置也不同,
      • 叛逆的曾小砂:titleView 自带加粗了,是否能设置取消加粗
      • 可以再长高10cm:那请问,能获取到不同屏幕最多显示指示器的个数吗?
        hackware:@RErica 你自己去measure,不过很麻烦。
      • 可以再长高10cm:你好,如果我有好多个指示器,可以设置屏幕最多显示几个吗?比如,先显示六个,然后再往后滑动显示其他的???
        hackware:@RErica 要么平分,要么滑动,不支持即平分又滑动。
        可以再长高10cm:@hackware 哦哦,好的。那再问一个问题,如果我没有设置commonNavigator.setAdjustMode(true),然后就三个指示器的话,右边就是空白的了,这种情况怎么处理好呢?因为我的指示器个数不固定,个数少的话我想让它平分,个数多的话就滑动。。。
        hackware:@RErica 不能,一屏能显示几个是根据屏幕宽度和tab和实际宽度确定的
      • BeJack:你好,你这个框架集成到APP是不是compileSdkVersion必须得大于23?
        hackware: @BeJack 不是
      • 下雨就好:请问有没有iOS版的
        下雨就好:@hackware 不是特别明白,安卓移植iOS的方法 :fearful:
        hackware: @下雨就好 没有,不过你可以移植
      • lovelykooo:很炫
        hackware:@lovelykooo 图没更新,github上的更炫哦
      • 叶落非秋:擦,为啥顶部指示器游标不动,而且点击标题字体也不变颜色???
        hackware:@叶落非攻 你怎么用的,参考demo吧
      • loveke:您好,最近我公司的项目使用了您的MaginIndicator, 但是我的标题指示器一共有10个,能看到的有4个标题指示器。怎么设置只有4个标题指示器呢?
        hackware:@loveke 只看到4个,剩下的怎么办?
      • c3f537b6f5b3:我依照例子集成MagicIndicator,但是只能滑动,点击没有效果是因为什么呢
        楼主LZ:大神,照你的代码设置了点击监听 还是没反应怎么办啊
        hackware: @c3f537b6f5b3 你需要给pagertitle设置一个监听器
        c3f537b6f5b3:@c3f537b6f5b3 就是今日头条的那个效果,点击条目没有铁环效果
      • 寒平洛一:那个平分居中的,根本没有平分,强迫症受不了
        hackware:@寒平洛一 哪一个
      • 王小贱_ww:楼主,照着上面的代码弄第一个今天头条效果,为啥没实现?方便留个QQ号交流一下吗
        hackware: @王小贱26 你进群吧
        王小贱_ww:@王小贱26 275281462我的QQ
      • Hidetag:楼主的indicator可对viewpager切换时候做处理?具体例子为:我有一个viewpager,包含三个界面,indicator当然也是三个,如果我当前在第一页,也就是最左边那页,此时我点击了第三个,也就是最右边的indicator之后,viewpager会被切换到第三个,但是中途过渡的时候会经过第二页viewpager,如果页数更多的情况下,可能会造成视觉上的体验下降,所以我想问问楼主的indicator有没有对这种,单纯手指点击的时候,做一些处理呢
        hackware:@S_H_I_E_L_D 亲,你想要的效果现在已经支持了,调用CommonNavigator.setSkimOver(false)即可关闭过渡效果
        hackware:@S_H_I_E_L_D 这个主要是由于onPageScrolled回调本身就是有中途过渡的效果
        hackware:@S_H_I_E_L_D 针对这种情况,我后面会加一个skimOver的开关,选择性的关闭这种效果,不过,你也可以使用setCurrentItem(index, false)来禁用这种平滑滚动
      • coolzpw:楼主 我用你的那个demo 为什么用手指滑动没效果 只有点击tab才会有效果啊?
        coolzpw:@hackware 我懂了 刚刚理解错了 膜拜了 现在看看代码 嘿嘿
        hackware:@coolzpw 你又没有改代码?真机还是虚拟机?
      • 1bcab1154c88:楼楼,addOnPageChangeListener可以抽取一个setViewpager,效果可以类似于已有的indictator,方便设置,还有在倒数第三个的下划线红色的带小箭头的,如果是第一个位置,position==0的时候,指针箭头就不存在,看下这个问题吧
        hackware:@android_张波 我这边可以啊
        1bcab1154c88:@hackware 那个红色下划线指针那个看了吗,为什么呢
        hackware:@android_张波 额,setViewpager好恶心,和VIewPager强关联不说,还要额外持有一个addOnPageChangeListener
      • bogege:我想在自己的项目中用楼主的指示器,请问是需要将magicindicator这个模块作为自己模块的library就可以了吗
        bogege:@hackware 恩,效果出来了,多谢!楼主你后续的将indicator与viewpager的碎片关联搞了吗?
        hackware: @bogege 推荐这么做,如果你想拷贝代码也可以。你用不到的只是是都可以删除
        hackware:@bogege 对的
      • coolzpw:牛B,向楼主学习,一直想提高自己写自定义view的能力,但是技术太菜,等楼主下几篇文章!!~~
      • 46ad0f052b26:如果只有两个或者三个指示器。怎么居中平分?
        46ad0f052b26:@hackware 谢谢 看到你后面一篇文章写得有了。非常感谢!
        hackware:@46ad0f052b26 记得设置 commonNavigator.setAdjustMode(true) 哦
        hackware:@46ad0f052b26 在xml里中将MagicIndicator套在Gravity为Center的布局中,给它设置一个固定宽度即可,感谢支持 :smile:
      • Cliper:很6啊
        hackware: @0890a38aa073 谢谢支持
      • waidsw86:好文,顶!!
      • 捡淑:66666
        看到那个gif真心给跪了。。。不得不服

      本文标题:MagicIndicator系列之一 —— 使用MagicI

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