Ratingbar 和progressBar

Ratingbar UseGuide

(Android RatingBar结合属性动画，快速实现 QQ群男女比例分布图效果   http://blog.csdn.net/jxxfzgy/article/details/44115293)

Ratingbar是一个评分控件，系统给我们提供了这样一个控件，样式如下：

相信大家都见过这样一个控件。本文将详细的讲解Ratingbar的使用和改造。

系统默认Ratingbar

RatingBar是基于SeekBar（拖动条）和ProgressBar（状态条）的扩展，用星形来显示等级评定。 
我们来看下系统默认的Ratingbar：

这三种Ratingbar是系统给我们提供的样式，代码分别如下：

<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-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);">RatingBar</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/origin_ratingbar"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8dp"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:numStars</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"6"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:rating</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"3"</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);">RatingBar</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"?android:attr/ratingBarStyleIndicator"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8dp"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:numStars</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"7"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:rating</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"3"</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);">RatingBar</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"?android:attr/ratingBarStyleSmall"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8dp"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:numStars</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:rating</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"3"</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li></ul>

第一种为系统默认样式Ratingbar，不做任何改变，完全原生态。 
第二种为大样式Ratingbar，使用系统Style

“?android:attr/ratingBarStyleIndicator”

第三种为小样式Ratingbar，使用系统Style

“?android:attr/ratingBarStyleSmall”

系统给我们提供的Ratingbar基本可以满足我们不高的需求，它提供了一些属性：

属性作用android:rating=”3”当前显示的Star数android:numStars=”7”总共的Star数android:stepSize=”1.5”Star增加时的步长android:isIndicator=”true”Ratingbar是否可用

都很简单明了，看了就知道怎么用。

PS：很蛋疼的一点，系统的Ratingbar必须使用wrap_content布局，如果match_parent，定义的numStars就失效了。而且，系统的Ratingbar是无法调节Star与Star之间的间距的。

自定义样式Ratingbar

系统的Ratingbar虽然功能满足了，但是实在太丑，Star的样式还是无法控制，所以，我们可以通过Style来控制其样式。

创建Star图片

首先，我们创建一个drawable：

<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);">layer-list</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</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);">item</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+android:id/background"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:drawable</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/staroff"</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);">item</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+android:id/secondaryProgress"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:drawable</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/staroff"</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);">item</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+android:id/progress"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:drawable</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/staron"</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);">layer-list</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

很简单，指定三个属性：

• progress：用来在背景图片基础上进行填充的指示属性（和进度条类似，第一进度位置）
• secondaryProgress：类似progressbar的二级进度条
• background：用来填充背景图片，和进度条类似，当我们设置最高Star时（android:numStars），系统就会根据我们的设置，来画出以Star为单位的背景（例如android:numStars=”5”，就会画出5颗灰色的Star）

引用的id在IDE中可能会报错，但是不影响编译。

定义Style

我们创建一个Style，用来定义Ratingbar的样式：

<code class="hljs applescript 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;">    <style <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"MyRatingBar"</span> parent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@android:style/Widget.RatingBar"</span>>        <<span class="hljs-property" style="box-sizing: border-box;">item</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:progressDrawable"</span>>@drawable/ratingbar_bg</<span class="hljs-property" style="box-sizing: border-box;">item</span>>        <<span class="hljs-property" style="box-sizing: border-box;">item</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:minHeight"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">48</span>dp</<span class="hljs-property" style="box-sizing: border-box;">item</span>>        <<span class="hljs-property" style="box-sizing: border-box;">item</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"android:maxHeight"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">48</span>dp</<span class="hljs-property" style="box-sizing: border-box;">item</span>>    </style></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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

通过拓展Widget.RatingBar来自定义样式，并指定其android:progressDrawable参数为我们前面设置的图片样式。

引用Style

最后，我们在代码中引用自定义的Style：

<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-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);">RatingBar</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@style/MyRatingBar"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8dp"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:numStars</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"8"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:rating</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"3"</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

最后的显示样式如下：

这里也有个蛋疼的地方，那就是，一旦设置了自定义的Star样式、背景，Star在Ratingbar中就无法竖直居中了，所以，只能靠切图时留好边距来调整位置，这样同时也能解决无法定义Star直接间隔的问题。

重写Ratingbar

这必须的，最后我们会发现，系统提供的这个Ratingbar太鸡肋了，实在是不好意思直接拿来用，所以，我们来重写一个Ratingbar。

重写Ratingbar，我们就不使用系统的方式——拓展progressbar的方式。我们创建一个ViewGroup，通过设置不同数量的图片，来控制显示的Star。

创建属性

首先我们自定义attrs属性：

<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);">"RatingBarView"</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);">"starImageSize"</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);">"starCount"</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);">"integer"</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);">"starEmpty"</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);">"reference"</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);">"starFill"</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);">"reference"</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

定义四个属性，分别用来控制显示Star的大小，数量，未填充的图像，填充的图像。

重写Ratingbar

我们通过继承LinearLayout的方式来实现，往LinearLayout里面塞ImageView。

<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.xys.ratingbarguide;<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.drawable.Drawable;<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 class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.ViewGroup;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.ScaleAnimation;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.ImageView;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.LinearLayout;<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);">RatingBarView</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);">LinearLayout</span> {</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;">interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">OnRatingListener</span> {</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> onRating(Object bindObject, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> RatingScore);    }    <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> mClickable = <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;">private</span> OnRatingListener onRatingListener;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Object bindObject;    <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;">float</span> starImageSize;    <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> starCount;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Drawable starEmptyDrawable;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Drawable starFillDrawable;    <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> mStarCount;    <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;">setClickable</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> clickable) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.mClickable = clickable;    }    <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;">RatingBarView</span>(Context context, AttributeSet attrs) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs);        setOrientation(LinearLayout.HORIZONTAL);        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RatingBarView);        starImageSize = ta.getDimension(R.styleable.RatingBarView_starImageSize, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>);        starCount = ta.getInteger(R.styleable.RatingBarView_starCount, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);        starEmptyDrawable = ta.getDrawable(R.styleable.RatingBarView_starEmpty);        starFillDrawable = ta.getDrawable(R.styleable.RatingBarView_starFill);        ta.recycle();        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < starCount; ++i) {            ImageView imageView = getStarImageView(context, attrs);            imageView.setOnClickListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> 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-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mClickable) {                        mStarCount = indexOfChild(v) + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;                        setStar(mStarCount, <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;">if</span> (onRatingListener != <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {                            onRatingListener.onRating(bindObject, mStarCount);                        }                    }                }            });            addView(imageView);        }    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> ImageView <span class="hljs-title" style="box-sizing: border-box;">getStarImageView</span>(Context context, AttributeSet attrs) {        ImageView imageView = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ImageView(context);        ViewGroup.LayoutParams para = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ViewGroup.LayoutParams(Math.round(starImageSize), Math.round(starImageSize));        imageView.setLayoutParams(para);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO:you can change gap between two stars use the padding</span>        imageView.setPadding(<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-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);        imageView.setImageDrawable(starEmptyDrawable);        imageView.setMaxWidth(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);        imageView.setMaxHeight(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> imageView;    }    <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;">setStar</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> starCount, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> animation) {        starCount = starCount > <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starCount ? <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starCount : starCount;        starCount = starCount < <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> : starCount;        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < starCount; ++i) {            ((ImageView) getChildAt(i)).setImageDrawable(starFillDrawable);            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (animation) {                ScaleAnimation sa = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ScaleAnimation(<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-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);                getChildAt(i).startAnimation(sa);            }        }        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starCount - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>; i >= starCount; --i) {            ((ImageView) getChildAt(i)).setImageDrawable(starEmptyDrawable);        }    }    <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;">getStarCount</span>() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> mStarCount;    }    <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;">setStarFillDrawable</span>(Drawable starFillDrawable) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starFillDrawable = starFillDrawable;    }    <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;">setStarEmptyDrawable</span>(Drawable starEmptyDrawable) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starEmptyDrawable = starEmptyDrawable;    }    <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;">setStarCount</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> startCount) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starCount = starCount;    }    <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;">setStarImageSize</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> starImageSize) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.starImageSize = starImageSize;    }    <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;">setBindObject</span>(Object bindObject) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.bindObject = bindObject;    }    <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;">setOnRatingListener</span>(OnRatingListener onRatingListener) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.onRatingListener = onRatingListener;    }}</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li></ul>

代码基本没有什么好说的，非常简单的自定义View。在显示Star的时候，我们还可以添加显示的动画，我这里就只做了一个简单的缩放动画。同时，通过设置imageView的padding，我们可以解决Star之间设置间距的问题。

最后，显示效果如下：

响应事件

Ratingbar的响应事件与progressbar的响应事件类似。通过设置监听来监听Star选择的改变，当然，我们自定义的RatingbarView设置了一个接口，来实现监听：

<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;">RatingBar customRatingbar = (RatingBar) findViewById(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.id</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.origin</span>_ratingbar)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        customRatingbar<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setOnRatingBarChangeListener</span>(new RatingBar<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.OnRatingBarChangeListener</span>() {            @Override            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {                Toast<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.makeText</span>(MainActivity<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.this</span>, String<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.valueOf</span>(rating), Toast<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LENGTH</span>_SHORT)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.show</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>            }        })<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        RatingBarView originRatingbar = (RatingBarView) findViewById(R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.id</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.custom</span>_ratingbar)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        originRatingbar<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setOnRatingListener</span>(new RatingBarView<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.OnRatingListener</span>() {            @Override            public void onRating(Object bindObject, int RatingScore) {                Toast<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.makeText</span>(MainActivity<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.this</span>, String<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.valueOf</span>(RatingScore), Toast<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LENGTH</span>_SHORT)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.show</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</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;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

回调中的参数，就是Star的数量。除了回调，Ratingbar也提供了一些方法来返回Star的数量。 
原生：

• mRatingBar.getMax()
• mRatingBar.getRating()

自定义：

• mRatingBarView.getStarCount()

库

这个自定义Ratingbar可以放到单独的库项目中，作为UIKit来进行使用，那么为什么我这里没有呢？原因就是，我比较懒。需要的请自己抽一下，一共就两个文件。

以上，Ratingbar全解析结束，只留下一个Github:

https://github.com/xuyisheng/RatingbarGuide

欢迎fork、Star。

=================================progressBar===================================================

1

2

3

4

5

6

7

java.lang.Object

   ↳    android.view.View

       ↳    android.widget.ProgressBar

直接子类

AbsSeekBar

间接子类

RatingBar, SeekBar

在某些操作的进度中的可视指示器，为用户呈现操作的进度，还它有一个次要的进度条，用来显示中间进度，如在流媒体播放的缓冲区的进度。一个进度条也可不确定其进度。在不确定模式下，进度条显示循环动画。这种模式常用于应用程序使用任务的长度是未知的。进度条也就是一个表示运转的过程，例如发送短信，连接网络等等，表示一个过程正在执行中

1、android.widget. ProgressBar，继承自android.view.View 。在android.widget包中。对应对话框ProgressDialog。ProgressBar有两种展示方式，表盘形式（普通、小、大）和条形填充形式。在layout定义时，需要通过设施style属性类设置展示方式。

ProgressBar的样式有四种：

android:progressBarStyle：默认进度条样式，不确定模式
android:progressBarStyleHorizontal：水平进度条样式
android:progressBarStyleLarge ：大号进度条样式，也是不确定进度模式 


android:progressBarStyleSmall ：小号进度条样式，也是不确定进度模式 


二、XML重要属性

             android:max--  这事进度条长度最大值

             android:progress--设定度条当前进度值

            android:secondaryProgress--第二进度条进度值

　　　　android:progressBarStyle：默认进度条样式

　　　　android:progressBarStyleHorizontal：水平样式

       style="?android:attr/progressBarStyleLarge" --- 属性风格类型--大圆圈，如下图

       style=”?android:attr/progressBarStyleSmall”--- 属性风格类型--小圆圈，如下图：

       

       style="?android:attr/progressBarStyleHorizontal"  --水平进度条 --如下图：

       

        几秒钟之后自动滚到到如下：

       

也可以用下面的形式代替上面的形式的：

?

1

2

3

<ProgressBarstyle="@android:style/Widget.ProgressBar.Inverse"/>//中

<ProgressBarstyle="@android:style/Widget.ProgressBar.Large.Inverse"/> //大圆

<ProgressBarstyle="@android:style/Widget.ProgressBar.Small.Inverse"/> //小圆

三、重要方法

　　　　getMax()：返回这个进度条的范围的上限

　　　　getProgress()：返回当前进度值

　　　　getSecondaryProgress()：返回次要当前进度值

　　　　incrementProgressBy(int diff)：指定增加的进度--即步长

　　　　isIndeterminate()：指示进度条是否在不确定模式下

　　　　setIndeterminate(boolean indeterminate)：设置不确定模式下

　　　　setVisibility(int v)：设置该进度条是否可视

四、重要事件

　　　　onSizeChanged(int w, int h, int oldw, int oldh)：当进度值改变时引发此事件

接下来看案例：

1.定义一个布局文件progressbar.xml

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<?xmlversion="1.0"encoding="utf-8"?>

<ScrollViewxmlns:android="http://schemas.android.com/apk/res/android"

     

    android:layout_width="fill_parent"

    android:layout_height="match_parent"

    >

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

<TextView

    android:id="@+id/startText"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="垂直的----标题上面也有一个进度条哦"

    android:textColor="#CD0000"

    android:background="#BC8F8F"

    />

   <!-- style=”?android:attr/progressBarStyleLarge”大圆圈 -->

    <ProgressBar

      android:id="@+id/progtessBer_btn_id1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      style="?android:attr/progressBarStyleLarge"

        />

     <!-- style=”?android:attr/progressBarStyleSmall”小圆圈 -->

    <ProgressBar

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      style="?android:attr/progressBarStyleSmall"

      android:layout_gravity="center_horizontal"

        />

    <TextView

    android:id="@+id/startText1"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="水平的"

    android:textColor="#aaaaaa"

    />

     <!--  style="?android:attr/progressBarStyleHorizontal"  水平进度条 -->

    <ProgressBar

     android:id="@+id/progtessBer_btn_id2"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     style="?android:attr/progressBarStyleHorizontal"

     />

    <TextView

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:text="@string/progress_text"

     />

    </LinearLayout>

</ScrollView>

2.之后定义java文件：ProgressBarDemo.java

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

packagecom.dream.app.start.first.prograssbar;

importcom.dream.app.start.MenuDemo;

importcom.dream.app.start.R;

importcom.dream.app.start.R.id;

importcom.dream.app.start.R.layout;

importcom.dream.app.start.utils.PublicClass;

 

importandroid.app.Activity;

importandroid.content.Intent;

importandroid.os.Bundle;

importandroid.os.Handler;

importandroid.text.method.ScrollingMovementMethod;

importandroid.view.View;

importandroid.view.View.OnClickListener;

importandroid.view.Window;

importandroid.widget.AdapterView;

importandroid.widget.AdapterView.OnItemClickListener;

importandroid.widget.ArrayAdapter;

importandroid.widget.Button;

importandroid.widget.ListView;

importandroid.widget.ProgressBar;

importandroid.widget.TextView;

importandroid.widget.Toast;

 

publicclassProgressBarDemo extendsPublicClass {

    privateProgressBar  progressbar,progressbar_1;

    Button  btn1,btn2;

    privateint prostatus=0;

    //创建一个handler对象

    private Handler  handler=newHandler();

    @Override

    protectedvoidonCreate(Bundle savedInstanceState) {

        // TODO Auto-generated method stub

        super.onCreate(savedInstanceState);

         

         

          //在标题条里放置进度条。请求窗口特色风格，这里设置成不明确的进度风格

          requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

          

          //设置窗口进度条特性风格

//         requestWindowFeature(Window.FEATURE_PROGRESS);

 

          

          setContentView(R.layout.progressbar);

          //设置标题栏中的不明确的进度条是否可以显示，当你需要表示处理中的时候设置为True,处理完毕后设置为false

 

          setProgressBarIndeterminateVisibility(true);

         

        //设置进度条进度值,要乘以100的

//          setProgress(60*100);

//          setSecondaryProgress(80*100);

 

        btn2=(Button)findViewById(R.id.button_cancel);

//      btn2.setOnClickListener(onClick);

        progressbar=(ProgressBar)findViewById(R.id.progtessBer_btn_id2);

        progressbar_1=(ProgressBar)findViewById(R.id.progtessBer_btn_id1);

        //设置进度条的最大值

        progressbar.setMax(100000);

        progressbar_1.setMax(100000);

        //新开启一个进程

        newThread(newRunnable() {

             

            @Override

            publicvoidrun() {

                // 循环1000次,不断地更新prostatus状态值

                while(prostatus++<100000) {

                    //将一个Runnable对象添加到消息队列中去

                    //并且当执行该对象的时候，执行run

                    handler.post(newRunnable() {

                         

                        @Override

                        publicvoidrun() {

                            //重新设置进度条当前的值

                            progressbar.setProgress(prostatus);

                            progressbar_1.setProgress(prostatus);

                             

                        }

                    });    

                }

            }

        }).start();

         

    }

 

//toast方法

    privatevoidtoastshow(String str) {

        Toast.makeText(getApplicationContext(), str, Toast.LENGTH_SHORT).show();

 

    }

 

}

运行效果如下：

二：用图片实现滚动效果：

1.添加图片到drawable下

 2.自定义图片资源文件iamge_progress.xml

?

1

2

3

4

5

6

7

<?xmlversion="1.0"encoding="utf-8"?>

<animated-rotate

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/image_progress"

    android:pivotX="50%"

    android:pivotY="50%"

    />

3.定义布局文件，progress.xml

?

1

2

3

4

5

6

7

8

9

10

11

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center">

<ProgressBar

        android:indeterminateDrawable="@drawable/drawable_progress"

        android:layout_height="100dp"

        android:layout_width="100dp"/>

</LinearLayout>

 运行效果如下：

三》自定义渐变色进度条：

    定义drawable资源文件color_progressbar.xml

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<?xmlversion="1.0"encoding="utf-8"?>

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">

   <itemandroid:id="@android:id/background">  

    <shape>  

        <cornersandroid:radius="5dip"/>  

        <gradientandroid:startColor="#ff9d9e9d"  

                android:centerColor="#ff5a5d5a"  

                android:centerY="0.75"  

                android:endColor="#ff747674"  

                android:angle="270"  

        />  

    </shape>  

</item>  

<itemandroid:id="@android:id/secondaryProgress">  

    <clip>  

        <shape>  

            <cornersandroid:radius="5dip"/>  

            <gradientandroid:startColor="#80ffd300"  

                    android:centerColor="#80ffb600"  

                    android:centerY="0.75"  

                    android:endColor="#a0ffcb00"  

                    android:angle="270"  

            />  

        </shape>  

    </clip>  

</item>  

<itemandroid:id="@android:id/progress"  

>  

    <clip>  

        <shape>  

            <cornersandroid:radius="5dip"/>  

            <gradientandroid:startColor="#FF3030"  

                android:endColor="#AEEEEE"  

                android:angle="270"/>  

        </shape>  

    </clip>  

</item>

</layer-list>

2.定义对应的不布局文件：progressbar.xml在此文件中引用我们定义的drawable资源配置文件

?

1

2

3

4

5

6

7

8

9

10

11

12

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center">

<ProgressBar

                android:id="@+id/color_progressBar"

        android:indeterminateDrawable="@drawable/color_progress"

        android:layout_height="wrap_content"

        android:layout_width="match_parent"/>

</LinearLayout>

或者在代码中给进度条设置自定义资源文件：

效果如下：

四：自定义progressbar颜色：

1.定义一个图片资源文件：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?xmlversion="1.0"encoding="utf-8"?> 

<rotatexmlns:android="http://schemas.android.com/apk/res/android" 

    android:fromDegrees="0" 

    android:pivotX="50%" 

    android:pivotY="50%" 

    android:toDegrees="360"> 

   

    <shape 

        android:innerRadiusRatio="3" 

        android:shape="ring" 

        android:thicknessRatio="8" 

        android:useLevel="false"> 

   

        <gradient 

            android:centerColor="#FFFFFF" 

            android:centerY="0.50" 

            android:endColor="#FFFF00" 

            android:startColor="#000000" 

            android:type="sweep" 

            android:useLevel="false"/> 

    </shape> 

   

</rotate>

2.定义布局文件：

?

1

2

3

4

5

<ProgressBar

        android:id="@+id/color_progressBar2"

    android:indeterminateDrawable="@drawable/color_progress2"

    android:layout_height="wrap_content"

    android:layout_width="wrap_content"/>

3.效果：