Android UI | 控件占位加载的Drawable

本文未经授权，切勿转载

嗨，各位路过的小伙伴大家好。由于工作原因，已经快鸽了好长时间不更新文章了，这次就先介绍用于控件占位加载的动画，基于自定义Drawable实现的。

Drawable是什么

1、一种可以在Canvas上进行绘制的抽象的概念
2、颜色、图片等都可以是一个Drawable
3、Drawable可以通过XML定义，或者通过代码创建</font>**
4、Android中Drawable是一个抽象类，每个具体的Drawable都是其子类

自定义Drawable优势

1、使用简单，比自定义View成本低
2、非图片类的Drawable所占空间小，能减小apk大小

实现加载动画的Drawable

按惯例我们先直接看效果：

image

<font face="STCAIYUN" color="#0099ff">代码分析</font>

这次分析代码我们从需要什么，到如何实现进行一步步讲解

1、我们需要什么

既然我们是需要实现自定义Drawable，那么第一步肯定是新建一个类并继承Drawalbe，我这里继承的是ShapeDrawable

class PlaceHolderDrawable: ShapeDrawable()

接下来就是画图，我们可以看到我们的自定义Drawable也是有Canvas这个方法，和自定义View很像。然后这个加载动画中间白色部分从左到右滑动，然后有渐变效果，可以知道这个就是我们熟悉的渐变色的Drawable，这个是我们在xml上面自定义Drawable经常使用到的。先看代码：

 private var mGradientCanvas: Canvas? = null //柱状渐变色的Canvas
 private var mGradientLayer: Bitmap? = null 

 private var mBackgroundCanvas: Canvas? = null //背景Canvas
 private var mBackgroundLayer: Bitmap? = null
 
 private val floatArray = floatArrayOf( 0f,0.4f,0.8f)
    
  override fun draw(canvas: Canvas) {
        super.draw(canvas)
        
        shape.draw(mBackgroundCanvas, paint)

        canvas.drawBitmap(mBackgroundLayer!!, 0f, 0f, paint)

        xStartCoordinate = animatedValue
        xEndCoordinate = xStartCoordinate + mCanvasWidth/2

        paint.shader = LinearGradient(xStartCoordinate, 0f, xEndCoordinate, 0f, mColors, floatArray, Shader.TileMode.CLAMP)
        shape.draw(mGradientCanvas, paint)
        canvas.drawBitmap(mGradientLayer!!, 0f, 0f, paint)

    }

其中LinearGradient的源码是这样解释的：

  /**
     * Create a shader that draws a linear gradient along a line.
     *
     * @param x0           The x-coordinate for the start of the gradient line
     * @param y0           The y-coordinate for the start of the gradient line
     * @param x1           The x-coordinate for the end of the gradient line
     * @param y1           The y-coordinate for the end of the gradient line
     * @param colors       The sRGB colors to be distributed along the gradient line
     * @param positions    May be null. The relative positions [0..1] of
     *                     each corresponding color in the colors array. If this is null,
     *                     the the colors are distributed evenly along the gradient line.
     * @param tile         The Shader tiling mode
     */
    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int[] colors,
            @Nullable float[] positions, @NonNull TileMode tile) {
        this(x0, y0, x1, y1, convertColors(colors), positions, tile,
                ColorSpace.get(ColorSpace.Named.SRGB));
    }

第一个参数为线性起点的x坐标
第二个参数为线性起点的y坐标
第三个参数为线性终点的x坐标
第四个参数为线性终点的y坐标
第五个参数为实现渐变效果的颜色的组合
第六个参数为前面的颜色组合中的各颜色在渐变中占据的位置（比重）
第七个参数为渲染器平铺的模式,一共有三种

详细介绍各参数区别可以参考以下文章
https://www.jianshu.com/p/a9d09cb7577f

然后再把移动的动画加进去，就可以做到效果了

private val interpolator = LinearInterpolator()
private var animatedValue = 0f
fun setupAnimator() {
        xStartCoordinate = 0f //偏移量
        valueAnimator = ValueAnimator.ofFloat(- mCanvasWidth.toFloat()/3, mCanvasWidth.toFloat())
        valueAnimator?.duration = duration
        valueAnimator?.interpolator = interpolator
        valueAnimator?.repeatMode = ValueAnimator.RESTART
        valueAnimator?.repeatCount = ValueAnimator.INFINITE
        valueAnimator?.addUpdateListener { animation ->
            animatedValue = animation.animatedValue as Float
            invalidateSelf()
        }
        valueAnimator?.start()
    }

原理十分简单就是利用X轴的不断偏移，然后一直绘制从而达到效果
其实是大致上已经完成了这个功能了，剩下就是Drawable的长宽高获取颜色，以及如何管理，详细可以到我GitHub上看源码，有问题可以在掘金或者Github上的Issue留言，如果有问题不清楚建议在Issue留言，因为我待在Github的时间多于掘金。
https://github.com/ShowMeThe/PlaceHolder。

Android UI：控件占位加载的Drawable