之前寫(xiě)過(guò)的App里有評(píng)分的功能，而顯示評(píng)分一般使用系統(tǒng)的RatingBar再加自定義备图，一切都很完美灿巧，但是產(chǎn)品提了一個(gè)需求赶袄，例如4.6张咳、4.7能真、5.8分，不要顯示為4個(gè)星星加一個(gè)半星（4.5分），而是能顯示出區(qū)別扛芽。（系統(tǒng)的RatingBar必須滿(mǎn)正整數(shù)才可以滿(mǎn)星，如果沒(méi)滿(mǎn)牛哺，還是顯示一半的效果）
這時(shí)系統(tǒng)的RatingBar就不滿(mǎn)足需求了蟆豫，需要我們自定義控件，當(dāng)時(shí)需求太趕了溉跃，需求先放下來(lái)了村刨，既然要繪制星星，我們就從繪制單個(gè)星星開(kāi)始吧撰茎，后續(xù)只要對(duì)星星做一層PorterDuffXfermode處理即可嵌牺。
Android 自定義View 繪制五角星.png
原理
我們以星星的中心為圓心，對(duì)五角星的5個(gè)端點(diǎn)畫(huà)一個(gè)外接圓。以五角星的內(nèi)部5個(gè)小角畫(huà)一個(gè)內(nèi)接圓逆粹，所以有2個(gè)圓募疮。
原理圖解.png
- 五角星的5個(gè)頂點(diǎn)，將360的圓平分5份僻弹，平均角度為72度阿浓。
- 取一個(gè)90度直角為參考，90度直角將右上角的部分分為2個(gè)角蹋绽，分別是大的角和小的角芭毙，大的角為72度，所以小角的角度為90度減去72度卸耘，為18度稿蹲。
- 我們?cè)儆?jì)算出一半的平均角度，72除以2鹊奖，為36度苛聘。
- 而內(nèi)角，就是凹進(jìn)去的那個(gè)小角的角度就可以計(jì)算出來(lái)忠聚，36度加18度设哗，為54度。
- 知道2個(gè)角的角度两蟀，以及外接圓和內(nèi)接圓的半徑网梢，就可以用三角函數(shù)計(jì)算出坐標(biāo)點(diǎn)。
文字描述有點(diǎn)不清楚赂毯，具體原理可以觀看視頻教程战虏，慕課網(wǎng)Web前端 Canvas畫(huà)星星教程。
我也是聽(tīng)了一遍講解后党涕，用Android的Canvas畫(huà)一次烦感，Web端的Canvas雖然API有點(diǎn)不一樣，但也是類(lèi)似的膛堤，有些地方要稍微處理一下手趣，例如Web端的Canvas的beginPath(x,y)是直接在點(diǎn)坐標(biāo)x,y開(kāi)始，而不經(jīng)過(guò)中心肥荔，Android端的Canvas會(huì)經(jīng)過(guò)0,0點(diǎn)绿渣，所以第一個(gè)點(diǎn)我們要先將Path調(diào)用moveTo(x,y)，移動(dòng)到第一個(gè)點(diǎn)燕耿，再繼續(xù)lineTo(x,y)下一個(gè)點(diǎn)中符。最后調(diào)用close()閉合Path。
完整代碼
- 自定義屬性
<declare-styleable name="StarsView">
<!-- 星星的顏色 -->
<attr name="stv_color" format="color" />
<!-- 星星的邊數(shù) -->
<attr name="stv_num" format="integer|dimension|reference" />
<!-- 邊的線寬 -->
<attr name="stv_edge_line_width" format="float|dimension|reference" />
<!-- 填充風(fēng)格 -->
<attr name="stv_style" format="enum">
<!-- 填滿(mǎn) -->
<enum name="fill" value="1" />
<!-- 描邊 -->
<enum name="stroke" value="2" />
</attr>
</declare-styleable>
- Java代碼
public class StarsView extends View {
/**
* View默認(rèn)最小寬度
*/
private static final int DEFAULT_MIN_WIDTH = 100;
/**
* 風(fēng)格誉帅，填滿(mǎn)
*/
private static final int STYLE_FILL = 1;
/**
* 風(fēng)格淀散，描邊
*/
private static int STYLE_STROKE = 2;
/**
* 控件寬
*/
private int mViewWidth;
/**
* 控件高
*/
private int mViewHeight;
/**
* 外邊大圓的半徑
*/
private float mOutCircleRadius;
/**
* 里面小圓的的半徑
*/
private float mInnerCircleRadius;
/**
* 畫(huà)筆
*/
private Paint mPaint;
/**
* 多少個(gè)角的五角星
*/
private int mAngleNum;
/**
* 星星的路徑
*/
private Path mPath;
/**
* 星星的顏色
*/
private int mColor;
/**
* 邊的線寬
*/
private float mEdgeLineWidth;
/**
* 填充風(fēng)格
*/
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);
//畫(huà)筆
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;
//計(jì)算外邊大圓的半徑
mOutCircleRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.95f;
//計(jì)算里面小圓的的半徑
mInnerCircleRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.5f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//將畫(huà)布中心移動(dòng)到中心點(diǎn)
canvas.translate(mViewWidth / 2, mViewHeight / 2);
//畫(huà)星星
drawStars(canvas);
}
/**
* 畫(huà)星星
*/
private void drawStars(Canvas canvas) {
//計(jì)算平均角度谭期，例如360度分5份，每一份角都為72度
float averageAngle = 360f / mAngleNum;
//計(jì)算大圓的外角的角度吧凉，從右上角為例計(jì)算隧出，90度的角減去一份角，得出剩余的小角的角度阀捅，例如90 - 72 = 18 度
float outCircleAngle = 90 - averageAngle;
//一份平均角度的一半胀瞪，例如72 / 2 = 36度
float halfAverageAngle = averageAngle / 2f;
//計(jì)算出小圓內(nèi)角的角度，36 + 18 = 54 度
float internalAngle = halfAverageAngle + outCircleAngle;
//創(chuàng)建2個(gè)點(diǎn)
Point outCirclePoint = new Point();
Point innerCirclePoint = new Point();
if (mPath == null) {
mPath = new Path();
}
mPath.reset();
for (int i = 0; i < mAngleNum; i++) {
//計(jì)算大圓上的點(diǎn)坐標(biāo)
//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);
//計(jì)算小圓上的點(diǎn)坐標(biāo)
//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);
//第一次饲鄙，先移動(dòng)到第一個(gè)大圓上的點(diǎn)
if (i == 0) {
mPath.moveTo(outCirclePoint.x, outCirclePoint.y);
}
//坐標(biāo)連接凄诞，先大圓角上的點(diǎn)，再到小圓角上的點(diǎn)
mPath.lineTo(outCirclePoint.x, outCirclePoint.y);
mPath.lineTo(innerCirclePoint.x, innerCirclePoint.y);
}
mPath.close();
canvas.drawPath(mPath, mPaint);
}
/**
* 角度轉(zhuǎn)弧度忍级，由于Math的三角函數(shù)需要傳入弧度制帆谍，而不是角度值，所以要角度換算為弧度轴咱，角度 / 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);
}
}
- 簡(jiǎn)單使用
<com.zh.cavas.sample.widget.StarsView
android:id="@+id/stars"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
app:stv_color="#0000FF"
app:stv_edge_line_width="1dp"
app:stv_num="5"
app:stv_style="stroke" />
<com.zh.cavas.sample.widget.StarsView
android:id="@+id/stars2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
app:stv_color="#0000FF"
app:stv_edge_line_width="1dp"
app:stv_num="5"
app:stv_style="fill" />
