Android自定义星星评分控件

下面为控件的实现历程：
此控件高效，直接使用ondraw绘制，先亮照：

由于Android自身的星星评分控件样式可以改，但是他的大小不好调整的缺点，只能用small normal这样的style调整，自定义不强，因此击发了我自定义星星控件的欲望。

星星评分控件的设计，大体规划为：

需要两张图片，一颗亮星星，一颗空星星；（当然图片不一定是星星，其他图片也可以，现在实验就用星星就好了）星星数量，间距可以自定义，星星的最小步进为0.1，在用户使用的时候与Android自带的方法一样。

星星控件大体分为两层，第一层空星星，第二层亮星星，第一层固定，第二层动态绘制，这样就可以实现评分。

在画星星的时候，由于在xml得出回来的对象是drawable,不必再转换为bitmap绘制，故直接绘制drawable，并且提升效率。

绘制drawable需要两个方法就够了
1、设置绘制到那里：
setBounds(int left ,int top , int right ,int bottom);
2、绘制：
draw(Canvas canvas);

经过一个for循环，五颗空星星就出来了，哈哈

for (int i = 0;i < starCount;i++) {
   starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
   starEmptyDrawable.draw(canvas);
  }

for (int i = 0;i < starCount;i++) {
   starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
   starEmptyDrawable.draw(canvas);
  }
  for (int i = 0;i < starCount -1;i++) {
   starFillDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
   starFillDrawable.draw(canvas);
  }

上面几行代码成功强行装成了一个评了4分的

现在，显示几颗几颗的星星无压力，但是我们目标是需要步进为0.1的星星。
But
经过一系列的实验，发现Drawable对象没有能指定绘制需要的部分，也就是不能绘制半颗星星（反正找不到，找到可以评论告诉我），然后就采用了折中的方法，把Drawable对象变为Bitmap这样就好办了，再利用BitmapShader，想绘制多少就绘制多上（就是实现0.1步进），下面为1/3颗的效果：

转换方法：

private Bitmap drawableToBitmap(Drawable drawable)
 {
  if (drawable == null)return null;
  Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  drawable.setBounds(0, 0, starSize, starSize);
  drawable.draw(canvas);
  return bitmap;
 }

把Bitmap转换为画笔绘制：

paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));

在ondraw()方法绘制（三分之一个）

canvas.drawRect(0,0,starSize/3,starSize,paint);

原理就是这样，剩下就是逻辑问题了，以下为星星控件代码：

package com.dming.starbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by DMing on 2016/7/18.
 *
 */
public class StarBar extends View{
 private int starDistance = 0; //星星间距
 private int starCount = 5; //星星个数
 private int starSize;  //星星高度大小，星星一般正方形，宽度等于高度
 private float starMark = 0.0F; //评分星星
 private Bitmap starFillBitmap; //亮星星
 private Drawable starEmptyDrawable; //暗星星
 private OnStarChangeListener onStarChangeListener;//监听星星变化接口
 private Paint paint;   //绘制星星画笔
 private boolean integerMark = false;
 public StarBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs);
 }

 public StarBar(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs);
 }

 /**
  * 初始化UI组件
  *
  * @param context
  * @param attrs
  */
 private void init(Context context, AttributeSet attrs){
  setClickable(true);
  TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
  this.starDistance = (int) mTypedArray.getDimension(R.styleable.RatingBar_starDistance, 0);
  this.starSize = (int) mTypedArray.getDimension(R.styleable.RatingBar_starSize, 20);
  this.starCount = mTypedArray.getInteger(R.styleable.RatingBar_starCount, 5);
  this.starEmptyDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starEmpty);
  this.starFillBitmap = drawableToBitmap(mTypedArray.getDrawable(R.styleable.RatingBar_starFill));
  mTypedArray.recycle();

  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
 }

 /**
  * 设置是否需要整数评分
  * @param integerMark
  */
 public void setIntegerMark(boolean integerMark){
  this.integerMark = integerMark;
 }

 /**
  * 设置显示的星星的分数
  *
  * @param mark
  */
 public void setStarMark(float mark){
  if (integerMark) {
   starMark = (int)Math.ceil(mark);
  }else {
   starMark = Math.round(mark * 10) * 1.0f / 10;
  }
  if (this.onStarChangeListener != null) {
   this.onStarChangeListener.onStarChange(starMark); //调用监听接口
  }
  invalidate();
 }

 /**
  * 获取显示星星的数目
  *
  * @return starMark
  */
 public float getStarMark(){
  return starMark;
 }


 /**
  * 定义星星点击的监听接口
  */
 public interface OnStarChangeListener {
  void onStarChange(float mark);
 }

 /**
  * 设置监听
  * @param onStarChangeListener
  */
 public void setOnStarChangeListener(OnStarChangeListener onStarChangeListener){
  this.onStarChangeListener = onStarChangeListener;
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (starFillBitmap == null || starEmptyDrawable == null) {
   return;
  }
  for (int i = 0;i < starCount;i++) {
   starEmptyDrawable.setBounds((starDistance + starSize) * i, 0, (starDistance + starSize) * i + starSize, starSize);
   starEmptyDrawable.draw(canvas);
  }
  if (starMark > 1) {
   canvas.drawRect(0, 0, starSize, starSize, paint);
   if(starMark-(int)(starMark) == 0) {
    for (int i = 1; i < starMark; i++) {
     canvas.translate(starDistance + starSize, 0);
     canvas.drawRect(0, 0, starSize, starSize, paint);
    }
   }else {
    for (int i = 1; i < starMark - 1; i++) {
     canvas.translate(starDistance + starSize, 0);
     canvas.drawRect(0, 0, starSize, starSize, paint);
    }
    canvas.translate(starDistance + starSize, 0);
    canvas.drawRect(0, 0, starSize * (Math.round((starMark - (int) (starMark))*10)*1.0f/10), starSize, paint);
   }
  }else {
   canvas.drawRect(0, 0, starSize * starMark, starSize, paint);
  }
 }


 @Override
 public boolean onTouchEvent(MotionEvent event) {
  int x = (int) event.getX();
  if (x < 0) x = 0;
  if (x > getMeasuredWidth()) x = getMeasuredWidth();
  switch(event.getAction()){
   case MotionEvent.ACTION_DOWN: {
    setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
    break;
   }
   case MotionEvent.ACTION_MOVE: {
    setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
    break;
   }
   case MotionEvent.ACTION_UP: {
    break;
   }
  }
  invalidate();
  return super.onTouchEvent(event);
 }

 /**
  * drawable转bitmap
  *
  * @param drawable
  * @return
  */
 private Bitmap drawableToBitmap(Drawable drawable)
 {
  if (drawable == null)return null;
  Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  drawable.setBounds(0, 0, starSize, starSize);
  drawable.draw(canvas);
  return bitmap;
 }
}

attrs的文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="RatingBar">
  <!--星星间距-->
  <attr format="dimension" name="starDistance"/>
  <!--星星大小-->
  <attr format="dimension" name="starSize"/>
  <!--星星个数-->
  <attr format="integer" name="starCount"/>
  <!--星星空图-->
  <attr format="reference" name="starEmpty"/>
  <!--星星满图-->
  <attr format="reference" name="starFill"/>
 </declare-styleable>

</resources>

XML的使用方式：

 <com.dming.starbar.StarBar
  android:id="@+id/starBar"
  android:layout_below="@+id/display"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  ratingbar:starEmpty="@drawable/star_empty"
  ratingbar:starFill="@drawable/star_full"
  ratingbar:starDistance="5dp"
  ratingbar:starCount="8"
  ratingbar:starSize="30dp"/>

<重点>工程源码：http://xiazai./201701/yuanma/AndroidStarBar().rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android星星评分控件  # Android星星评分  # Android评分控件  # Android开发之拖动条/滑动条控件、星级评分控件功能的实例代码  # Android开发之自定义星星评分控件RatingBar用法示例  # Android自定义星星可滑动评分控件  # Android RatingBar星星评分控件实例代码  # Android评分控件RatingBar使用实例解析  # Android评分RationBar控件使用详解  # Android星级评分条控件RatingBar使用详解  # Android UI控件RatingBar实现自定义星星评分效果  # Android控件之RatingBar自定义星级评分样式  # Android自定义View仿大众点评星星评分控件  # 步进  # 一颗  # 自定义  # 转换为  # 几颗  # 第二层  # 第一层  # 成了  # 告诉我  # 找不到  # 就好  # 采用了  # 就用  # 两张  # 自带  # 只能用  # 不强  # 办了  # 我自  # 两层 

相关文章： 南宁网站建设制作定制,南宁网站建设可以定制吗？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  建站之星后台密码遗忘？如何快速找回？  网站微信制作软件,如何制作微信链接？  如何获取PHP WAP自助建站系统源码？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  常州自助建站费用包含哪些项目？  寿县云建站：智能SEO优化与多行业模板快速上线指南  建站之星各版本价格是多少？  建站之星如何通过成品分离优化网站效率？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  建站之星如何实现五合一智能建站与营销推广？  威客平台建站流程解析：高效搭建教程与设计优化方案  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  如何通过虚拟主机快速完成网站搭建？  如何快速启动建站代理加盟业务？  深圳网站制作案例,网页的相关名词有哪些？  建站之星安装需要哪些步骤及注意事项？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  建站主机空间推荐 高性价比配置与快速部署方案解析  网站制作知乎推荐,想做自己的网站用什么工具比较好？  如何高效利用亚马逊云主机搭建企业网站？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  建站之星如何快速解决建站难题？  太原网站制作公司有哪些,网约车营运证查询官网？  建站之星多图banner生成与模板自定义指南  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  黑客如何利用漏洞与弱口令入侵网站服务器？  北京的网站制作公司有哪些,哪个视频网站最好？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  深圳网站制作培训,深圳哪些招聘网站比较好？  如何用景安虚拟主机手机版绑定域名建站？  建站之星如何快速更换网站模板？  详解jQuery停止动画——stop()方法的使用  如何选择服务器才能高效搭建专属网站？  学校为何禁止电信移动建设网站？  招商网站制作流程,网站招商广告语？  如何制作网站标识牌,动态网站如何制作（教程）？  如何自定义建站之星模板颜色并下载新样式？  制作宣传网站的软件,小红书可以宣传网站吗？  如何在自有机房高效搭建专业网站？  制作网站的公司有哪些,做一个公司网站要多少钱？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  如何快速生成专业多端适配建站电话？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？