自己造轮子——一个可爱的ViewPager指示器

2018-09-11 本文已影响276人 dongjunkun

在很久以前，我写了一个android广告栏控件，https://github.com/dongjunkun/BannerLayout，其实当时只是学习之用，自己也不是很懂，一边写代码一边查资料及其他开源控件，勉勉强强的算是完成了，现在github上也有了几百个star，时至今日，我也一直在用，中间也没太多的精力把这个库完善，因为本来就是主打简单实用，所以功能不多，拓展性也一般，根据网友的要求，中间将图片加载模块提取出来了，但指示器封装到了BannerLayout内部了，前段时间我们的设计出了一款圆角矩形的指示器，而且带有阴影效果，之前的方法就不行了，趁着有点空闲的时间，又单独写了个指示器控件，如下：

indicator.gif

github传送门：CuteIndicator

实现思路

通过GradientDrawable实现，每一个点都是一个Drawable，设置形状，颜色，大小，圆角等等，但发现有个大坑，根本不能设置阴影，BannerLayout采用的方案就是这个，就只好放弃。
~~通过XML绘制，结果一样，发现不过一个是通过代码，而这边是通过xml属性设置，本质并无区别，放弃。~~
通过重新onDraw方法绘制指示器，好多table指示器都是通过这种方法实现的，可以尝试下，而且paint包含有setShadowLayer方法可绘制阴影。

Step by Step

1、先新建一个自定义View继承于LinearLayout，重写构造函数，重写OnDraw方法，如下：

class CuteIndicator : LinearLayout {

    constructor(context: Context) : super(context) {
        init(null, 0)
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        init(attrs, 0)
    }

    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
        init(attrs, defStyle)
    }

    private fun init(attrs: AttributeSet?, defStyle: Int) {

        val a = context.obtainStyledAttributes(
                attrs, R.styleable.CuteIndicator, defStyle, 0)
       //自定义属性赋值  
        a.recycle()
    }


    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
    }

也可以利用android Studio创建自定义View模板。

2、重写onDraw随便画点东西

  override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
          rectf.left = getLeft()
          rectf.top = getTop()
          rectf.right = getRight()
          rectf.bottom = getBottom()
         canvas.drawRect(rectf,paint)
    }

这个地方有点小坑，试了一会儿，onDraw方法都没有触发，继承View会默认触发，但继承LinearLayout不会，依靠万能的搜索引擎，发现了几行有用的代码

fun init(){
        ...
        //允许Draw
        setWillNotDraw(false)
        ...
}
//触发onDraw方法，至于两个方法区别，自行查阅
invalidate()
postInvalidate()

终于在控制台检测到了onDraw方法被执行，但画面依旧是一片空白，什么也没有画上去，检查了一下，所有方法都执行了，每个值都能打印出来，问题出在位置不对，getLeft()，getRight(),getTop(),getButtom()获取的是控件在界面的绝对位置，而每个控件都有单独的坐标体系，左上角（0，0）开始，只需做如下修改

  rectf.left = 0
  rectf.top = 0
  rectf.right = getWidth()
  rectf.bottom = geHeight()

3、开始绘制一个不含动画效果的指示器（先易后难）

indicator_jump.gif

先捋一下需要确定哪些东西，在最开始我已经展示了效果图，选中的是一个圆角矩形，未选中的是一个圆形，selectedWidth（选中的指示器宽度），dia（圆形的直径），space（任意两个指示器直径的间距），假设默认选中第一个，没有动画的指示器仅仅在广告栏滑动过去后才进行切换

override fun onPageSelected(position: Int) {
                super.onPageSelected(position)                
                firstVisiblePosition = position
                invalidate()     
            }

只需要在onPageSelected方法中监听页面是否已经切换，调用 invalidate() 绘制就可以了

4、绘制阴影

之前在说实现思路上没有采用XML或者GradientDrawable方式，其原因就是无法绘制阴影，因为android没有提供相应的api，关键代码，两行代码缺一不可，都加上才有效果

setLayerType(View.LAYER_TYPE_SOFTWARE, null)
setShadowLayer(shadowRadius, shadowRadius / 2, shadowRadius / 2, shadowColor.toInt())

效果预览，为了看效果，弄个夸张一点的黑色，具体阴影颜色可通过自定义属性进行设置

indicator_shadow.gif

5、开始绘制根据页面滑动，指示器便会相应反应的指示器，跟手动画，也是最终效果，至于onDraw里面的算法，我不准备多讲，代码在github上

ViewPager的onPagerChangeListener有三个方法，上面已经重写了一个，如果想要指示器跟随着页面进行变化，便要用到这个方法进行监听

override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels)
                firstVisiblePosition = position
                lastPositionOffset = positionOffset
                invalidate()
            }

position是ViewPager第一个可见的页面位置
positionOffset滑动的距离比例[0,1]
positionOffsetPixels实际滑动的距离

最开始的思路是想要监听页面是向左还是向右滑动，然后再去计算，然后发现完全没必要。

github传送门：CuteIndicator

代码量很少，总共也就100多行，核心代码也就几十行，重在理解。

Todo

1、暂未支持循环的ViewPager

如果觉得我的文章对你有帮助，留下一点痕迹呗，star一下就是对我最好的鼓励
如需转载，请自便，留下署名和原文链接即可