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

效果:

这里写图片描述

实现步骤:

这里写图片描述

这里写图片描述

代码对应:

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 结束时显示文本的时间

代码:
https://github.com/WhatWeCan/customer_views/tree/master/EatView

猜你喜欢

转载自blog.csdn.net/u012391876/article/details/58145365