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.jb51.net/201701/yuanma/AndroidStarBar(jb51.net).rar

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

时间: 2024-10-25 08:00:43

Android自定义星星评分控件的相关文章

Android自定义加载控件实现数据加载动画_Android

本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

Android自定义播放器控件VideoView_Android

介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于播放视频

Android自定义播放器控件VideoView

介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于播放视频

一款超酷的Android自定义加载控件_Android

在设计应用的时候,我们应该热爱极简主义,简单就是好的,对于很多用户来说,复杂的东西并不受欢迎. 我要实现的是根据不同的情况去显示不同的加载效果,随用随调,效果是借鉴于某一项目的效果,我认为有必要提取出来改善封装一下,供以后使用.情况大致分为:加载中.无网络.无数据.加载失败等,这些仅仅就需要一个View 就可以搞定啦! 预览下效果图: 我们怎么实现这种效果呢 view_loading.xml的布局如下: <?xml version="1.0" encoding="utf

Android 自定义弹性ListView控件实例代码(三种方法)

关于在Android中实现ListView的弹性效果,有很多不同的方法,网上一搜,也有很多,下面贴出在项目中经常用到的两种实现ListView弹性效果的方法(基本上拿来就可以用),供大家参考: 弹性ListView 第一种方法: import android.content.Context; import android.content.res.Configuration; import android.util.AttributeSet; import android.util.Display

一款超酷的Android自定义加载控件

在设计应用的时候,我们应该热爱极简主义,简单就是好的,对于很多用户来说,复杂的东西并不受欢迎. 我要实现的是根据不同的情况去显示不同的加载效果,随用随调,效果是借鉴于某一项目的效果,我认为有必要提取出来改善封装一下,供以后使用.情况大致分为:加载中.无网络.无数据.加载失败等,这些仅仅就需要一个View 就可以搞定啦! 预览下效果图: 我们怎么实现这种效果呢 view_loading.xml的布局如下: <?xml version="1.0" encoding="utf

Android评分控件RatingBar使用实例解析_Android

无论游戏,应用,网站,都少不了评分控件.在Android SDK 中提供了 RatingBar控件来实现相应的工作. <RatingBar/>标签有几个常用评分相关属性 android:numStars,指定评分五角星数. android:rating,指定当前分数 android:stepSize, 指定分数增量 <RatingBar/>还有3种 常用的style属性 默认style 就是ratingBarStyle style ratingBarStyleIndicator 不

Android评分控件RatingBar使用实例解析

无论游戏,应用,网站,都少不了评分控件.在Android SDK 中提供了 RatingBar控件来实现相应的工作. <RatingBar/>标签有几个常用评分相关属性 android:numStars,指定评分五角星数. android:rating,指定当前分数 android:stepSize, 指定分数增量 <RatingBar/>还有3种 常用的style属性 默认style 就是ratingBarStyle style ratingBarStyleIndicator 不

交互设计之即时评分控件设计要素

控件描述设计理念使用场景设计要素注意事项 控件描述即时评分控件主要适用于用户对某一对象(例如商品)进行主观简易评级的一种交互控件,该控件具有即时反馈结果,最大程度的减少对用户任务流的打断,评价结果具有量化.等级化的特点. 典型样式 控件描述用户在给对象进行主观评价打分的时候,他们需要:   1.能够及时的反馈结果.   2.该评价量化的数值是简单.明确.层次清晰的.   3.希望看到其他用户的打分情况.(辅助判断)   4.该对象总体评分情况.(整体把握)即时评分控件提供了一种轻量级的用户信誉保