2024年最全Android自定义View，画一个好看带延长线的饼状图，全套教学资料

2401_84556480

于 2024-05-16 18:32:29 发布

阅读量237

点赞数 3

文章标签： android 面试学习

本文链接：https://blog.csdn.net/2401_84556480/article/details/138971395

版权

尾声

最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家梳理了多年的架构经验，筹备近6个月最新录制的，相信这份视频能给你带来不一样的启发、收获。

Android进阶学习资料库

一共十个专题，包括了Android进阶所有学习资料，Android进阶视频，Flutter，java基础，kotlin，NDK模块，计算机网络，数据结构与算法，微信小程序，面试题解析，framework源码！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

}

这里需要注意的是：第一个扇形的起始角度为-90度，因为在自定义View中，0度是从右边开始的，也就是坐标轴中的X轴正方向那条线开始顺时针增加，而我们想让扇形从Y轴的上方这条线开始顺时针绘制，所以需要减90°。
现在entry中记录了每条数据的起始角度和扫过角度，可以直接遍历数据进行绘制了。但要记得在绘制之前，将paint的style设为Paint.Style.FILL，这样才能绘制出扇形：

private void drawPie(Canvas canvas) {
for (PieEntry pie : mPieLists) {
mPaint.setColor(pie.getColor());
canvas.drawArc(mRectF,
pie.getCurrentStartAngle(),
pie.getSweepAngle(),
true, mPaint);
}
}

添加中心空洞
相比设计稿，发现还有中间一个空洞，这个就简单啦，确定空洞半径占饼图的比例，再绘制一个同心白色圆形就好：

//饼图中间的空洞占据的比例
float holeRadiusProportion = 59;
canvas.drawCircle(0, 0, mRadius * holeRadiusProportion / 100, mPaint);

现在来看一下效果吧：

绘制延长点和圈
每个扇形都有一个延长点，点所处的位置在扇形圆弧中点的外部，对于扇形的角度我们已经知道了，所以延长点连接圆心的线，和X或Y轴形成的角度也是可知的，延长点到圆心的距离是圆半径+一小段延长距离，所以通过正余弦的算法，就能求出延长点的坐标值：

private void drawPoint(Canvas canvas) {
for (PieEntry pie : mPieLists) {
//延长点的位置处于扇形的中间
float halfAngle = pie.getCurrentStartAngle() + pie.getSweepAngle() / 2;
float cos = (float) Math.cos(Math.toRadians(halfAngle));
float sin = (float) Math.sin(Math.toRadians(halfAngle));
//通过正余弦算出延长点的坐标
float xCirclePoint = (mRadius + distance) * cos;
float yCirclePoint = (mRadius + distance) * sin;

mPaint.setColor(pie.getColor());
//绘制延长点
canvas.drawCircle(xCirclePoint, yCirclePoint, smallCircleRadius, mPaint);
//绘制同心圆环
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(xCirclePoint, yCirclePoint, bigCircleRadius, mPaint);
mPaint.setStyle(Paint.Style.FILL);
}
}

得到点的位置，再以其作为圆心绘制一个小圈。运行一下，效果是这样的：

咦，出现问题了，怎么5个扇形，却只出现了4个点和圈呢？最下面紫色扇形的点并没有显示出来。

还记得一开始为饼图所处的正方形RectF设置大小吗？我们将整个View的最短边作为其边长，在只有饼图的时候是没问题的，但现在饼图的外部又多了一些显示内容，所以我们要将饼图的范围缩小，给外部的内容一些展示空间。

目前只画了点跟圈，后续还有延长线和文字，也就是饼图在View中占的空间会越来越小。如何适配饼图区域的大小，在后面的章节会提，目前我们先简单化处理，直接将饼图的半径缩小一部分:

private void initRectF() {
float shortSideLength;
//取短边作为饼图的直径
shortSideLength = (mTotalHeight < mTotalWidth) ? mTotalHeight : mTotalWidth;
//除以2即为饼图的半径
mRadius = (shortSideLength) / 2;
//减少半径，为外部内容腾出显示空间
mRadius -= 50;
//设置RectF的坐标
mRectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
}

绘制延长线和字
这里我们回看设计稿，引入数学中的象限概念，将其分为4个象限

可以发现，在不同的象限中，延长线的延申方向是不一样的，所以要按照象限来对延长线和文字进行处理，这里限于篇幅不详细讲解算法思路了，这部分自己去思考一下也是蛮有意思的：

private void drawLineAndText(Canvas canvas) {
//算出延长线转折点相对起点的正余弦值
double offsetRadians = Math.atan(yOffset / xOffset);
float cosOffset = (float) Math.cos(offsetRadians);
float sinOffset = (float) Math.sin(offsetRadians);

for (PieEntry pie : mPieLists) {
//延长点的位置处于扇形的中间
float halfAngle = pie.getCurrentStartAngle() + pie.getSweepAngle() / 2;
float cos = (float) Math.cos(Math.toRadians(halfAngle));
float sin = (float) Math.sin(Math.toRadians(halfAngle));
//通过正余弦算出延长点的位置
float xCirclePoint = (mRadius + distance) * cos;
float yCirclePoint = (mRadius + distance) * sin;

//将饼图分为4个象限，从右上角开始顺时针，每90度分为一个象限
int quadrant = (int) (halfAngle + 90) / 90;
//初始化延长线的起点、转折点、终点
float xLineStartPoint = 0;
float yLineStartPoint = 0;
float xLineTurningPoint = 0;
float yLineTurningPoint = 0;
float xLineEndPoint = 0;
float yLineEndPoint = 0;
//创建要显示的文本
String text = pie.getLabel() + " " +
new DecimalFormat(“#.#”).format(pie.getPercentage()) + “%”;
//延长点、起点、转折点在同一条线上
//不同象限转折的方向不同
float cosLength = bigCircleRadius * cosOffset;
float sinLength = bigCircleRadius * sinOffset;
switch (quadrant) {
case 0:
xLineStartPoint = xCirclePoint + cosLength;
yLineStartPoint = yCirclePoint - sinLength;
xLineTurningPoint = xLineStartPoint + xOffset;
yLineTurningPoint = yLineStartPoint - yOffset;
xLineEndPoint = xLineTurningPoint + extend;
yLineEndPoint = yLineTurningPoint;
mPaint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);
break;
case 1:
xLineStartPoint = xCirclePoint + cosLength;
yLineStartPoint = yCirclePoint + sinLength;
xLineTurningPoint = xLineStartPoint + xOffset;
yLineTurningPoint = yLineStartPoint + yOffset;
xLineEndPoint = xLineTurningPoint + extend;
yLineEndPoint = yLineTurningPoint;
mPaint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);
break;
case 2:
xLineStartPoint = xCirclePoint - cosLength;
yLineStartPoint = yCirclePoint + sinLength;
xLineTurningPoint = xLineStartPoint - xOffset;
yLineTurningPoint = yLineStartPoint + yOffset;
xLineEndPoint = xLineTurningPoint - extend;
yLineEndPoint = yLineTurningPoint;
mPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);
break;
case 3:
xLineStartPoint = xCirclePoint - cosLength;
yLineStartPoint = yCirclePoint - sinLength;
xLineTurningPoint = xLineStartPoint - xOffset;
yLineTurningPoint = yLineStartPoint - yOffset;
xLineEndPoint = xLineTurningPoint - extend;
yLineEndPoint = yLineTurningPoint;
mPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);
break;
default:
}
//绘制延长线
canvas.drawLine(xLineStartPoint, yLineStartPoint, xLineTurningPoint, yLineTurningPoint, mPaint);
canvas.drawLine(xLineTurningPoint, yLineTurningPoint, xLineEndPoint, yLineEndPoint, mPaint);
}
}

看一下出来的效果：

宽高适配
到这里可以说已经完成了设计师想要的效果了，是不是挺好看的呢^ ^ 不过可以看到还是有显示不全的问题，特别是在极端数据的情况，比如将数据设成下面的样子：

mPieLists.add(new PieEntry(0.01F, “服装”));
mPieLists.add(new PieEntry(49.98F, “数码产品”));
mPieLists.add(new PieEntry(0.01F, “保健品”));
mPieLists.add(new PieEntry(49.98F, “户外运动用品”));

所以接下来，我们要对饼图的大小进行自动适配。还是在创建RectF的方法中进行修改：

private void initRectF() {

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
//文字的高度
float textHeight = fontMetrics.bottom - fontMetrics.top + fontMetrics.leading;
//延长线的纵向长度
float lineHeight = distance + bigCircleRadius + yOffset;
//延长线的横向长度
float lineWidth = distance + bigCircleRadius + xOffset + extend;
//求出饼状图加延长线和文字所有内容需要的长方形空间的长宽比
mScale = mTotalWidth / (mTotalWidth + lineHeight * 2 + textHeight * 2 - lineWidth * 2);

//长方形空间其短边的长度
float shortSideLength;
//通过宽高比选择短边
if (mTotalWidth / mTotalHeight >= mScale) {
shortSideLength = mTotalHeight;
} else {
shortSideLength = mTotalWidth / mScale;
}
//饼图所在的区域为正方形，处于长方形空间的中心
//空间的高度减去上下两部分文字显示需要的高度，除以2即为饼图的半径
mRadius = shortSideLength / 2 - lineHeight - textHeight;
//设置RectF的坐标
mRectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
}

而且作为严谨的程序猿，肯定不允许有多余的空间浪费掉，所以在XML中设置高度为wrap_content时，也要能按照宽度进行适配：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

学习福利

【Android 详细知识点思维脑图（技能树）】

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。

这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

由于篇幅有限，这里以图片的形式给大家展示一小部分。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

的技术体系对大家有一个方向参考。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

2401_84556480

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
2024年最全Android自定义View，画一个好看带延长线的饼状图，全套教学资料

一共十个专题，包括了Android进阶所有学习资料，Android进阶视频，Flutter，java基础，kotlin，NDK模块，计算机网络，数据结构与算法，微信小程序，面试题解析，framework源码！这里需要注意的是：第一个扇形的起始角度为-90度，因为在自定义View中，0度是从右边开始的，也就是坐标轴中的X轴正方向那条线开始顺时针增加，而我们想让扇形从Y轴的上方这条线开始顺时针绘制，所以需要减90°。目前只画了点跟圈，后续还有延长线和文字，也就是饼图在View中占的空间会越来越小。
复制链接

扫一扫