自定义多状态高仿应用下载百分数视图

说在前面

话说很多的应用下载中心就有一个下载的过程，然后呢就需要用一个图标来显示下载的状态。
不多说，看图说话：

从图上看下载都会有这么几种状态：未开始、正在下载、下载暂停、下载完成。然后还可能出现的状况就是下载出错和等待下载是无法从图里面体现的。

实现思路

实现思路：你看下载的状态是通过几张图片来给我们不同的视觉，确切的是5种状态，应用没有下载之前是下载状态，加入下载列表后没有下载的时候是等待状态，下载过程中会显示进度数字被分数加载变化和进度条变化，点击后出现的暂停状态并且显示进度，下载完成后是完成的状态。

这5种状态下：只有暂停状态和正在下载状态需要我们draw圆环和文字，其他情况下只需要drawImage就可以了，然后这里使用的是自定义属性来实现这个view，通过handle来刷新下载状态从而实现用户界面的刷新。

代码的具体实现

自定义属性文件的书写：

先新建attrs.xml文件，里面代码如下：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">resources</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">declare-styleable</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"DownloadPercentView"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"radius"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"dimension"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"notBeginImg"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"string"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"waitImg"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"string"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"pausedImg"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"string"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"finishedImg"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"string"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"strokeWidth"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"dimension"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"circleColor"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"color"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"ringColor"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"color"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"textColor"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"color"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">attr</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"textSize"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">format</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"dimension"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">declare-styleable</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">resources</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li></ul>

属性解析：

• 半径就是我们所要显的控件的半径
• notBeginImg没有开始下载的图片
• waitImg等待下载的图片
• pausedImg按下暂停时的图片
• finishedImg下载完成时的图片
• strokeWidth圈画笔的宽度
• circleColor圆环默认颜色
• ringColor进度展示的颜色
• 文字颜色进度文字颜色
• TEXTSIZE进度文字尺寸

自定义视图代码的书写

步骤一：
获取自定义属性：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 初始化自定义属性* @param context* @param attrs*/</span><span style="box-sizing: border-box;"></span>private void initAttrs(Context context, AttributeSet attrs) {<span style="box-sizing: border-box;"></span>TypedArray typeArray = context<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getTheme</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.obtainStyledAttributes</span>(attrs,<span style="box-sizing: border-box;"></span>R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mRadius = (int)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDimension</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_radius, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mStrokeWidth = (int)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDimension</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_strokeWidth, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mCircleColor = typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getColor</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_circleColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mRingColor = typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getColor</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_ringColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mTextColor = typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getColor</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_textColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mNotBeginImg = ((BitmapDrawable)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDrawable</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_notBeginImg))<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getBitmap</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mPausedImg = ((BitmapDrawable)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDrawable</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_pausedImg))<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getBitmap</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mWatiImg = ((BitmapDrawable)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDrawable</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_waitImg))<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getBitmap</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>finishedImg = ((BitmapDrawable)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDrawable</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_finishedImg))<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getBitmap</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>mTextSize = (int)typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getDimension</span>(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.styleable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DownloadPercentView</span>_textSize, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span><span style="box-sizing: border-box;"></span>//记住recycle，并避免内存泄漏<span style="box-sizing: border-box;"></span>typeArray<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.recycle</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li></ul>

计算控件大小：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 计算控件的宽高*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> widthMeasureSpec*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> heightMeasureSpec*/</span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onMeasure</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> widthMeasureSpec, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> heightMeasureSpec) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> width = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>)Math.ceil(mRadius) * SCALE;<span style="box-sizing: border-box;"></span>setMeasuredDimension(width, width);<span style="box-sizing: border-box;"></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li></ul>

初始化画笔：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**** 初始化画文字的画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> mTxtPaint*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initTextPaint</span>(Paint mTxtPaint) {<span style="box-sizing: border-box;"></span>mTxtPaint.setAntiAlias(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>mTxtPaint.setColor(mTextColor);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Color.parseColor("#52ce90")</span><span style="box-sizing: border-box;"></span>mTxtPaint.setTextAlign(Paint.Align.CENTER);<span style="box-sizing: border-box;"></span>mTxtPaint.setTextSize(mTextSize);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 初始化圈和弧的画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> targetPaint 区分画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> color  画笔颜色*/</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initPaint</span>(Paint targetPaint,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> color) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>targetPaint.setAntiAlias(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>targetPaint.setColor(color);<span style="box-sizing: border-box;"></span>targetPaint.setStyle(Paint.Style.STROKE);<span style="box-sizing: border-box;"></span>targetPaint.setStrokeWidth(mStrokeWidth);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initVariable</span>() {<span style="box-sizing: border-box;"></span>mCirclePaint = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span style="box-sizing: border-box;"></span>mRingPaint= <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span style="box-sizing: border-box;"></span>mTxtPaint = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制灰色圆的画笔</span><span style="box-sizing: border-box;"></span>initPaint(mCirclePaint,mCircleColor);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制圆弧的画笔</span><span style="box-sizing: border-box;"></span>initPaint(mRingPaint,mRingColor);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制文字的画笔</span><span style="box-sizing: border-box;"></span>initTextPaint(mTxtPaint);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化要显示的图片</span><span style="box-sizing: border-box;"></span>initImage();<span style="box-sizing: border-box;"></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li></ul>

接下来我们写的onDraw：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onDraw</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//控件的中心坐标</span><span style="box-sizing: border-box;"></span>mXCenter = getWidth() / SCALE;<span style="box-sizing: border-box;"></span>mYCenter = getHeight() / SCALE;<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (mStatus) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_NOBEGIN:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//原始状态</span>canvas.drawBitmap(mNotBeginImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_WAITING:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//等待下载状态</span>canvas.drawBitmap(mWatiImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_DOWNLOADING:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载中</span><span style="box-sizing: border-box;"></span>drawDownloadingView(canvas);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_PAUSED:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//暂停</span><span style="box-sizing: border-box;"></span>drawPausedView(canvas);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_FINISHED:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载完成</span>canvas.drawBitmap(finishedImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span style="box-sizing: border-box;"></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li></ul>

看代码就知道：只有暂停和下载过程需要我们去画进度：

下载过程:(需要画出灰色圆圈，接下来根据进度绘制进度和文字）

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 绘制下载中的view*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> canvas*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">drawDownloadingView</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制灰色圆环</span><span style="box-sizing: border-box;"></span>canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/SCALE, mCirclePaint);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制进度扇形圆环</span>RectF oval = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RectF();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置椭圆上下左右的坐标</span><span style="box-sizing: border-box;"></span>oval.left = mXCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.top = mYCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.right = mXCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.bottom = mYCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>canvas.drawArc(oval, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, ((<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>)mProgress / mTotalProgress) * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">360</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>, mRingPaint);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//false顺势针</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制中间百分比文字</span><span style="box-sizing: border-box;"></span>String percentTxt = String.valueOf(mProgress);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//计算文字垂直居中的baseline</span><span style="box-sizing: border-box;"></span>Paint.FontMetricsInt fontMetrics = mTxtPaint.getFontMetricsInt();<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> baseline = oval.top + (oval.bottom - oval.top - fontMetrics.bottom + fontMetrics.top) / SCALE - fontMetrics.top;<span style="box-sizing: border-box;"></span>canvas.drawText(percentTxt+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"%"</span>, mXCenter, baseline, mTxtPaint);<span style="box-sizing: border-box;"></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li></ul>

步骤就是先画出灰色圆圈，然后根据进度画出扇形区域，最后就是根据进度显示百分数的文字。

暂停过程的绘制:(同上，只不过不文字换成暂停图片）

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 绘制暂停时的view*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> canvas*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">drawPausedView</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制灰色圆环</span><span style="box-sizing: border-box;"></span>canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/SCALE, mCirclePaint);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制进度扇形圆环</span>RectF oval = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RectF();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置椭圆上下左右的坐标</span><span style="box-sizing: border-box;"></span>oval.left = mXCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.top = mYCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.right = mXCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.bottom = mYCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>canvas.drawArc(oval, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, ((<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>) mProgress / mTotalProgress) * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">360</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>, mRingPaint);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制中间暂停图标</span>canvas.drawBitmap(mPausedImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li></ul>

现在贴出自定义视图完整代码：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.losileeya.downloadpercent_master;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Context;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.res.TypedArray;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Bitmap;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Canvas;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Matrix;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Paint;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.RectF;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.drawable.BitmapDrawable;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.util.AttributeSet;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/***<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @Class</span>: DownloadPercentView*/</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">DownloadPercentView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span> {</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//状态设置</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> STATUS_NOBEGIN= <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> STATUS_WAITING = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> STATUS_DOWNLOADING = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> STATUS_PAUSED = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> STATUS_FINISHED = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 画实心圆的画笔</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Paint mCirclePaint=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 画圆环的画笔</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Paint mRingPaint=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 绘制进度文字的画笔</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Paint mTxtPaint=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆形颜色</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mCircleColor;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆环颜色</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mRingColor;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文字颜色</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mTextColor;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文字大小</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mTextSize;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 半径</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mRadius;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆环宽度</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mStrokeWidth = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆心x坐标</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mXCenter;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆心y坐标</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mYCenter;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 总进度</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mTotalProgress = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 当前进度</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mProgress;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载状态</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mStatus = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//默认显示的图片</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Bitmap mNotBeginImg;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//暂停时中间显示的图片</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Bitmap mPausedImg;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//等待时显示的图片</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Bitmap mWatiImg;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载完成时显示的图片</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Bitmap finishedImg;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> SCALE=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">DownloadPercentView</span>(Context context, AttributeSet attrs) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 获取自定义的属性</span><span style="box-sizing: border-box;"></span>initAttrs(context, attrs);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始值设置</span><span style="box-sizing: border-box;"></span>initVariable();<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 初始化自定义属性*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> context*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> attrs*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initAttrs</span>(Context context, AttributeSet attrs) {<span style="box-sizing: border-box;"></span>TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,<span style="box-sizing: border-box;"></span>R.styleable.DownloadPercentView, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>mRadius = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>)typeArray.getDimension(R.styleable.DownloadPercentView_radius, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);<span style="box-sizing: border-box;"></span>mStrokeWidth = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>)typeArray.getDimension(R.styleable.DownloadPercentView_strokeWidth, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);<span style="box-sizing: border-box;"></span>mCircleColor = typeArray.getColor(R.styleable.DownloadPercentView_circleColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>);<span style="box-sizing: border-box;"></span>mRingColor = typeArray.getColor(R.styleable.DownloadPercentView_ringColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>);<span style="box-sizing: border-box;"></span>mTextColor = typeArray.getColor(R.styleable.DownloadPercentView_textColor, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFFFFFF</span>);<span style="box-sizing: border-box;"></span>mNotBeginImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_notBeginImg)).getBitmap();<span style="box-sizing: border-box;"></span>mPausedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_pausedImg)).getBitmap();<span style="box-sizing: border-box;"></span>mWatiImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_waitImg)).getBitmap();<span style="box-sizing: border-box;"></span>finishedImg = ((BitmapDrawable)typeArray.getDrawable(R.styleable.DownloadPercentView_finishedImg)).getBitmap();<span style="box-sizing: border-box;"></span>mTextSize = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>)typeArray.getDimension(R.styleable.DownloadPercentView_textSize, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//记住recycle，并避免内存泄漏</span><span style="box-sizing: border-box;"></span>typeArray.recycle();<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initVariable</span>() {<span style="box-sizing: border-box;"></span>mCirclePaint = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span style="box-sizing: border-box;"></span>mRingPaint= <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span style="box-sizing: border-box;"></span>mTxtPaint = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制灰色圆的画笔</span><span style="box-sizing: border-box;"></span>initPaint(mCirclePaint,mCircleColor);<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制圆弧的画笔</span><span style="box-sizing: border-box;"></span>initPaint(mRingPaint,mRingColor);<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化绘制文字的画笔</span><span style="box-sizing: border-box;"></span>initTextPaint(mTxtPaint);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化要显示的图片</span><span style="box-sizing: border-box;"></span>initImage();<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 显示图片的处理*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initImage</span>() {<span style="box-sizing: border-box;"></span>mNotBeginImg = imageSize(mNotBeginImg, mRadius * SCALE, mRadius * SCALE);<span style="box-sizing: border-box;"></span>mPausedImg = imageSize(mPausedImg, mRadius * SCALE, mRadius * SCALE);<span style="box-sizing: border-box;"></span>mWatiImg = imageSize(mWatiImg, mRadius *SCALE, mRadius * SCALE);<span style="box-sizing: border-box;"></span>finishedImg = imageSize(finishedImg, mRadius *SCALE, mRadius * SCALE);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**** 初始化画文字的画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> mTxtPaint*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initTextPaint</span>(Paint mTxtPaint) {<span style="box-sizing: border-box;"></span>mTxtPaint.setAntiAlias(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>mTxtPaint.setColor(mTextColor);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Color.parseColor("#52ce90")</span><span style="box-sizing: border-box;"></span>mTxtPaint.setTextAlign(Paint.Align.CENTER);<span style="box-sizing: border-box;"></span>mTxtPaint.setTextSize(mTextSize);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 初始化圈和弧的画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> targetPaint 区分画笔*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> color  画笔颜色*/</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initPaint</span>(Paint targetPaint,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> color) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>targetPaint.setAntiAlias(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>targetPaint.setColor(color);<span style="box-sizing: border-box;"></span>targetPaint.setStyle(Paint.Style.STROKE);<span style="box-sizing: border-box;"></span>targetPaint.setStrokeWidth(mStrokeWidth);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 计算控件的宽高*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> widthMeasureSpec*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> heightMeasureSpec*/</span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onMeasure</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> widthMeasureSpec, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> heightMeasureSpec) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> width = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>)Math.ceil(mRadius) * SCALE;<span style="box-sizing: border-box;"></span>setMeasuredDimension(width, width);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onDraw</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//控件的中心坐标</span><span style="box-sizing: border-box;"></span>mXCenter = getWidth() / SCALE;<span style="box-sizing: border-box;"></span>mYCenter = getHeight() / SCALE;<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (mStatus) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_NOBEGIN:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//原始状态</span>canvas.drawBitmap(mNotBeginImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_WAITING:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//等待下载状态</span>canvas.drawBitmap(mWatiImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_DOWNLOADING:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载中</span><span style="box-sizing: border-box;"></span>drawDownloadingView(canvas);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_PAUSED:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//暂停</span><span style="box-sizing: border-box;"></span>drawPausedView(canvas);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> STATUS_FINISHED:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下载完成</span>canvas.drawBitmap(finishedImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 绘制下载中的view*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> canvas*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">drawDownloadingView</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制灰色圆环</span><span style="box-sizing: border-box;"></span>canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/SCALE, mCirclePaint);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制进度扇形圆环</span>RectF oval = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RectF();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置椭圆上下左右的坐标</span><span style="box-sizing: border-box;"></span>oval.left = mXCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.top = mYCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.right = mXCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.bottom = mYCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>canvas.drawArc(oval, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, ((<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>)mProgress / mTotalProgress) * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">360</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>, mRingPaint);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制中间百分比文字</span><span style="box-sizing: border-box;"></span>String percentTxt = String.valueOf(mProgress);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//计算文字垂直居中的baseline</span><span style="box-sizing: border-box;"></span>Paint.FontMetricsInt fontMetrics = mTxtPaint.getFontMetricsInt();<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> baseline = oval.top + (oval.bottom - oval.top - fontMetrics.bottom + fontMetrics.top) / SCALE - fontMetrics.top;<span style="box-sizing: border-box;"></span>canvas.drawText(percentTxt+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"%"</span>, mXCenter, baseline, mTxtPaint);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 绘制暂停时的view*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> canvas*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">drawPausedView</span>(Canvas canvas) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制灰色圆环</span><span style="box-sizing: border-box;"></span>canvas.drawCircle(mXCenter, mYCenter, mRadius - mStrokeWidth/SCALE, mCirclePaint);<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制进度扇形圆环</span>RectF oval = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RectF();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置椭圆上下左右的坐标</span><span style="box-sizing: border-box;"></span>oval.left = mXCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.top = mYCenter - mRadius + mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.right = mXCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>oval.bottom = mYCenter + mRadius - mStrokeWidth/SCALE;<span style="box-sizing: border-box;"></span>canvas.drawArc(oval, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, ((<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>) mProgress / mTotalProgress) * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">360</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>, mRingPaint);<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绘制中间暂停图标</span>canvas.drawBitmap(mPausedImg, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 更新进度*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> progress*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setProgress</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> progress) {<span style="box-sizing: border-box;"></span>mProgress = progress;<span style="box-sizing: border-box;"></span>postInvalidate();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//刷新</span><span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 设置下载状态*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> status*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setStatus</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> status) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.mStatus = status;<span style="box-sizing: border-box;"></span>postInvalidate();<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*** 获取下载状态*<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span>*/</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getStatus</span>() {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> mStatus;<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> Bitmap <span class="hljs-title" style="box-sizing: border-box;">imageSize</span>(Bitmap b,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> x,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> y)<span style="box-sizing: border-box;"></span>{<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> w=b.getWidth();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取图片的宽高</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> h=b.getHeight();<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> sx=x/w;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//要强制转换</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> sy=y/h;<span style="box-sizing: border-box;"></span>Matrix matrix = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Matrix();<span style="box-sizing: border-box;"></span>matrix.postScale(sx, sy); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 长和宽放大缩小的比例</span>Bitmap resizeBmp = Bitmap.createBitmap(b, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, w,<span style="box-sizing: border-box;"></span>h, matrix, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> resizeBmp;<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
}<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">113</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">114</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">115</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">116</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">117</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">118</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">119</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">120</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">121</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">122</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">123</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">124</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">125</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">126</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">127</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">128</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">129</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">130</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">131</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">132</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">133</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">134</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">135</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">136</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">137</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">138</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">139</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">140</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">141</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">142</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">143</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">144</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">145</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">146</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">147</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">148</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">149</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">150</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">151</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">152</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">153</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">154</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">155</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">156</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">157</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">158</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">159</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">160</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">161</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">162</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">163</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">164</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">165</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">166</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">167</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">168</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">169</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">170</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">171</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">172</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">173</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">174</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">175</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">176</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">177</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">178</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">179</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">180</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">181</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">182</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">183</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">184</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">185</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">186</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">187</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">188</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">189</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">190</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">191</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">192</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">193</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">194</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">195</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">196</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">197</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">198</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">199</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">200</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">201</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">202</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">203</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">204</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">205</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">206</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">207</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">208</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">209</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">210</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">211</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">212</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">213</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">214</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">215</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">216</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">217</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">218</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">219</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">220</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">221</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">222</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">223</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">224</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">225</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">226</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">227</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">228</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">229</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">230</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">231</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">232</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">233</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">234</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">235</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">236</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">237</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">238</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">239</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">240</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">241</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">242</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">243</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">244</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">245</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">246</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">247</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">248</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">249</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">250</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">251</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">252</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">253</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">254</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">255</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">256</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">257</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">258</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">259</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">260</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">261</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">262</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">263</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">264</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">113</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">114</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">115</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">116</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">117</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">118</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">119</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">120</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">121</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">122</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">123</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">124</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">125</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">126</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">127</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">128</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">129</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">130</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">131</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">132</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">133</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">134</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">135</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">136</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">137</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">138</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">139</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">140</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">141</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">142</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">143</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">144</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">145</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">146</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">147</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">148</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">149</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">150</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">151</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">152</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">153</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">154</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">155</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">156</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">157</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">158</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">159</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">160</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">161</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">162</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">163</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">164</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">165</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">166</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">167</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">168</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">169</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">170</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">171</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">172</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">173</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">174</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">175</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">176</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">177</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">178</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">179</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">180</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">181</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">182</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">183</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">184</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">185</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">186</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">187</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">188</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">189</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">190</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">191</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">192</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">193</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">194</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">195</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">196</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">197</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">198</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">199</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">200</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">201</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">202</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">203</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">204</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">205</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">206</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">207</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">208</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">209</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">210</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">211</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">212</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">213</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">214</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">215</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">216</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">217</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">218</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">219</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">220</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">221</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">222</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">223</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">224</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">225</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">226</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">227</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">228</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">229</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">230</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">231</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">232</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">233</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">234</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">235</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">236</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">237</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">238</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">239</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">240</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">241</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">242</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">243</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">244</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">245</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">246</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">247</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">248</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">249</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">250</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">251</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">252</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">253</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">254</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">255</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">256</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">257</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">258</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">259</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">260</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">261</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">262</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">263</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">264</span></li></ul>

自定义控件的使用：

<code class="hljs vbnet has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><RelativeLayout xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>xmlns:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span>android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span> ><span style="box-sizing: border-box;"></span>
<com.losileeya.downloadpercent_master.DownloadPercentView<span style="box-sizing: border-box;"></span>android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/downloadView"</span>android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>android:layout_centerInParent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:notBeginImg=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/ic_no_download"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:waitImg=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/ic_wait"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:pausedImg=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/ic_pause"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:finishedImg=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/ic_finished"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:strokeWidth=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"4dp"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:circleColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#bdbdbd"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:radius=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:ringColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#52ce90"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:textSize=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"32sp"</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">custom</span>:textColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#52ce90"</span><span style="box-sizing: border-box;"></span>/><span style="box-sizing: border-box;"></span>
</RelativeLayout></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li></ul>

这里布局的使用就不用说了吧，主要就是申明控件和控件的前缀空间，并且对自定义属性赋值（你喜欢搞什么都可以）。使用过程贴代码：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.losileeya.downloadpercent_master;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Bundle;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Handler;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Message;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.support.v7.app.AppCompatActivity;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.lang.ref.WeakReference;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.Random;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">MainActivity</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppCompatActivity</span> {</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> MSG_UPDATE = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//更新进度</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> MSG_FINISHED = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//完成</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> DownloadPercentView mDownloadPercentView;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mDownloadProgress = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始进度值</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Handler mHandler = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ProgressHandler(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> downloading = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否下载中</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Random mRandom;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//模拟进度的随机数</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onCreate(savedInstanceState);<span style="box-sizing: border-box;"></span>setContentView(R.layout.activity_main);<span style="box-sizing: border-box;"></span>mRandom = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Random();<span style="box-sizing: border-box;"></span>mDownloadPercentView = (DownloadPercentView)  findViewById(R.id.downloadView);<span style="box-sizing: border-box;"></span>mDownloadPercentView.setOnClickListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span>  View.OnClickListener() {<span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View v) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当进度为未开始或暂停</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_NOBEGIN||   <span style="box-sizing: border-box;"></span>mDownloadPercentView.getStatus() == DownloadPercentView.STATUS_PAUSED) {<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//状态下点击变为下载状态</span>downloading = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;<span style="box-sizing: border-box;"></span>mDownloadPercentView      .setStatus(DownloadPercentView.STATUS_DOWNLOADING);<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 线程控制进度</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Thread(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Runnable() {<span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">run</span>() {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span> (downloading) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//当进度为100时通过handler把状态转为下载完成，并且退出线程</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mDownloadProgress == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>) {<span style="box-sizing: border-box;"></span>mHandler.sendEmptyMessage(MSG_FINISHED);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>;<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//进度随机增加1到10的数</span>mDownloadProgress += mRandom.nextInt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>) + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//模拟过程大于100时显示100，小于则为进度值（真实不会存在大于100）</span>mDownloadProgress = mDownloadProgress > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span> ? <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>:     <span style="box-sizing: border-box;"></span>mDownloadProgress;<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//handler更新进度</span><span style="box-sizing: border-box;"></span>mHandler.sendEmptyMessage(MSG_UPDATE);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span> {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//0.3秒更新一次精度值</span>Thread.sleep(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>);<span style="box-sizing: border-box;"></span>} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span> (Exception e) {<span style="box-sizing: border-box;"></span>}}}}).start();<span style="box-sizing: border-box;"></span>} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(mDownloadPercentView.getStatus()   <span style="box-sizing: border-box;"></span>== DownloadPercentView.STATUS_DOWNLOADING)  {<span style="box-sizing: border-box;"></span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//正在下载时点击则状态改为暂停</span>downloading = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>;<span style="box-sizing: border-box;"></span>mDownloadPercentView<span style="box-sizing: border-box;"></span>.setStatus(DownloadPercentView.STATUS_PAUSED);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>});<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ProgressHandler</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Handler</span> {</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> WeakReference<MainActivity>   <span style="box-sizing: border-box;"></span>activityWeakReference;<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">ProgressHandler</span>(MainActivity activity) {<span style="box-sizing: border-box;"></span>activityWeakReference = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> WeakReference<> <span style="box-sizing: border-box;"></span>(activity);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">handleMessage</span>(Message msg) {<span style="box-sizing: border-box;"></span>MainActivity activity = activityWeakReference.get();<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (activity != <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (msg.what) {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> MSG_FINISHED:<span style="box-sizing: border-box;"></span>mDownloadPercentView<span style="box-sizing: border-box;"></span>.setStatus(DownloadPercentView.STATUS_FINISHED);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> MSG_UPDATE:<span style="box-sizing: border-box;"></span>mDownloadPercentView.setProgress(mDownloadProgress);<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.handleMessage(msg);<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>}<span style="box-sizing: border-box;"></span>
}<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li></ul>

这里没有网络请求，所以为了模仿真一点，进度每次变化用的是随机数，哈哈，就写到这里了，觉得有用帮忙顶起来。

由于没有传图片上来，想看一下效果的
演示传送门：DownloadPercent-master.rar