美文网首页NT-TECH程序员
自定义Indicator,没那么难~

自定义Indicator,没那么难~

作者: 颜渃 | 来源:发表于2016-09-30 11:52 被阅读210次

    在Android开发中,经常会有viewpager滑动指示器的功能,比较常用的:

    上面两种,用法自行Google,都比较简单。但是,如果设计给的指示器是一个自己设计的图或者其他的?又或者,确实不想因为一个页面而进入一个第三方库?那么,我们就需要自己去写一个指示器了。

    今天重点:

    怎么自定义一个任何样式的指示器呢?

    • 首先,其实要明白指示器与viewpager联动的关联在哪里
    • 其次,就是定义我们的指示器(我下面展示的是指示器与所指示的内容彻底分离,当然可以放在一起,但重点是讲指示器~)

    那么,就开始吧。

    联动的关系
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) indicator.getLayoutParams();
                float left = i * viewWidth + viewWidth / 2 - indicator.getMeasuredWidth() / 2 + v * viewWidth;
                params.leftMargin = (int) left;
                indicator.setLayoutParams(params);
                if (mListener != null) {
                    mListener.onPageScrolled(i, v, i1);
                }
            }
    
            @Override
            public void onPageSelected(int i) {
                if (mListener != null) {
                    mListener.onPageSelected(i);
                }
            }
    
            @Override
            public void onPageScrollStateChanged(int i) {
                if (mListener != null) {
                    mListener.onPageScrollStateChanged(i);
                }
            }
        });
    
    • 重点就是onPageScrolled这个回调,三个参数
    • position (i) 当前页面,你点击滑动的页面
    • offset (v) 当前页面偏移的百分比
    • offsetPixels (i1) 当前页面偏移的像素位置
    • indicator 是我的指示器view(ImageView)
    • viewWidth 是指示器所指示的内容的宽度
    • 通过设置leftMargin,来动态改变indicator的位置

    使用上述方式,其实就是将你的指示器view与viewpager滑动关联,即滑动viewpager时,指示器随着滑动的偏移量移动位置

    还有一种方式,是在onPageScrolled里增加view的滑动动画,但是这样就无法随着viewpager偏移去偏移了。

    float left = i * viewWidth + viewWidth / 2 - indicator.getMeasuredWidth() / 2 + v * viewWidth;
    indicator.animate().translationX(left).setDuration(200).start();
    

    到此,你的indicator就可以随便滑动了,随便你设置什么图片
    实现上述的indicator,其实就这么简单~

    相关文章

      网友评论

        本文标题:自定义Indicator,没那么难~

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