【自定义控件】eat loading 自定义控件实现

2019-11-06 09:53:29

字体：大中小

来源：转载

供稿：网友

效果：

这里写图片描述

实现步骤：

这里写图片描述

代码对应：

canvas.translate(mEatRadius, height / 2);//将画布移动到左侧中间//1、根据PRogress计算圆心的位置float x = currentProgress * (width - 3 * mEatRadius / 2) / 100;//2、计算两条线的夹角int lineState = currentProgress % mOnceProgress;//lineState有两个类型的值，边界值和一般值上边界（下边界）和中间值if (lineState != 0) {//表示中间值 mCurrentMouthDegree = lineState * mMouthDegree * 2 / (mOnceProgress * 2);} else if (currentProgress % (mOnceProgress * 2) == 0) {//表示上边界 mCurrentMouthDegree = mMouthDegree;} else {//下边界 mCurrentMouthDegree = 0;}//3、根据圆心和夹角画圆弧mArcPaint.setColor(mEatColor);RectF mArcRect = new RectF(x - mEatRadius, (float) -mEatRadius, x + mEatRadius, (float) mEatRadius);canvas.drawArc(mArcRect, mCurrentMouthDegree / 2, 360 - mCurrentMouthDegree, true, mArcPaint);//5、画眼睛float eyeDegree = -(45 + mMouthDegree / 4);float eyeToCenter = 2 * mEatRadius / 3;mArcPaint.setColor(mEyeColor);canvas.drawCircle((float) (eyeToCenter * Math.cos(Math.toRadians(eyeDegree)) + x), (float) (eyeToCenter * Math.sin(Math.toRadians(eyeDegree))), mEyeRadius, mArcPaint);//6、画文本String txt = currentProgress + "%";Rect txtRect = new Rect();mTxtPaint.setColor(mProgressTxtColor);mTxtPaint.setTextSize(mProgressTxtSize);mTxtPaint.getTextBounds(txt, 0, txt.length(), txtRect);canvas.drawText(txt, -txtRect.width() / 2 + x, -mEatRadius - 8, mTxtPaint);//7.1、右侧线条canvas.drawLine(x + mEatRadius / 2, 0, width - 3 * mEatRadius / 2, 0, mRightLinePaint);//7.2、左侧虚线线条Path path = new Path();path.moveTo(-mEatRadius, 0);path.lineTo(x - mEatRadius, 0);canvas.drawPath(path, mLeftLinePaint);

自定义属性列表：

eatRadius	圆半径
mouthDegree	夹角度数
onceProgress	一口多少个进度
eatColor	圆弧的颜色
rightLineColor	右侧线条的颜色
rightLineHeight	右侧线条的高度
leftLineColor	左侧线条的颜色
leftLineHeight	左侧线条的高度
leftLineGap	左侧线条虚线的间隔
progressTxtColor	进度文本的颜色
progressTxtSize	进度文本字体大小
finishTxtSize	结束文本字体大小
finishTxtColor	结束文本字体颜色
eyeColor	眼睛颜色
eatTime	吃的时间
finishTxt	结束时的文本
loadFinishTime	结束时显示文本的时间