星星评价控件android开发_Android自定义View,评分星星控件(RatingBar)
一、先看一下效果图
半个星星的资源图片是随便找的,别在意这些小东西
事例图
系统方法去实现(UI配合, 三步搞定,建议使用系统,星星间隙用透明度去控制):
android:id="@+id/rb_appraise"
style="@style/App_RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="true"
android:minWidth="12dp"
android:minHeight="12dp"
android:numStars="5"
android:rating="0.0"
android:stepSize="0.1" />
@drawable/app_rating_stars
center
android:id="@android:id/background"
android:drawable="@drawable/ic_app_comm_star_nor" />
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/ic_app_comm_star_nor" />
android:id="@android:id/progress"
android:drawable="@drawable/ic_app_comm_star_sel" />
二、为什么要自定义RatingBar
系统的RatingBar功能挺全,但有几个缺陷:
1. 星星与星星之间的间距没办法控制
2. 星星的大小很难控制
3. 系统的样式一般都不符合自己App的UI样式
三、自定义View的一般套路
1. 自定义属性
2. 测量控件的宽高
3. 摆放控件的位置
4. 绘制控件
5. 用户交互(事件处理)
四、分析平时开发用到的RatingBar的特有属性
1. 星星的状态:未选中、选中半个、选中全部,一般都是由UI提供切图
2. 星星选中的数量(可能是半个)
3. 星星的总个数
4. 星星与星星之间的间距
5. 星星的大小
五、自定义RatingBar属性
按上面分析定义出RatingBar的属性
六、创建自定义RatingBar View,并找到自定义属性
public class RatingBar extends View {
// 正常、半个和选中的星星
private Bitmap mStarNormal, mStarHalf, mStarSelected;
//星星的总数
private int mStartTotalNumber = 5;
//选中的星星个数
private float mSelectedNumber;
// 星星之间的间距
private int mStartDistance;
// 是否画满
private Status mStatus = Status.FULL;
// 星星的宽高
private float mStarWidth;
private float mStarHeight;
// 星星选择变化的回调
private OnStarChangeListener mOnStarChangeListener;
// 是不是要画满,默认不画半个的
private boolean isFull;
// 画笔
private Paint mPaint = new Paint();
// 用于判断是绘制半个,还是全部
private enum Status {
FULL, HALF
}
public RatingBar(Context context) {
this(context, null);
}
public RatingBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
// 未选中的图片资源
int starNormalId = array.getResourceId(R.styleable.RatingBar_starEmptyRes, 0);
if (starNormalId == 0) {
throw new IllegalArgumentException("请设置属性 starNormal");
}
mStarNormal = BitmapFactory.decodeResource(getResources(), starNormalId);
// 选中一半的图片资源
int starHalfId = array.getResourceId(R.styleable.RatingBar_starHalfRes, 0);
if (starHalfId != 0) {
mStarHalf = BitmapFactory.decodeResource(getResources(), starHalfId);
}
// 选中全部的图片资源
int starSelectedId = array.getResourceId(R.styleable.RatingBar_starSelectedRes, 0);
if (starSelectedId == 0) {
throw new IllegalArgumentException("请设置属性 starSelected");
}
mStarSelected = BitmapFactory.decodeResource(getResources(), starSelectedId);
// 如果没设置一半的图片资源,就用全部的代替
if (starHalfId == 0) {
mStarHalf = mStarSelected;
}
mStartTotalNumber = array.getInt(R.styleable.RatingBar_startTotalNumber, mStartTotalNumber);
mSelectedNumber = array.getFloat(R.styleable.RatingBar_selectedNumber, mSelectedNumber);
mStartDistance = (int) array.getDimension(R.styleable.RatingBar_starDistance, 0);
mStarWidth = array.getDimension(R.styleable.RatingBar_starWidth, 0);
mStarHeight = array.getDimension(R.styleable.RatingBar_starHeight, 0);
isFull = array.getBoolean(R.styleable.RatingBar_starIsFull, true);
array.recycle();
// 如有指定宽高,获取最大值 去改变星星的大小(星星是正方形)
int starWidth = (int) Math.max(mStarWidth, mStarHeight);
if (starWidth > 0) {
mStarNormal = resetBitmap(mStarNormal, starWidth);
mStarSelected = resetBitmap(mStarSelected, starWidth);
mStarHalf = resetBitmap(mStarHalf, starWidth);
}
// 计算一半还是全部(小数部分小于等于0.5就只是显示一半)
if (!isFull) {
int num = (int) mSelectedNumber;
if (mSelectedNumber <= (num + 0.5f)) {
mStatus = Status.HALF;
}
}
}
/**
* 如果用户设置了图片的宽高,就重新设置图片
*/
public Bitmap resetBitmap(Bitmap bitMap, int startWidth) {
// 得到新的图片
return Bitmap.createScaledBitmap(bitMap, startWidth, startWidth, true);
}
/**
* 设置选中星星的数量
*/
public void setSelectedNumber(int selectedNumber) {
if (selectedNumber >= 0 && selectedNumber <= mStartTotalNumber) {
this.mSelectedNumber = selectedNumber;
invalidate();
}
}
/**
* 设置星星的总数量
*/
public void setStartTotalNumber(int startTotalNumber) {
if (startTotalNumber > 0) {
this.mStartTotalNumber = startTotalNumber;
invalidate();
}
}
}
七、测量控件的宽高(onMeasure)
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 用正常的一个星星图片去测量高
int height = getPaddingTop() + getPaddingBottom() + mStarNormal.getHeight();
// 宽 = 星星的宽度*总数 + 星星的间距*(总数-1) +padding
int width = getPaddingLeft() + getPaddingRight() + mStarNormal.getWidth() * mStartTotalNumber + mStartDistance * (mStartTotalNumber - 1);
setMeasuredDimension(width, height);
}
七、绘制控件RatingBar(onDraw)
@Override
protected void onDraw(Canvas canvas) {
// 循环绘制
for (int i = 0; i < mStartTotalNumber; i++) {
float left = getPaddingLeft();
// 从第二个星星开始,给它设置星星的间距
if (i > 0) {
left = getPaddingLeft() + i * (mStarNormal.getWidth() + mStartDistance);
}
float top = getPaddingTop();
// 绘制选中的星星
if (i < mSelectedNumber) {
// 比当前选中的数量小
if (i < mSelectedNumber - 1) {
canvas.drawBitmap(mStarSelected, left, top, mPaint);
} else {
// 在这里判断是不是要绘制满的
if (mStatus == Status.FULL) {
canvas.drawBitmap(mStarSelected, left, top, mPaint);
} else {
canvas.drawBitmap(mStarHalf, left, top, mPaint);
}
}
} else {
// 绘制正常的星星
canvas.drawBitmap(mStarNormal, left, top, mPaint);
}
}
}
八、用户交互,也就是复写触摸事件(onTouchEvent)
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
//减少绘制
case MotionEvent.ACTION_MOVE:
// 获取用户触摸的x位置
float x = event.getX();
// 一个星星占的宽度
int startWidth = getWidth() / mStartTotalNumber;
// 计算用户触摸星星的位置
int position = (int) (x / startWidth + 1);
if (position < 0) {
position = 0;
}
if (position > mStartTotalNumber) {
position = mStartTotalNumber;
}
// 计算绘制的星星是不是满的
float result = x - startWidth * (position - 1);
Status status;
// 结果大于一半就是满的
if (result > startWidth * 0.5f) {
// 满的
status = Status.FULL;
} else {
// 一半的
status = Status.HALF;
}
if (isFull) {
status = Status.FULL;
}
//减少绘制
if (mSelectedNumber != position || status != mStatus) {
mSelectedNumber = position;
mStatus = status;
invalidate();
if (mOnStarChangeListener != null) {
position = (int) (mSelectedNumber - 1);
// 选中的数量:满的就回调(1.0这种),一半就(0.5这种)
float selectedNumber = status == Status.FULL ? mSelectedNumber
: (mSelectedNumber - 0.5f);
mOnStarChangeListener.OnStarChanged(selectedNumber,
position < 0 ? 0 : position);
}
}
break;
}
return true;
}
// 回调监听(选中的数量,位置)
public interface OnStarChangeListener {
void OnStarChanged(float selectedNumber, int position);
}
九、实际使用
public class RatingBarActivity extends AppCompatActivity {
private RatingBar mRatingBar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ratingbar);
mRatingBar= (RatingBar) findViewById(R.id.rb);
mRatingBar.setOnStarChangeListener(new RatingBar.OnStarChangeListener() {
@Override
public void OnStarChanged(float selectedNumber, int position) {
// TODO 做相应的业务操作
}
});
}
}
// R.layout.activity_ratingbar 布局
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/rb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:selectedNumber="2.5"
app:starDistance="12dp"
app:starEmptyRes="@mipmap/star_normal"
app:starHalfRes="@mipmap/star_half"
app:starIsFull="false"
app:starSelectedRes="@mipmap/star_selected" />
事例图
星星大小控制:starHeight或者starWidth任意一个属性就好。
默认不画半个星星,要画半个星星:starIsFull="false"。
效果图如上,到此只要改变UI切出来的星星图片,就满足UI做出来的效果和业务的需求了。其它特殊的我没想到,你们也可以去改改就好。如果只是显示,就设置enable属性为false就好。还有其它的,自己稍作调整。
只供学习,如果效果不好,还是叫UI切图用系统的去实现。
星星评价控件android开发_Android自定义View,评分星星控件(RatingBar)相关推荐
- 星星评价控件android开发_android自定义星级评分控件,可实现只显示实心星星
话不多说,上图 近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图 但是网上关于星级评分的例子大多这样 也展示虚心星星 通过自定义Viewpackage com.starsba ...
- c#控件弹幕效果_Android 自定义View修炼-自定义弹幕效果View
一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...
- Android开发,自定义View的学习合集
转载自:http://blog.csdn.net/u011507982/article/details/51199644 自定义控件学习 https://github.com/GcsSloop/An ...
- Android开发之自定义View(一)
Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~ 剩下的下次再说~~ 继承View,重写 ...
- android自定义view凯,Android开发之自定义View(一)
Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~ 剩下的下次再说~~ 继承View,重写 ...
- Android开发之自定义view进行旋转动画
老套路先上图: 整个view非常简单,我自定义view里面都有详细的注释说明 先看自定义view部分代码: package cn.xiayiye5.customizestudy.view;import ...
- Android开发之自定义View
目录 一.View的简介 1.1 View的构造函数 1.2 View的绘制流程图 二.自定义View 2.1 onMeasure()方法 2.2 OnDraw()方法 一.View的简介 View类 ...
- Android开发之自定义view预览不显示的问题
老套路上图看: 如何解决呢?只需要我们点击右上角的感叹号查看不显示的原因即可 3.查看不显示的原因 4.查看具体报错代码以及报错解决方法 5.自行排查自定义view中有哪些没有初始化的数据进行修改或者 ...
- Android开发之自定义view绘制坐标位置出错的问题解决
老套路先看效果图 解释下:如上图我自定义view的时候再onDraw方法进行绘制文本的时候想要的效果是让文字居中,计算都是正确的,相应的坐标也打印出来手动计算检查了下都是对的,但是就是有问题,问题就是 ...
- Android开发之自定义View之音阶图谱
看下效果图 上代码 package com.xiayiye5.songview;/** Copyright (c) 2022, 13343401268@163.com All Rights Reser ...
最新文章
- Ubuntu 进阶命令——长期不定时更新
- JAVA运算符\操作符
- upload-labs_pass21_CTF逻辑老饶了
- 什么是Cortex、ARMv8、arm架构、ARM指令集、soc
- 我一定要找到它FreeEIM
- 大麦融入阿里电商平台,杰伦演唱会的票会不会好抢点?
- Halcon 摄像机标定流程-代码实现
- vulhub靶场sql注入漏洞复现
- django+echarts数据可视化(NBA球队数据可视化02)!
- 新东方的负载均衡架构探索和实践
- 最简单DIY基于ESP32CAM的物联网相机系统③(在JSP服务器图传相片给所有客户端欣赏)
- 微信windows版_安卓首发!微信黑暗模式来了
- 微信公众号如何设置开发者密码(APPSecret)?
- python查阅文献
- 大数据【企业级360°全方位用户画像】业务数据调研及ETL
- FFmpeg解码视频并保存为图片
- [Android 基础] -- Android 属性系统简介
- while(Thread.activeCount() > 1)
- Scala学习4之快学scala第六章习题之6.6花色枚举
- 搞不懂多维分析!如何制作多角度、灵活动态的多维分析报表?