我的Android进阶之旅------>Android自定义View实现带数字的进度条

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢daimajia的开源奉献!

 


 

第一步、效果展示

图1、蓝色的进度条
蓝色的进度条

图2、红色的进度条
红色的进度条

图3、多条颜色不同的进度条
多条颜色不同的进度条

图4、多条颜色不同的进度条
多条颜色不同的进度条

这里写图片描述

这里写图片描述

 


 

版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处! 【http://blog.csdn.net/ouyang_peng/article/details/50859094

这里写图片描述

第二步、自定义ProgressBar实现带数字的进度条

0、项目结构

这里写图片描述

如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示

这里写图片描述
如上图所示:自定义的带数字的进度条的library项目的结构图

这里写图片描述
如上图所示:demo项目的结构图

1、绘制步骤分析

如上面几幅图形所示。这个进度条的可以分为以下三部分:
这里写图片描述

  • reacherd area :表示当前进度值之前文本的进度条(长方形)
  • text area :表示当前进度值文本
  • unreacherd area :当前进度值文本之后的进度条(长方形)

按照上面的分析,我们要实现带数字的进度条,只需要按照以下三个步骤绘制即可实现:
1、绘制reacherd area(当前进度值之前文本的进度条)
2、绘制text area(当前进度值文本) 
3、绘制unreacherd area(当前进度值文本之后的进度条) 即可。

2、自定义属性

由于我们发现以上三个部分的颜色、字体大小、进度条的最大值、表示进度条的长方形的高度等属性都可以改变,从而展现出不同的界面效果。

因此我们将这些属性都做自定义属性。这样我们就能够做到像android官方提供的那些组件一样用xml来定义它的属性了。

1、定义自己的属性配置文件:attr.xml

在res/values文件下定义一个attrs.xml文件,res/values/attrs.xml定义代码如下所示:

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">resources</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"NumberProgressBar"</span>></span>

        <span class="hljs-comment"><!--进度条的当前进度值--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_current"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"integer"</span>/></span>
        <span class="hljs-comment"><!--进度条的最大进度值--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_max"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"integer"</span>/></span>

        <span class="hljs-comment"><!--当前进度值文本之后的进度条颜色--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_unreached_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>/></span>
        <span class="hljs-comment"><!--当前进度值文本之前的进度条颜色--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_reached_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>/></span>

        <span class="hljs-comment"><!-- 当前进度值文本之前的进度条的高度--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_reached_bar_height"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>/></span>
        <span class="hljs-comment"><!--当前进度值文本之后的进度条的高度--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_unreached_bar_height"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>/></span>

        <span class="hljs-comment"><!--当前进度值文本的字体大小--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_text_size"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>/></span>
        <span class="hljs-comment"><!--当前进度值文本的颜色--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_text_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>/></span>
        <span class="hljs-comment"><!--当前进度值之前文本的间距--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_text_offset"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>/></span>

        <span class="hljs-comment"><!--当前进度值文本是否可见--></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"progress_text_visibility"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"enum"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">enum</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"visible"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"0"</span>/></span>
            <span class="hljs-tag"><<span class="hljs-title">enum</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"invisible"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span>/></span>
        <span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"Themes"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"numberProgressBarStyle"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span>
<span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code><ul class="pre-numbering" style="display: block;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li></ul>

2、定义主题配置文件:styles.xml

在res/values文件下定义一个styles.xml文件,里面定义一些基本的主题选项,以备用户可以选择使用。res/values/styles.xml定义代码如下所示:

<code class="hljs applescript has-numbering"><?xml <span class="hljs-property">version</span>=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"utf-8"</span>?>
<resources>
    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Default"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#3498DB</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#3498DB</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Passing_Green"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#70A800</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#70A800</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Beauty_Red"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#FF3D7F</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#FF3D7F</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Warning_Red"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#E74C3C</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#E74C3C</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Relax_Blue"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#6DBCDB</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#6DBCDB</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Grace_Yellow"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#FFC73B</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#FFC73B</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Funny_Orange"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#FF530D</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#FF530D</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>

    <style <span class="hljs-property">name</span>=<span class="hljs-string">"NumberProgressBar_Twinkle_Night"</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_height"</span>>wrap_content</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:layout_width"</span>>match_parent</<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_max"</span>><span class="hljs-number">100</span></<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_current"</span>><span class="hljs-number">0</span></<span class="hljs-property">item</span>>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_color"</span>><span class="hljs-comment">#CCCCCC</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_color"</span>><span class="hljs-comment">#ECF0F1</item></span>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_size"</span>><span class="hljs-number">10</span>sp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_text_color"</span>><span class="hljs-comment">#ECF0F1</item></span>

        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_reached_bar_height"</span>><span class="hljs-number">1.5</span>dp</<span class="hljs-property">item</span>>
        <<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"progress_unreached_bar_height"</span>><span class="hljs-number">0.75</span>dp</<span class="hljs-property">item</span>>
    </style>
</resources></code><ul class="pre-numbering" style="display: block;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li><li>112</li><li>113</li><li>114</li><li>115</li><li>116</li><li>117</li><li>118</li><li>119</li><li>120</li><li>121</li><li>122</li><li>123</li><li>124</li><li>125</li><li>126</li><li>127</li><li>128</li><li>129</li><li>130</li><li>131</li><li>132</li></ul>

3、自定义View实现带数字的进度条

<code class="hljs java has-numbering"><span class="hljs-keyword">package</span> com.daimajia.numberprogressbar;

<span class="hljs-keyword">import</span> android.content.Context;
<span class="hljs-keyword">import</span> android.content.res.TypedArray;
<span class="hljs-keyword">import</span> android.graphics.Canvas;
<span class="hljs-keyword">import</span> android.graphics.Color;
<span class="hljs-keyword">import</span> android.graphics.Paint;
<span class="hljs-keyword">import</span> android.graphics.RectF;
<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.os.Parcelable;
<span class="hljs-keyword">import</span> android.util.AttributeSet;
<span class="hljs-keyword">import</span> android.view.View;

<span class="hljs-keyword">import</span> <span class="hljs-keyword">static</span> com.daimajia.numberprogressbar.NumberProgressBar.ProgressTextVisibility.Invisible;
<span class="hljs-keyword">import</span> <span class="hljs-keyword">static</span> com.daimajia.numberprogressbar.NumberProgressBar.ProgressTextVisibility.Visible;

<span class="hljs-javadoc">/**
 * Created by daimajia on 14-4-30.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NumberProgressBar</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span>
    <span class="hljs-javadoc">/**
     * 进度值最大值
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mMaxProgress = <span class="hljs-number">100</span>;

    <span class="hljs-javadoc">/**
     * Current progress, can not exceed the max progress.
     * 当前进度值,不能超过进度值最大值
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mCurrentProgress = <span class="hljs-number">0</span>;

    <span class="hljs-javadoc">/**
     * The progress area bar color.
     * 当前进度值文本之前的进度条颜色
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mReachedBarColor;

    <span class="hljs-javadoc">/**
     * The bar unreached area color.
     * 当前进度值文本之后的进度条颜色
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mUnreachedBarColor;

    <span class="hljs-javadoc">/**
     * The progress text color.
     * 当前进度值文本的颜色
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mTextColor;

    <span class="hljs-javadoc">/**
     * The progress text size.
     * 当前进度值文本的字体大小
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mTextSize;

    <span class="hljs-javadoc">/**
     * The height of the reached area.
     * 当前进度值文本之前的进度条的高度
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mReachedBarHeight;

    <span class="hljs-javadoc">/**
     * The height of the unreached area.
     * 当前进度值文本之后的进度条的高度
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mUnreachedBarHeight;

    <span class="hljs-javadoc">/**
     * The suffix of the number.
     * 当前进度值的百分比后缀
     */</span>
    <span class="hljs-keyword">private</span> String mSuffix = <span class="hljs-string">"%"</span>;

    <span class="hljs-javadoc">/**
     * The prefix.
     * 当前进度值的百分比前缀
     */</span>
    <span class="hljs-keyword">private</span> String mPrefix = <span class="hljs-string">""</span>;

    <span class="hljs-comment">//当前进度值文本的默认颜色</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> default_text_color = Color.rgb(<span class="hljs-number">66</span>, <span class="hljs-number">145</span>, <span class="hljs-number">241</span>);
    <span class="hljs-comment">//当前进度值文本的字体大小</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> default_text_size;

    <span class="hljs-comment">//当前进度值之前的默认进度条颜色</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> default_reached_color = Color.rgb(<span class="hljs-number">66</span>, <span class="hljs-number">145</span>, <span class="hljs-number">241</span>);
    <span class="hljs-comment">//当前进度值之后的默认进度条颜色</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> default_unreached_color = Color.rgb(<span class="hljs-number">204</span>, <span class="hljs-number">204</span>, <span class="hljs-number">204</span>);

    <span class="hljs-comment">//当前进度值之前文本的默认间距</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> default_progress_text_offset;

    <span class="hljs-comment">//当前进度值文本之前的进度条的默认高度</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> default_reached_bar_height;
    <span class="hljs-comment">//当前进度值文本之后的进度条的默认高度</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> default_unreached_bar_height;

    <span class="hljs-javadoc">/**
     * For save and restore instance of progressbar.
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_STATE = <span class="hljs-string">"saved_instance"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_TEXT_COLOR = <span class="hljs-string">"text_color"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_TEXT_SIZE = <span class="hljs-string">"text_size"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_REACHED_BAR_HEIGHT = <span class="hljs-string">"reached_bar_height"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_REACHED_BAR_COLOR = <span class="hljs-string">"reached_bar_color"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_UNREACHED_BAR_HEIGHT = <span class="hljs-string">"unreached_bar_height"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_UNREACHED_BAR_COLOR = <span class="hljs-string">"unreached_bar_color"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_MAX = <span class="hljs-string">"max"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_PROGRESS = <span class="hljs-string">"progress"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_SUFFIX = <span class="hljs-string">"suffix"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_PREFIX = <span class="hljs-string">"prefix"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> String INSTANCE_TEXT_VISIBILITY = <span class="hljs-string">"text_visibility"</span>;
    <span class="hljs-comment">//默认显示当前进度值文本   0为显示,1为不显示</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> PROGRESS_TEXT_VISIBLE = <span class="hljs-number">0</span>;


    <span class="hljs-javadoc">/**
     * The width of the text that to be drawn.
     * 要绘制的当前进度值的文本的宽度
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mDrawTextWidth;

    <span class="hljs-javadoc">/**
     * The drawn text start.
     * 要绘制的当前进度值的文本的起始位置
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mDrawTextStart;

    <span class="hljs-javadoc">/**
     * The drawn text end.
     * 要绘制的当前进度值的文本的结束位置
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mDrawTextEnd;

    <span class="hljs-javadoc">/**
     * The text that to be drawn in onDraw().
     * 要绘制的当前进度值的文本
     */</span>
    <span class="hljs-keyword">private</span> String mCurrentDrawText;

    <span class="hljs-javadoc">/**
     * The Paint of the reached area.
     * 绘制当前进度值文本之前的进度条的画笔
     */</span>
    <span class="hljs-keyword">private</span> Paint mReachedBarPaint;
    <span class="hljs-javadoc">/**
     * The Paint of the unreached area.
     * 绘制当前进度值文本之后的进度条的画笔
     */</span>
    <span class="hljs-keyword">private</span> Paint mUnreachedBarPaint;
    <span class="hljs-javadoc">/**
     * The Paint of the progress text.
     * 绘制当前进度值文本的的画笔
     */</span>
    <span class="hljs-keyword">private</span> Paint mTextPaint;

    <span class="hljs-javadoc">/**
     * Unreached bar area to draw rect.
     * 当前进度值文本之后的进度条(长方形)
     */</span>
    <span class="hljs-keyword">private</span> RectF mUnreachedRectF = <span class="hljs-keyword">new</span> RectF(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
    <span class="hljs-javadoc">/**
     * Reached bar area rect.
     * 当前进度值之前文本的进度条(长方形)
     */</span>
    <span class="hljs-keyword">private</span> RectF mReachedRectF = <span class="hljs-keyword">new</span> RectF(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);

    <span class="hljs-javadoc">/**
     * The progress text offset.
     * 当前进度值之前文本的间距
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mOffset;

    <span class="hljs-javadoc">/**
     * Determine if need to draw unreached area.
     * 是否绘制当前进度值之后的进度条
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">boolean</span> mDrawUnreachedBar = <span class="hljs-keyword">true</span>;
    <span class="hljs-javadoc">/**
     * 是否绘制当前进度值之前的进度条
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">boolean</span> mDrawReachedBar = <span class="hljs-keyword">true</span>;
    <span class="hljs-javadoc">/**
     * 是否绘制当前进度值文本
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">boolean</span> mIfDrawText = <span class="hljs-keyword">true</span>;

    <span class="hljs-javadoc">/**
     * Listener
     */</span>
    <span class="hljs-keyword">private</span> OnProgressBarListener mListener;

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">enum</span> ProgressTextVisibility {
        Visible, Invisible
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">NumberProgressBar</span>(Context context) {
        <span class="hljs-keyword">this</span>(context, <span class="hljs-keyword">null</span>);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">NumberProgressBar</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">this</span>(context, attrs, R.attr.numberProgressBarStyle);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">NumberProgressBar</span>(Context context, AttributeSet attrs, <span class="hljs-keyword">int</span> defStyleAttr) {
        <span class="hljs-keyword">super</span>(context, attrs, defStyleAttr);

        default_reached_bar_height = dp2px(<span class="hljs-number">1.5</span>f);
        default_unreached_bar_height = dp2px(<span class="hljs-number">1.0</span>f);
        default_text_size = sp2px(<span class="hljs-number">10</span>);
        default_progress_text_offset = dp2px(<span class="hljs-number">3.0</span>f);

        <span class="hljs-comment">//获取自定义属性</span>
        <span class="hljs-keyword">final</span> TypedArray attributes = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NumberProgressBar,
                defStyleAttr, <span class="hljs-number">0</span>);
        mReachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_reached_color, default_reached_color);
        mUnreachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_unreached_color, default_unreached_color);
        mTextColor = attributes.getColor(R.styleable.NumberProgressBar_progress_text_color, default_text_color);
        mTextSize = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_size, default_text_size);

        mReachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_reached_bar_height, default_reached_bar_height);
        mUnreachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_unreached_bar_height, default_unreached_bar_height);
        mOffset = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_offset, default_progress_text_offset);

        <span class="hljs-keyword">int</span> textVisible = attributes.getInt(R.styleable.NumberProgressBar_progress_text_visibility, PROGRESS_TEXT_VISIBLE);

        <span class="hljs-keyword">if</span> (textVisible != PROGRESS_TEXT_VISIBLE) {
            mIfDrawText = <span class="hljs-keyword">false</span>;
        }

        setProgress(attributes.getInt(R.styleable.NumberProgressBar_progress_current, <span class="hljs-number">0</span>));
        setMax(attributes.getInt(R.styleable.NumberProgressBar_progress_max, <span class="hljs-number">100</span>));
        <span class="hljs-comment">//回收 TypedArray,用于后续调用时可复用之。回收到TypedArrayPool池中,以备后用</span>
        attributes.recycle();
        initializePainters();
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getSuggestedMinimumWidth</span>() {
        <span class="hljs-keyword">return</span> (<span class="hljs-keyword">int</span>) mTextSize;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getSuggestedMinimumHeight</span>() {
        <span class="hljs-keyword">return</span> Math.max((<span class="hljs-keyword">int</span>) mTextSize, Math.max((<span class="hljs-keyword">int</span>) mReachedBarHeight, (<span class="hljs-keyword">int</span>) mUnreachedBarHeight));
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMeasure</span>(<span class="hljs-keyword">int</span> widthMeasureSpec, <span class="hljs-keyword">int</span> heightMeasureSpec) {
        <span class="hljs-javadoc">/**
         * MeasureSpec参数的值为int型,分为高32位和低16为,
         * 高32位保存的是specMode,低16位表示specSize,
         *
         * specMode分三种:
         1、MeasureSpec.UNSPECIFIED,父视图不对子视图施加任何限制,子视图可以得到任意想要的大小;
         2、MeasureSpec.EXACTLY,父视图希望子视图的大小是specSize中指定的大小;
         3、MeasureSpec.AT_MOST,子视图的大小最多是specSize中的大小。
         */</span>
        setMeasuredDimension(measure(widthMeasureSpec, <span class="hljs-keyword">true</span>), measure(heightMeasureSpec, <span class="hljs-keyword">false</span>));
    }

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> <span class="hljs-title">measure</span>(<span class="hljs-keyword">int</span> measureSpec, <span class="hljs-keyword">boolean</span> isWidth) {

        <span class="hljs-keyword">int</span> result;
        <span class="hljs-keyword">int</span> mode = MeasureSpec.getMode(measureSpec);
        <span class="hljs-keyword">int</span> size = MeasureSpec.getSize(measureSpec);
        <span class="hljs-keyword">int</span> padding = isWidth ? getPaddingLeft() + getPaddingRight() : getPaddingTop() + getPaddingBottom();
        <span class="hljs-javadoc">/**
         父决定子的确切大小,子被限定在给定的边界里,忽略本身想要的大小。
         (当设置width或height为match_parent时,模式为EXACTLY,因为子view会占据剩余容器的空间,所以它大小是确定的)
         */</span>
        <span class="hljs-keyword">if</span> (mode == MeasureSpec.EXACTLY) {
            result = size;
        } <span class="hljs-keyword">else</span> {
            result = isWidth ? getSuggestedMinimumWidth() : getSuggestedMinimumHeight();
            result += padding;
            <span class="hljs-javadoc">/**
             *子最大可以达到的指定大小
             * (当设置为wrap_content时,模式为AT_MOST, 表示子view的大小最多是多少,这样子view会根据这个上限来设置自己的尺寸)
             */</span>
            <span class="hljs-keyword">if</span> (mode == MeasureSpec.AT_MOST) {
                <span class="hljs-keyword">if</span> (isWidth) {
                    result = Math.max(result, size);
                } <span class="hljs-keyword">else</span> {
                    result = Math.min(result, size);
                }
            }
        }
        <span class="hljs-keyword">return</span> result;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas) {
        <span class="hljs-comment">//如果要绘制当前进度值文本</span>
        <span class="hljs-keyword">if</span> (mIfDrawText) {
            calculateDrawRectF();
        }<span class="hljs-keyword">else</span> {
            calculateDrawRectFWithoutProgressText();
        }

        <span class="hljs-comment">//如果要绘制当前进度值之前的进度条</span>
        <span class="hljs-keyword">if</span> (mDrawReachedBar) {
            canvas.drawRect(mReachedRectF, mReachedBarPaint);
        }

        <span class="hljs-comment">//如果要绘制当前进度值之后的进度条</span>
        <span class="hljs-keyword">if</span> (mDrawUnreachedBar) {
            canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
        }

        <span class="hljs-comment">//绘制当前进度值文本</span>
        <span class="hljs-keyword">if</span> (mIfDrawText)
            canvas.drawText(mCurrentDrawText, mDrawTextStart, mDrawTextEnd, mTextPaint);
    }

    <span class="hljs-javadoc">/**
     * 初始化画笔
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initializePainters</span>() {
        mReachedBarPaint = <span class="hljs-keyword">new</span> Paint(Paint.ANTI_ALIAS_FLAG);
        mReachedBarPaint.setColor(mReachedBarColor);

        mUnreachedBarPaint = <span class="hljs-keyword">new</span> Paint(Paint.ANTI_ALIAS_FLAG);
        mUnreachedBarPaint.setColor(mUnreachedBarColor);

        mTextPaint = <span class="hljs-keyword">new</span> Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mTextSize);
    }

    <span class="hljs-javadoc">/**
     * 计算不要绘制当前进度值文本时 图形的各个属性
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">calculateDrawRectFWithoutProgressText</span>() {
        <span class="hljs-comment">//当前进度值不画</span>

        <span class="hljs-comment">//当前进度值之前的进度条(长方形)的属性</span>
        mReachedRectF.left = getPaddingLeft();
        mReachedRectF.top = getHeight() / <span class="hljs-number">2.0</span>f - mReachedBarHeight / <span class="hljs-number">2.0</span>f;
        mReachedRectF.right =
                (getWidth() - getPaddingLeft() - getPaddingRight()) / (getMax() * <span class="hljs-number">1.0</span>f) * getProgress()
                        + getPaddingLeft();
        mReachedRectF.bottom = getHeight() / <span class="hljs-number">2.0</span>f + mReachedBarHeight / <span class="hljs-number">2.0</span>f;

        <span class="hljs-comment">//当前进度值之后的进度条(长方形)的属性</span>
        mUnreachedRectF.left = mReachedRectF.right;
        mUnreachedRectF.right = getWidth() - getPaddingRight();
        mUnreachedRectF.top = getHeight() / <span class="hljs-number">2.0</span>f + -mUnreachedBarHeight / <span class="hljs-number">2.0</span>f;
        mUnreachedRectF.bottom = getHeight() / <span class="hljs-number">2.0</span>f + mUnreachedBarHeight / <span class="hljs-number">2.0</span>f;
    }

    <span class="hljs-javadoc">/**
     * 计算要绘制当前进度值文本时 图形的各个属性
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">calculateDrawRectF</span>() {
        <span class="hljs-comment">//要绘制的当前进度值的文本</span>
        mCurrentDrawText = String.format(<span class="hljs-string">"%d"</span>, getProgress() * <span class="hljs-number">100</span> / getMax());
        mCurrentDrawText = mPrefix + mCurrentDrawText + mSuffix;
        <span class="hljs-comment">//要绘制的当前进度值的文本的宽度</span>
        mDrawTextWidth = mTextPaint.measureText(mCurrentDrawText);
        <span class="hljs-comment">//如果当前进度值为0,则不绘制当前进度值之前的进度条</span>
        <span class="hljs-keyword">if</span> (getProgress() == <span class="hljs-number">0</span>) {
            mDrawReachedBar = <span class="hljs-keyword">false</span>;
            mDrawTextStart = getPaddingLeft();
        }
        <span class="hljs-comment">//否则绘制当前进度值文本之前的进度条</span>
        <span class="hljs-keyword">else</span> {
            mDrawReachedBar = <span class="hljs-keyword">true</span>;
            <span class="hljs-comment">//当前进度值文本之前的进度条(长方形)的属性</span>
            mReachedRectF.left = getPaddingLeft();
            mReachedRectF.top = getHeight() / <span class="hljs-number">2.0</span>f - mReachedBarHeight / <span class="hljs-number">2.0</span>f;
            mReachedRectF.right= (getWidth() - getPaddingLeft() - getPaddingRight()) / (getMax() * <span class="hljs-number">1.0</span>f) * getProgress()
                    - mOffset + getPaddingLeft();
            mReachedRectF.bottom = getHeight() / <span class="hljs-number">2.0</span>f + mReachedBarHeight / <span class="hljs-number">2.0</span>f;
            <span class="hljs-comment">//当前进度值的文本的起始位置</span>
            mDrawTextStart = (mReachedRectF.right + mOffset);
        }
        <span class="hljs-comment">//当前进度值的文本的结束位置</span>
        mDrawTextEnd = (<span class="hljs-keyword">int</span>) ((getHeight() / <span class="hljs-number">2.0</span>f) - ((mTextPaint.descent() + mTextPaint.ascent()) / <span class="hljs-number">2.0</span>f));
        <span class="hljs-comment">//如果画不下当前进度值的文本了,就重新计算下当前进度值的文本的起始位置和当前进度值之前的进度条(长方形)的右边</span>
        <span class="hljs-keyword">if</span> ((mDrawTextStart + mDrawTextWidth) >= getWidth() - getPaddingRight()) {
            mDrawTextStart = getWidth() - getPaddingRight() - mDrawTextWidth;
            mReachedRectF.right = mDrawTextStart - mOffset;
        }

        <span class="hljs-comment">//当前进度值文本之后的进度条的起始位置</span>
        <span class="hljs-keyword">float</span> unreachedBarStart = mDrawTextStart + mDrawTextWidth + mOffset;
        <span class="hljs-comment">//如果画不下进度值文本之后的进度条了,就不画进度值之后的进度条</span>
        <span class="hljs-keyword">if</span> (unreachedBarStart >= getWidth() - getPaddingRight()) {
            mDrawUnreachedBar = <span class="hljs-keyword">false</span>;
        } <span class="hljs-keyword">else</span> {
            mDrawUnreachedBar = <span class="hljs-keyword">true</span>;
            <span class="hljs-comment">//当前进度值文本之后的进度条(长方形)的属性</span>
            mUnreachedRectF.left = unreachedBarStart;
            mUnreachedRectF.right = getWidth() - getPaddingRight();
            mUnreachedRectF.top = getHeight() / <span class="hljs-number">2.0</span>f + -mUnreachedBarHeight / <span class="hljs-number">2.0</span>f;
            mUnreachedRectF.bottom = getHeight() / <span class="hljs-number">2.0</span>f + mUnreachedBarHeight / <span class="hljs-number">2.0</span>f;
        }
    }

    <span class="hljs-javadoc">/**
     * Get progress text color.
     * 获取当前进度值文本的颜色
     *<span class="hljs-javadoctag"> @return</span> progress text color.
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getTextColor</span>() {
        <span class="hljs-keyword">return</span> mTextColor;
    }

    <span class="hljs-javadoc">/**
     * Get progress text size.
     * 获取当前进度值文本的字体大小
     *<span class="hljs-javadoctag"> @return</span> progress text size.
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">float</span> <span class="hljs-title">getProgressTextSize</span>() {
        <span class="hljs-keyword">return</span> mTextSize;
    }

    <span class="hljs-javadoc">/**
     * 获取当前进度值文本之后的进度条颜色
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getUnreachedBarColor</span>() {
        <span class="hljs-keyword">return</span> mUnreachedBarColor;
    }

    <span class="hljs-javadoc">/**
     * 获取当前进度值文本之前的进度条颜色
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getReachedBarColor</span>() {
        <span class="hljs-keyword">return</span> mReachedBarColor;
    }
    <span class="hljs-javadoc">/**
     * 获取进度条的当前进度值
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getProgress</span>() {
        <span class="hljs-keyword">return</span> mCurrentProgress;
    }
    <span class="hljs-javadoc">/**
     * 获取进度条的最大值
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getMax</span>() {
        <span class="hljs-keyword">return</span> mMaxProgress;
    }
    <span class="hljs-javadoc">/**
     * 获取当前进度值文本之前的进度条的高度
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">float</span> <span class="hljs-title">getReachedBarHeight</span>() {
        <span class="hljs-keyword">return</span> mReachedBarHeight;
    }
    <span class="hljs-javadoc">/**
     * 获取当前进度值文本之后的进度条的高度
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">float</span> <span class="hljs-title">getUnreachedBarHeight</span>() {
        <span class="hljs-keyword">return</span> mUnreachedBarHeight;
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本的字体大小
     *<span class="hljs-javadoctag"> @param</span> textSize 当前进度值文本的字体大小
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setProgressTextSize</span>(<span class="hljs-keyword">float</span> textSize) {
        <span class="hljs-keyword">this</span>.mTextSize = textSize;
        mTextPaint.setTextSize(mTextSize);
        invalidate();
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本的颜色
     *<span class="hljs-javadoctag"> @param</span> textColor 当前进度值文本的颜色
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setProgressTextColor</span>(<span class="hljs-keyword">int</span> textColor) {
        <span class="hljs-keyword">this</span>.mTextColor = textColor;
        mTextPaint.setColor(mTextColor);
        invalidate();
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本之后的进度条颜色
     *<span class="hljs-javadoctag"> @param</span> barColor 当前进度值文本之后的进度条颜色
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setUnreachedBarColor</span>(<span class="hljs-keyword">int</span> barColor) {
        <span class="hljs-keyword">this</span>.mUnreachedBarColor = barColor;
        mUnreachedBarPaint.setColor(mUnreachedBarColor);
        invalidate();
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本之前的进度条颜色
     *<span class="hljs-javadoctag"> @param</span> progressColor 当前进度值文本之前的进度条颜色
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setReachedBarColor</span>(<span class="hljs-keyword">int</span> progressColor) {
        <span class="hljs-keyword">this</span>.mReachedBarColor = progressColor;
        mReachedBarPaint.setColor(mReachedBarColor);
        invalidate();
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本之前的进度条的高度
     *<span class="hljs-javadoctag"> @param</span> height 当前进度值文本之前的进度条的高度
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setReachedBarHeight</span>(<span class="hljs-keyword">float</span> height) {
        mReachedBarHeight = height;
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本之后的进度条的高度
     *<span class="hljs-javadoctag"> @param</span> height 当前进度值文本之后的进度条的高度
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setUnreachedBarHeight</span>(<span class="hljs-keyword">float</span> height) {
        mUnreachedBarHeight = height;
    }

    <span class="hljs-javadoc">/**
     * 设置进度值的最大值
     *<span class="hljs-javadoctag"> @param</span> maxProgress 进度值的最大值
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setMax</span>(<span class="hljs-keyword">int</span> maxProgress) {
        <span class="hljs-keyword">if</span> (maxProgress > <span class="hljs-number">0</span>) {
            <span class="hljs-keyword">this</span>.mMaxProgress = maxProgress;
            invalidate();
        }
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本的后缀
     *<span class="hljs-javadoctag"> @param</span> suffix 当前进度值文本的后缀
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setSuffix</span>(String suffix) {
        <span class="hljs-keyword">if</span> (suffix == <span class="hljs-keyword">null</span>) {
            mSuffix = <span class="hljs-string">""</span>;
        } <span class="hljs-keyword">else</span> {
            mSuffix = suffix;
        }
    }
    <span class="hljs-javadoc">/**
     * 获取当前进度值文本的后缀
     */</span>
    <span class="hljs-keyword">public</span> String <span class="hljs-title">getSuffix</span>() {
        <span class="hljs-keyword">return</span> mSuffix;
    }
    <span class="hljs-javadoc">/**
     * 设置当前进度值文本的前缀
     *<span class="hljs-javadoctag"> @param</span> prefix 当前进度值文本的前缀
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setPrefix</span>(String prefix) {
        <span class="hljs-keyword">if</span> (prefix == <span class="hljs-keyword">null</span>)
            mPrefix = <span class="hljs-string">""</span>;
        <span class="hljs-keyword">else</span> {
            mPrefix = prefix;
        }
    }
    <span class="hljs-javadoc">/**
     * 获取当前进度值文本的前缀
     */</span>
    <span class="hljs-keyword">public</span> String <span class="hljs-title">getPrefix</span>() {
        <span class="hljs-keyword">return</span> mPrefix;
    }

    <span class="hljs-javadoc">/**
     * 设置进度条的当前进度值增加
     *<span class="hljs-javadoctag"> @param</span> by 增加多少
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">incrementProgressBy</span>(<span class="hljs-keyword">int</span> by) {
        <span class="hljs-keyword">if</span> (by > <span class="hljs-number">0</span>) {
            setProgress(getProgress() + by);
        }
        <span class="hljs-keyword">if</span> (mListener != <span class="hljs-keyword">null</span>) {
            <span class="hljs-comment">//回调onProgressChange()方法来处理进度值变化后的事件</span>
            mListener.onProgressChange(getProgress(), getMax());
        }
    }

    <span class="hljs-javadoc">/**
     * 设置当前进度值
     *
     *<span class="hljs-javadoctag"> @param</span> progress 当前进度值
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setProgress</span>(<span class="hljs-keyword">int</span> progress) {
        <span class="hljs-keyword">if</span> (progress <= getMax() && progress >= <span class="hljs-number">0</span>) {
            <span class="hljs-keyword">this</span>.mCurrentProgress = progress;
            invalidate();
        }
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> Parcelable <span class="hljs-title">onSaveInstanceState</span>() {
        <span class="hljs-keyword">final</span> Bundle bundle = <span class="hljs-keyword">new</span> Bundle();
        bundle.putParcelable(INSTANCE_STATE, <span class="hljs-keyword">super</span>.onSaveInstanceState());
        bundle.putInt(INSTANCE_TEXT_COLOR, getTextColor());
        bundle.putFloat(INSTANCE_TEXT_SIZE, getProgressTextSize());
        bundle.putFloat(INSTANCE_REACHED_BAR_HEIGHT, getReachedBarHeight());
        bundle.putFloat(INSTANCE_UNREACHED_BAR_HEIGHT, getUnreachedBarHeight());
        bundle.putInt(INSTANCE_REACHED_BAR_COLOR, getReachedBarColor());
        bundle.putInt(INSTANCE_UNREACHED_BAR_COLOR, getUnreachedBarColor());
        bundle.putInt(INSTANCE_MAX, getMax());
        bundle.putInt(INSTANCE_PROGRESS, getProgress());
        bundle.putString(INSTANCE_SUFFIX, getSuffix());
        bundle.putString(INSTANCE_PREFIX, getPrefix());
        bundle.putBoolean(INSTANCE_TEXT_VISIBILITY, getProgressTextVisibility());
        <span class="hljs-keyword">return</span> bundle;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onRestoreInstanceState</span>(Parcelable state) {
        <span class="hljs-keyword">if</span> (state <span class="hljs-keyword">instanceof</span> Bundle) {
            <span class="hljs-keyword">final</span> Bundle bundle = (Bundle) state;
            mTextColor = bundle.getInt(INSTANCE_TEXT_COLOR);
            mTextSize = bundle.getFloat(INSTANCE_TEXT_SIZE);
            mReachedBarHeight = bundle.getFloat(INSTANCE_REACHED_BAR_HEIGHT);
            mUnreachedBarHeight = bundle.getFloat(INSTANCE_UNREACHED_BAR_HEIGHT);
            mReachedBarColor = bundle.getInt(INSTANCE_REACHED_BAR_COLOR);
            mUnreachedBarColor = bundle.getInt(INSTANCE_UNREACHED_BAR_COLOR);
            initializePainters();
            setMax(bundle.getInt(INSTANCE_MAX));
            setProgress(bundle.getInt(INSTANCE_PROGRESS));
            setPrefix(bundle.getString(INSTANCE_PREFIX));
            setSuffix(bundle.getString(INSTANCE_SUFFIX));
            setProgressTextVisibility(bundle.getBoolean(INSTANCE_TEXT_VISIBILITY) ? Visible : Invisible);
            <span class="hljs-keyword">super</span>.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE));
            <span class="hljs-keyword">return</span>;
        }
        <span class="hljs-keyword">super</span>.onRestoreInstanceState(state);
    }

    <span class="hljs-javadoc">/**
     * dp转px
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">float</span> <span class="hljs-title">dp2px</span>(<span class="hljs-keyword">float</span> dp) {
        <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> scale = getResources().getDisplayMetrics().density;
        <span class="hljs-keyword">return</span> dp * scale + <span class="hljs-number">0.5</span>f;
    }
    <span class="hljs-javadoc">/**
     * sp转px
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">float</span> <span class="hljs-title">sp2px</span>(<span class="hljs-keyword">float</span> sp) {
        <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> scale = getResources().getDisplayMetrics().scaledDensity;
        <span class="hljs-keyword">return</span> sp * scale;
    }
    <span class="hljs-javadoc">/**
     * 设置是否绘制当前进度值文本
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setProgressTextVisibility</span>(ProgressTextVisibility visibility) {
        mIfDrawText = visibility == Visible;
        invalidate();
    }
    <span class="hljs-javadoc">/**
     * 获取是否绘制当前进度值文本
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">getProgressTextVisibility</span>() {
        <span class="hljs-keyword">return</span> mIfDrawText;
    }
    <span class="hljs-javadoc">/**
     * 设置进度值变化时的监听器
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setOnProgressBarListener</span>(OnProgressBarListener listener) {
        mListener = listener;
    }
}
</code><ul class="pre-numbering" style="display: block;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li><li>112</li><li>113</li><li>114</li><li>115</li><li>116</li><li>117</li><li>118</li><li>119</li><li>120</li><li>121</li><li>122</li><li>123</li><li>124</li><li>125</li><li>126</li><li>127</li><li>128</li><li>129</li><li>130</li><li>131</li><li>132</li><li>133</li><li>134</li><li>135</li><li>136</li><li>137</li><li>138</li><li>139</li><li>140</li><li>141</li><li>142</li><li>143</li><li>144</li><li>145</li><li>146</li><li>147</li><li>148</li><li>149</li><li>150</li><li>151</li><li>152</li><li>153</li><li>154</li><li>155</li><li>156</li><li>157</li><li>158</li><li>159</li><li>160</li><li>161</li><li>162</li><li>163</li><li>164</li><li>165</li><li>166</li><li>167</li><li>168</li><li>169</li><li>170</li><li>171</li><li>172</li><li>173</li><li>174</li><li>175</li><li>176</li><li>177</li><li>178</li><li>179</li><li>180</li><li>181</li><li>182</li><li>183</li><li>184</li><li>185</li><li>186</li><li>187</li><li>188</li><li>189</li><li>190</li><li>191</li><li>192</li><li>193</li><li>194</li><li>195</li><li>196</li><li>197</li><li>198</li><li>199</li><li>200</li><li>201</li><li>202</li><li>203</li><li>204</li><li>205</li><li>206</li><li>207</li><li>208</li><li>209</li><li>210</li><li>211</li><li>212</li><li>213</li><li>214</li><li>215</li><li>216</li><li>217</li><li>218</li><li>219</li><li>220</li><li>221</li><li>222</li><li>223</li><li>224</li><li>225</li><li>226</li><li>227</li><li>228</li><li>229</li><li>230</li><li>231</li><li>232</li><li>233</li><li>234</li><li>235</li><li>236</li><li>237</li><li>238</li><li>239</li><li>240</li><li>241</li><li>242</li><li>243</li><li>244</li><li>245</li><li>246</li><li>247</li><li>248</li><li>249</li><li>250</li><li>251</li><li>252</li><li>253</li><li>254</li><li>255</li><li>256</li><li>257</li><li>258</li><li>259</li><li>260</li><li>261</li><li>262</li><li>263</li><li>264</li><li>265</li><li>266</li><li>267</li><li>268</li><li>269</li><li>270</li><li>271</li><li>272</li><li>273</li><li>274</li><li>275</li><li>276</li><li>277</li><li>278</li><li>279</li><li>280</li><li>281</li><li>282</li><li>283</li><li>284</li><li>285</li><li>286</li><li>287</li><li>288</li><li>289</li><li>290</li><li>291</li><li>292</li><li>293</li><li>294</li><li>295</li><li>296</li><li>297</li><li>298</li><li>299</li><li>300</li><li>301</li><li>302</li><li>303</li><li>304</li><li>305</li><li>306</li><li>307</li><li>308</li><li>309</li><li>310</li><li>311</li><li>312</li><li>313</li><li>314</li><li>315</li><li>316</li><li>317</li><li>318</li><li>319</li><li>320</li><li>321</li><li>322</li><li>323</li><li>324</li><li>325</li><li>326</li><li>327</li><li>328</li><li>329</li><li>330</li><li>331</li><li>332</li><li>333</li><li>334</li><li>335</li><li>336</li><li>337</li><li>338</li><li>339</li><li>340</li><li>341</li><li>342</li><li>343</li><li>344</li><li>345</li><li>346</li><li>347</li><li>348</li><li>349</li><li>350</li><li>351</li><li>352</li><li>353</li><li>354</li><li>355</li><li>356</li><li>357</li><li>358</li><li>359</li><li>360</li><li>361</li><li>362</li><li>363</li><li>364</li><li>365</li><li>366</li><li>367</li><li>368</li><li>369</li><li>370</li><li>371</li><li>372</li><li>373</li><li>374</li><li>375</li><li>376</li><li>377</li><li>378</li><li>379</li><li>380</li><li>381</li><li>382</li><li>383</li><li>384</li><li>385</li><li>386</li><li>387</li><li>388</li><li>389</li><li>390</li><li>391</li><li>392</li><li>393</li><li>394</li><li>395</li><li>396</li><li>397</li><li>398</li><li>399</li><li>400</li><li>401</li><li>402</li><li>403</li><li>404</li><li>405</li><li>406</li><li>407</li><li>408</li><li>409</li><li>410</li><li>411</li><li>412</li><li>413</li><li>414</li><li>415</li><li>416</li><li>417</li><li>418</li><li>419</li><li>420</li><li>421</li><li>422</li><li>423</li><li>424</li><li>425</li><li>426</li><li>427</li><li>428</li><li>429</li><li>430</li><li>431</li><li>432</li><li>433</li><li>434</li><li>435</li><li>436</li><li>437</li><li>438</li><li>439</li><li>440</li><li>441</li><li>442</li><li>443</li><li>444</li><li>445</li><li>446</li><li>447</li><li>448</li><li>449</li><li>450</li><li>451</li><li>452</li><li>453</li><li>454</li><li>455</li><li>456</li><li>457</li><li>458</li><li>459</li><li>460</li><li>461</li><li>462</li><li>463</li><li>464</li><li>465</li><li>466</li><li>467</li><li>468</li><li>469</li><li>470</li><li>471</li><li>472</li><li>473</li><li>474</li><li>475</li><li>476</li><li>477</li><li>478</li><li>479</li><li>480</li><li>481</li><li>482</li><li>483</li><li>484</li><li>485</li><li>486</li><li>487</li><li>488</li><li>489</li><li>490</li><li>491</li><li>492</li><li>493</li><li>494</li><li>495</li><li>496</li><li>497</li><li>498</li><li>499</li><li>500</li><li>501</li><li>502</li><li>503</li><li>504</li><li>505</li><li>506</li><li>507</li><li>508</li><li>509</li><li>510</li><li>511</li><li>512</li><li>513</li><li>514</li><li>515</li><li>516</li><li>517</li><li>518</li><li>519</li><li>520</li><li>521</li><li>522</li><li>523</li><li>524</li><li>525</li><li>526</li><li>527</li><li>528</li><li>529</li><li>530</li><li>531</li><li>532</li><li>533</li><li>534</li><li>535</li><li>536</li><li>537</li><li>538</li><li>539</li><li>540</li><li>541</li><li>542</li><li>543</li><li>544</li><li>545</li><li>546</li><li>547</li><li>548</li><li>549</li><li>550</li><li>551</li><li>552</li><li>553</li><li>554</li><li>555</li><li>556</li><li>557</li><li>558</li><li>559</li><li>560</li><li>561</li><li>562</li><li>563</li><li>564</li><li>565</li><li>566</li><li>567</li><li>568</li><li>569</li><li>570</li><li>571</li><li>572</li><li>573</li><li>574</li><li>575</li><li>576</li><li>577</li><li>578</li><li>579</li><li>580</li><li>581</li><li>582</li><li>583</li><li>584</li><li>585</li><li>586</li><li>587</li><li>588</li><li>589</li><li>590</li><li>591</li><li>592</li><li>593</li><li>594</li><li>595</li><li>596</li><li>597</li><li>598</li><li>599</li><li>600</li><li>601</li><li>602</li><li>603</li><li>604</li><li>605</li><li>606</li><li>607</li><li>608</li><li>609</li><li>610</li><li>611</li><li>612</li><li>613</li><li>614</li><li>615</li><li>616</li><li>617</li><li>618</li><li>619</li><li>620</li><li>621</li><li>622</li><li>623</li><li>624</li><li>625</li><li>626</li><li>627</li><li>628</li><li>629</li><li>630</li><li>631</li><li>632</li><li>633</li><li>634</li><li>635</li><li>636</li><li>637</li><li>638</li><li>639</li><li>640</li><li>641</li><li>642</li><li>643</li><li>644</li><li>645</li><li>646</li><li>647</li><li>648</li><li>649</li><li>650</li><li>651</li><li>652</li></ul>

如以上代码所示:
在自定义NumberProgressBar控件的构造方法中,去获取了全部设置好了的自定义属性值,如果没有设置则使用默认的自定义属性值。

然后先重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法,来确定自定义NumberProgressBar控件的大小。

接着重写onDraw()方法,进行绘制自定义的带数字的进度条。

 


 

第三步、将自定义带数字的进度条添加到布局文件中

在res/layout目录下定义一个activity_main.xml文件,res/layout/activity_main.xml定义代码如下所示:

<code class="hljs avrasm has-numbering">
<LinearLayout
    xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
    xmlns:tools=<span class="hljs-string">"http://schemas.android.com/tools"</span>
    xmlns:custom=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string">"match_parent"</span>
    android:layout_height=<span class="hljs-string">"match_parent"</span>
    android:paddingLeft=<span class="hljs-string">"@dimen/activity_horizontal_margin"</span>
    android:paddingRight=<span class="hljs-string">"@dimen/activity_horizontal_margin"</span>
    android:paddingTop=<span class="hljs-string">"@dimen/activity_vertical_margin"</span>
    android:paddingBottom=<span class="hljs-string">"@dimen/activity_vertical_margin"</span>
    android:orientation=<span class="hljs-string">"vertical"</span>
    tools:context=<span class="hljs-string">"com.daimajia.numberprogressbar.example.MainActivity="</span>>

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar1"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:padding=<span class="hljs-string">"20dp"</span>
        custom:progress_current=<span class="hljs-string">"0"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Default"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar2"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span>
        android:padding=<span class="hljs-string">"20dp"</span>
        custom:progress_current=<span class="hljs-string">"20"</span>
        android:layout_width=<span class="hljs-string">"match_parent"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Passing_Green"</span>
     />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar3"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Relax_Blue"</span>
        custom:progress_current=<span class="hljs-string">"30"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar4"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Grace_Yellow"</span>
        custom:progress_current=<span class="hljs-string">"40"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />


    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar5"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        custom:progress_current=<span class="hljs-string">"50"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Warning_Red"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />


    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar6"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Funny_Orange"</span>
        custom:progress_current=<span class="hljs-string">"60"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar7"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Beauty_Red"</span>
        custom:progress_current=<span class="hljs-string">"70"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar8"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        style=<span class="hljs-string">"@style/NumberProgressBar_Twinkle_Night"</span>
        custom:progress_current=<span class="hljs-string">"80"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />

    <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.daimajia</span><span class="hljs-preprocessor">.numberprogressbar</span><span class="hljs-preprocessor">.NumberProgressBar</span>
        android:id=<span class="hljs-string">"@+id/numberbar9"</span>
        android:layout_width=<span class="hljs-string">"wrap_content"</span>
        android:layout_margin=<span class="hljs-string">"20dp"</span>
        custom:progress_current=<span class="hljs-string">"20"</span>
        custom:progress_max=<span class="hljs-string">"100"</span>
        custom:progress_unreached_color=<span class="hljs-string">"#FF530D"</span>
        custom:progress_reached_color=<span class="hljs-string">"#6DBCDB"</span>
        custom:progress_text_size=<span class="hljs-string">"10sp"</span>
        custom:progress_text_color=<span class="hljs-string">"#ECF0F1"</span>
        custom:progress_reached_bar_height=<span class="hljs-string">"1.5dp"</span>
        custom:progress_unreached_bar_height=<span class="hljs-string">"0.75dp"</span>
        android:layout_height=<span class="hljs-string">"wrap_content"</span> />
</LinearLayout>
</code><ul class="pre-numbering" style="display: block;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li></ul>

 


 

第四步、编写Activity加载布局文件,显示自定义的带数字的进度条

MainActity的代码如下所示:

<code class="hljs java has-numbering"><span class="hljs-keyword">package</span> com.daimajia.numberprogressbar.example;

<span class="hljs-keyword">import</span> android.app.Activity;
<span class="hljs-keyword">import</span> android.graphics.Color;
<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.widget.Toast;

<span class="hljs-keyword">import</span> com.daimajia.numberprogressbar.NumberProgressBar;
<span class="hljs-keyword">import</span> com.daimajia.numberprogressbar.OnProgressBarListener;

<span class="hljs-keyword">import</span> java.util.Timer;
<span class="hljs-keyword">import</span> java.util.TimerTask;


<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">OnProgressBarListener</span> {</span>
    <span class="hljs-keyword">private</span> Timer timer;

    <span class="hljs-keyword">private</span> NumberProgressBar bnp;
    <span class="hljs-keyword">private</span> NumberProgressBar bnp9;

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bnp = (NumberProgressBar)findViewById(R.id.numberbar1);
        bnp.setOnProgressBarListener(<span class="hljs-keyword">this</span>);

        bnp9 = (NumberProgressBar)findViewById(R.id.numberbar9);
        bnp9.setPrefix(<span class="hljs-string">"欧阳鹏:"</span>);
        bnp9.setSuffix(<span class="hljs-string">"%  CSDN"</span>);
        bnp9.setProgressTextSize(<span class="hljs-number">20</span>);
        bnp9.setProgressTextColor(Color.YELLOW);
        bnp9.setProgressTextVisibility(NumberProgressBar.ProgressTextVisibility.Visible);
        bnp9.setUnreachedBarColor(Color.RED);
        bnp9.setReachedBarHeight(<span class="hljs-number">10</span>);
        bnp9.setReachedBarHeight(<span class="hljs-number">5</span>);


        timer = <span class="hljs-keyword">new</span> Timer();
        timer.schedule(<span class="hljs-keyword">new</span> TimerTask() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">run</span>() {
                runOnUiThread(<span class="hljs-keyword">new</span> Runnable() {
                    <span class="hljs-annotation">@Override</span>
                    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">run</span>() {
                        bnp.incrementProgressBy(<span class="hljs-number">1</span>);
                    }
                });
            }
        }, <span class="hljs-number">1000</span>, <span class="hljs-number">100</span>);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDestroy</span>() {
        <span class="hljs-keyword">super</span>.onDestroy();
        timer.cancel();
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onProgressChange</span>(<span class="hljs-keyword">int</span> current, <span class="hljs-keyword">int</span> max) {
        <span class="hljs-keyword">if</span>(current == max) {
            Toast.makeText(getApplicationContext(), getString(R.string.finish), Toast.LENGTH_SHORT).show();
            bnp.setProgress(<span class="hljs-number">0</span>);
        }
    }
}
</code><ul class="pre-numbering" style="display: block;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li></ul>

 


 

显示出的效果图为:

这里写图片描述

这里写图片描述

这里写图片描述

 


 

看完介绍后,读者可以到以下地址去查看完整的项目代码

 


 

这里还有另外一个NumberProgresBar的例子,如下图所示

这里写图片描述

这里写图片描述

这里写图片描述

上图所示的源代码可以在soyoungboy中查看
地址:https://github.com/soyoungboy/NumberSeekBar

版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处! 【http://blog.csdn.net/ouyang_peng/article/details/50859094

这里写图片描述

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值