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);
设置错误setBounds会导致绘制变形:
把setbounds设置好后就一切正常:
经过一个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;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize);}@Overrideprotected 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);}}@Overridepublic 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.StarBarandroid: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://download.csdn.net/detail/a756213932/9579325
Android自定义星星评分控件,高效相关推荐
- android星星评分,Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
- 源码推荐:仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式,可以横向移动的表格, 仿微信键盘-
仿写映客直播(上传者:五仁月饼) 工作之余写的,基于IJKPlayer播放,对内存做了处理.目前已完成直播列表和直播间的搭建,后续还会慢慢完善. 项目地址 publishImageAndVideoAn ...
- Android自定义AlertDialog的控件获取操作
Android自定义AlertDialog的控件获取操作 在自定义的AlertDialog布局虽然可以显示,但是试过很多方法都不能获得其中的控件进行操作,找了很多方法最后这种方法可以. dialog的 ...
- android日历价格控件,Android 自定义价格日历控件
介绍 上个星期项目有一个日历价格的需求,类似一个商品在不同的日期价格可能会不同,由于时间给得特别紧所以打算找个合适的开源项目进行修改.参考了网上大多数是通过继承view直接draw一个monthVie ...
- android自定义view获取控件,android 自定义控件View在Activity中使用findByViewId得到结果为null...
转载:http://blog.csdn.net/xiabing082/article/details/48781489 1. 大家常常自定义view,,然后在xml 中添加该view 组件..如果在 ...
- android自定义xml弹窗,Android自定义弹窗提醒控件使用详解
Android中原生的Dialog弹窗提醒控件样式单一,有时候并不能满足我们的项目需求,而且一个工程里面有时候会在多处都用到弹窗提醒的功能,代码会出现大量的冗余,工作之余,就自己实现了这么一个弹窗提醒 ...
- android自定义选年控件,Android精美日历控件CalendarView自定义使用完全解析
项目github地址 此框架采用组合的方式,各个模块互相独立,可自由采用各种提供的控件组合,完全自定义自己需要的UI,周视图和月视图可通过简单自定义任意自由绘制,不怕美工提需求!!!下面教程将介绍如何 ...
- Android自定义的下拉列表框控件
一.概述 Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的 ...
- android 镂空字体下载,Android——自定义镂空掩饰控件
刚学完ViewDragHelper和PorterDuffXferMode的我,突然想做一个这样效果的自定义控件:点击ListView的列表项,通过ViewDragHelper用动画方式上下各弹出一个控 ...
- android 自定义音量调节,Android——自定义音量调节控件
今天我们要实现一个上图中音量调节的效果.主要有两种实现方式自定义RatingBar和自定义View. 自定义RatingBar volume_rating.xml main.xml android:i ...
最新文章
- 软件体系结构的第3次实验(软件体系结构风格之应用 )
- 限制Textarea文本域内容的长度
- ldap数据库--ODSEE--复制协议
- 电子邮件一般不在用户计算机中,[单选] 在一个完整的Internet电子邮件地址中,决定用户信箱所在的计算机地址的是()。...
- 谷歌浏览器 flash_Chrome 76测试版默认禁用Flash 用户可避开更多付费页面
- Android中WebView和JavaScript进行简单通信
- LINUX下载编译libpq(postgresql)
- fcm基本原理_FCM聚类算法介绍
- Wagtail 教程 2:简单博客实现
- html表格数据填充,bootstrap table.js动态填充单元格数据的多种方法
- WARNING: The repository located at mirrors.aliyun.com is not a trusted or secure host and is being i
- SQL两张表如何关联
- 一到面试就紧张,该怎么办?
- npm run dev卡住
- Hololens开发学习笔记-Gaze眼动跟踪
- 核货宝:订货系统多少钱?
- MATLAB数值仿真FOC矢量控制
- Python中的姓名和身份证的打印
- flutter int.parse报错type ‘int‘ is not a subtype of type ‘String‘
- firefox 火狐浏览器 跨域设置