之前写过的App里有评分的功能，而显示评分一般使用系统的RatingBar再加自定义，一切都很完美，但是产品提了一个需求，例如4.6、4.7、5.8分，不要显示为4个星星加一个半星（4.5分），而是能显示出区别。（系统的RatingBar必须满正整数才可以满星，如果没满，还是显示一半的效果）
这时系统的RatingBar就不满足需求了，需要我们自定义控件，当时需求太赶了，需求先放下来了，既然要绘制星星，我们就从绘制单个星星开始吧，后续只要对星星做一层PorterDuffXfermode处理即可。
Android 自定义View 绘制五角星.png
原理
我们以星星的中心为圆心，对五角星的5个端点画一个外接圆。以五角星的内部5个小角画一个内接圆，所以有2个圆。
原理图解.png
- 五角星的5个顶点，将360的圆平分5份，平均角度为72度。
- 取一个90度直角为参考，90度直角将右上角的部分分为2个角，分别是大的角和小的角，大的角为72度，所以小角的角度为90度减去72度，为18度。
- 我们再计算出一半的平均角度，72除以2，为36度。
- 而内角，就是凹进去的那个小角的角度就可以计算出来，36度加18度，为54度。
- 知道2个角的角度，以及外接圆和内接圆的半径，就可以用三角函数计算出坐标点。
文字描述有点不清楚，具体原理可以观看视频教程，慕课网Web前端 Canvas画星星教程。
我也是听了一遍讲解后，用Android的Canvas画一次，Web端的Canvas虽然API有点不一样，但也是类似的，有些地方要稍微处理一下，例如Web端的Canvas的beginPath(x,y)是直接在点坐标x,y开始，而不经过中心，Android端的Canvas会经过0,0点，所以第一个点我们要先将Path调用moveTo(x,y)，移动到第一个点，再继续lineTo(x,y)下一个点。最后调用close()闭合Path。
完整代码
- 自定义属性
- Java代码
public class StarsView extends View {
/**
* View默认最小宽度
*/
private static final int DEFAULT_MIN_WIDTH = 100;
/**
* 风格，填满
*/
private static final int STYLE_FILL = 1;
/**
* 风格，描边
*/
private static int STYLE_STROKE = 2;
/**
* 控件宽
*/
private int mViewWidth;
/**
* 控件高
*/
private int mViewHeight;
/**
* 外边大圆的半径
*/
private float mOutCircleRadius;
/**
* 里面小圆的的半径
*/
private float mInnerCircleRadius;
/**
* 画笔
*/
private Paint mPaint;
/**
* 多少个角的五角星
*/
private int mAngleNum;
/**
* 星星的路径
*/
private Path mPath;
/**
* 星星的颜色
*/
private int mColor;
/**
* 边的线宽
*/
private float mEdgeLineWidth;
/**
* 填充风格
*/
private int mStyle;
public StarsView(Context context) {
this(context, null);
}
public StarsView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public StarsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
initAttr(context, attrs, defStyleAttr);
//取消硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);
//画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
if (mStyle == STYLE_FILL) {
mPaint.setStyle(Paint.Style.FILL);
} else if (mStyle == STYLE_STROKE) {
mPaint.setStyle(Paint.Style.STROKE);
}
mPaint.setColor(mColor);
mPaint.setStrokeWidth(mEdgeLineWidth);
}
private void initAttr(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
int defaultColor = Color.argb(255, 0, 0, 0);
int defaultNum = 5;
int mineNum = 2;
float defaultEdgeLineWidth = dip2px(context, 1f);
int defaultStyle = STYLE_STROKE;
if (attrs != null) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.StarsView, defStyleAttr, 0);
mColor = array.getColor(R.styleable.StarsView_stv_color, defaultColor);
int num = array.getInt(R.styleable.StarsView_stv_num, defaultNum);
mAngleNum = num <= mineNum ? mineNum : num;
mEdgeLineWidth = array.getDimension(R.styleable.StarsView_stv_edge_line_width, defaultEdgeLineWidth);
mStyle = array.getInt(R.styleable.StarsView_stv_style, defaultStyle);
array.recycle();
} else {
mColor = defaultColor;
mAngleNum = defaultNum;
mEdgeLineWidth = defaultEdgeLineWidth;
mStyle = defaultStyle;
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
//计算外边大圆的半径
mOutCircleRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.95f;
//计算里面小圆的的半径
mInnerCircleRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.5f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将画布中心移动到中心点
canvas.translate(mViewWidth / 2, mViewHeight / 2);
//画星星
drawStars(canvas);
}
/**
* 画星星
*/
private void drawStars(Canvas canvas) {
//计算平均角度，例如360度分5份，每一份角都为72度
float averageAngle = 360f / mAngleNum;
//计算大圆的外角的角度，从右上角为例计算，90度的角减去一份角，得出剩余的小角的角度，例如90 - 72 = 18 度
float outCircleAngle = 90 - averageAngle;
//一份平均角度的一半，例如72 / 2 = 36度
float halfAverageAngle = averageAngle / 2f;
//计算出小圆内角的角度，36 + 18 = 54 度
float internalAngle = halfAverageAngle + outCircleAngle;
//创建2个点
Point outCirclePoint = new Point();
Point innerCirclePoint = new Point();
if (mPath == null) {
mPath = new Path();
}
mPath.reset();
for (int i = 0; i < mAngleNum; i++) {
//计算大圆上的点坐标
//x = Math.cos((18 + 72 * i) / 180f * Math.PI) * 大圆半径
//y = -Math.sin((18 + 72 * i)/ 180f * Math.PI) * 大圆半径
outCirclePoint.x = (int) (Math.cos(angleToRadian(outCircleAngle + i * averageAngle)) * mOutCircleRadius);
outCirclePoint.y = (int) -(Math.sin(angleToRadian(outCircleAngle + i * averageAngle)) * mOutCircleRadius);
//计算小圆上的点坐标
//x = Math.cos((54 + 72 * i) / 180f * Math.PI ) * 小圆半径
//y = -Math.sin((54 + 72 * i) / 180 * Math.PI ) * 小圆半径
innerCirclePoint.x = (int) (Math.cos(angleToRadian(internalAngle + i * averageAngle)) * mInnerCircleRadius);
innerCirclePoint.y = (int) -(Math.sin(angleToRadian(internalAngle + i * averageAngle)) * mInnerCircleRadius);
//第一次，先移动到第一个大圆上的点
if (i == 0) {
mPath.moveTo(outCirclePoint.x, outCirclePoint.y);
}
//坐标连接，先大圆角上的点，再到小圆角上的点
mPath.lineTo(outCirclePoint.x, outCirclePoint.y);
mPath.lineTo(innerCirclePoint.x, innerCirclePoint.y);
}
mPath.close();
canvas.drawPath(mPath, mPaint);
}
/**
* 角度转弧度，由于Math的三角函数需要传入弧度制，而不是角度值，所以要角度换算为弧度，角度 / 180 * π
*
* @param angle 角度
* @return 弧度
*/
private double angleToRadian(float angle) {
return angle / 180f * Math.PI;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(handleMeasure(widthMeasureSpec), handleMeasure(heightMeasureSpec));
}
/**
* 处理MeasureSpec
*/
private int handleMeasure(int measureSpec) {
int result = DEFAULT_MIN_WIDTH;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
//处理wrap_content的情况
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
}
- 简单使用