2018-07-10 自定义网络加载动画

58同城网络加载动画效果动画链接：

//upload-images.jianshu.io/upload_images/4314397-0457ca6dfc099239.gif

1.从动画效果分析布局：

布局中分为三部分：承载几何图形的控件、放阴影图形的控件、放文本的控件，三者之间的位置关系从上到下分层的关系，所以选择线性布局LinearLayout比较容易实现这一效果：

在res/layout文件下新建一个layout.xml文件，命名为：loadview，布局文件代码如下：

对应的布局效果图如下:

布局中的ShapeView是自定义的几何图形，上面的效果图中对应的红色的圆形，该图形并不是通过资源文件导入图片然后加载到布局上面的，是通过自定义控件中onDraw(Canvas canvas)方法参数canvas（理解为：相当于画布）配合Paint（理解为：相当于画笔）画出来的图形，为什么要用画出来的圆形，而不直接在网上找一个和需求的相同的圆形图片呢，通过放入的资源文件然后加载到布局中的控件中，同样也可以实现上图一样的布局效果图，我个人带着猜测来理解，很简单：可能自己画的属于原生的图形，图形占用的内存更小，不管准不准确，对此我不想去深究，毕竟问题不大。

自定义ShapeView代码如下：

黑色阴影图形的实现：

到此为止，效果动画的布局图就完成了，接下来我们要做的就是，将做好的布局图加载到一个自定义控件中，让他动起来，达到我们看到的动画的效果，思路：将布局加载到一个自定义的控件中，通过代码让他动起来，并且达到我们需要的效果，将这个自定义控件赋予了生命，然后加载到一个activity中运行起来，这是正常的思路，但我们没有完全赋予自定义控件生命时，要通过测试来了解其达到的生命程度，所以要先把自定义控件放到activity中跑起来，看其达到的生命程度的进度。

自定义加载动画控件LoadingView：

到此为止，自定义加载动画被赋予了我们需要的完整的生命，接下来放入到一个activity中让他跑起来就可以了，放入到activity加载的布局中：

MainActivity代码部分：

附件信息：几何图形的颜色自己去修改，想改成什么颜色就什么颜色，随心所欲就好。