自定义Indicator,没那么难~

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

  • Android原生的 TabLayout
  • JakeWharton大神的 ViewPagerIndicator

上面两种,用法自行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,没那么难~)