【自定义控件】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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值