文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android自定义星星评分控件

2022-06-06 04:53

关注

下面为控件的实现历程:
此控件高效,直接使用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;

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);
 }
 
 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));
 }
 
 public void setIntegerMark(boolean integerMark){
  this.integerMark = integerMark;
 }
 
 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();
 }
 
 public float getStarMark(){
  return starMark;
 }
 
 public interface OnStarChangeListener {
  void onStarChange(float mark);
 }
 
 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);
 }
 
 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.jb51.net/201701/yuanma/AndroidStarBar(jb51.net).rar

您可能感兴趣的文章:Android星级评分条控件RatingBar使用详解Android RatingBar星星评分控件实例代码Android UI控件RatingBar实现自定义星星评分效果Android评分控件RatingBar使用实例解析Android控件之RatingBar自定义星级评分样式Android自定义星星可滑动评分控件


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯