今天项目中又用到了RatingBar，于是翻出来之前踩坑的一篇笔记，快速解决问题，顺便把笔记内容整理在此，方便以后查阅。

当项目中遇到【评分】需求的时候，一般情况下都会使用RatingBar用于UI展示，而且很多时候都不会使用原生样式。原因有两个：

• Android和iOS样式的统一
• 系统原生样式的版本兼容性问题

所以适当的自定义RatingBar样式就显得很有必要了。

RatingBar基本使用

RatingBar的基本使用比较简单，这里只记录一下几个常用的属性：

• isIndicator 是否是指示器，如果设置为true,则不可以通过点击来改变进度；如果设置为false，则可点击
• numStars 一共有几个星星，默认是5个。
• rating 表示进度

RatingBar 样式展示

之前项目中一共碰到过四种RatingBar样式，各自效果图整理如下：

自定义RatingBar样式

说明：

• 第一个：原生普通样式（随着主题不同，样式会变）
• 第二个：原生普通样式-小icon
• 第三个：自定义RatingBar 颜色
• 第四个：自定义RatingBar Drawable

RatingBar 各样式实现

原生样式

原生样式其实没什么好说的，使用系统提供的style 即可

  

   

    

     

    
    

     

      <!--第一个：原生主题样式 -->
     
    
   

    

     

    
    

     

      <RatingBar
     
    
   

    

     

    
    

     
    style="?android:attr/ratingBarStyleIndicator"
     
    
   

    

     

    
    

     
    android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
    android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
    android:rating="3"/>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <!--第二个：原生主题样式：小-->
     
    
   

    

     

    
    

     

      <RatingBar
     
    
   

    

     

    
    

     
    style="?android:attr/ratingBarStyleSmall"
     
    
   

    

     

    
    

     
    android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
    android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
    android:rating="3"/>
     
    
  
 

自定义颜色

这种方式也很简单，只需要要定义一个样式即可，两步完成。

第一步，定义样式，指定背景色 和 进度色

  

   

    

     

    
    

     

      <!--自定义RatingBar Color-->
     
    
   

    

     

    
    

     

      <style name="RatingBar_CustomColor" parent="@android:style/Widget.Holo.RatingBar.Indicator">
     
    
   

    

     

    
    

     
    <!--Background Color-->
     
    
   

    

     

    
    

     
    <item name="colorControlNormal">#D7D7D7</item>
     
    
   

    

     

    
    

     
    <!--Progress Color-->
     
    
   

    

     

    
    

     
    <item name="colorControlActivated">#F49800</item>
     
    
   

    

     

    
    

     

      </style>
     
    
   

    

     

    
    

     
 
     
    
  
 

第二步，XML中使用该主题

  

   

    

     

    
    

     

      <!--自定义 Color-->
     
    
   

    

     

    
    

     

      <RatingBar
     
    
   

    

     

    
    

     
    android:id="@+id/go_rating"
     
    
   

    

     

    
    

     
    android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
    android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
    android:isIndicator="true"
     
    
   

    

     

    
    

     
    style="?android:attr/ratingBarStyleSmall"
     
    
   

    

     

    
    

     
    android:theme="@style/RatingBar_CustomColor"
     
    
   

    

     

    
    

     
    android:rating="3"/>
     
    
  
 

自定义Drawable

这种方式相对于前面几种，算是稍微麻烦一点的方式了，而且还存在图片拉伸的坑（图片底部被垂直拉伸成一条直线，跟哭了似的-_-!，就不贴图了）。先说具体实现方法，再说坑。

第一步，定义层叠布局layerlist

自定义过ProgressBar的同学，相信对下面的background，secondProgress，progress属性都不会陌生。

  

   

    

     

    
    

     

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

    

     

    
    

     
    
     
    
   

    

     

    
    

     

          <item android:id="@android:id/background"
     
    
   

    

     

    
    

     

              android:drawable="@drawable/star"/>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <item android:id="@android:id/secondaryProgress"
     
    
   

    

     

    
    

     

              android:drawable="@drawable/star"/>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

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

    

     

    
    

     

              android:drawable="@drawable/star_solid"/>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </layer-list>
     
    
  
 

第二步，自定义样式，指定ProgressDrawable

注意这里指定minHeight和maxHeight，根据项目中的UI需求而定，定死高度的其中一个作用就是防止drawable图片被垂直拉伸。

  

   

    

     

    
    

     

      <!--自定义RatingBar Drawable-->
     
    
   

    

     

    
    

     

      <style name="RatingBar_CustomDrawable" parent="@android:style/Widget.Holo.RatingBar.Indicator">
     
    
   

    

     

    
    

     
    <item name="android:progressDrawable">@drawable/custom_rating_bar</item>
     
    
   

    

     

    
    

     
    <item name="android:minHeight">15dp</item>
     
    
   

    

     

    
    

     
    <item name="android:maxHeight">15dp</item>
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

第三步，在xml中使用刚才定义好的样式

  

   

    

     

    
    

     

      <!--自定义Drawable样式-->
     
    
   

    

     

    
    

     

      <RatingBar
     
    
   

    

     

    
    

     
    android:id="@+id/room_ratingbar"
     
    
   

    

     

    
    

     
    style="@style/RatingBar_CustomDrawable"
     
    
   

    

     

    
    

     
    android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
    android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
    android:rating="3"/>
     
    
  
 

最后说下图片垂直拉伸的解决方案：

1. 设置minHeight和maxHeight，写死像素值。
2. 让UI帮忙切一张底部留有空隙的star图标，比如有1px的空隙
3. 使用略大于当前控件空间的icon，比如整个UI切图是按照drawable-xxhdpi来切的，那么使用高一级的drawable目录下比如drawable-xxxhdpi的icon，这样在运行的时候，icon会进行相应比例的缩放。

图片拉伸问题，还可以参考以下链接：
http://shikezhi.com/html/2015/android_0920/375199.html
http://blog.csdn.net/QMLN31821007/article/details/41121891

欢迎各位小伙伴加入我的qq群：开发一群：454430053 开发二群：537532956   这里已经有很多小伙伴在等你了，快来加入我们吧

文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。

原文链接：wukong.blog.csdn.net/article/details/105380149