自定义View之icon集合

最新推荐文章于 2023-07-18 08:36:30 发布

Litchiny

最新推荐文章于 2023-07-18 08:36:30 发布

阅读量1k

点赞数 1

分类专栏： Android_View 自定义View 文章标签： icon集合自定义view

本文链接：https://blog.youkuaiyun.com/liuwanyouyue/article/details/85647392

版权

Android_View 同时被 2 个专栏收录

7 篇文章

订阅专栏

自定义View

6 篇文章

订阅专栏

本文介绍了如何使用自定义View来绘制电池、卡车和购物车等图标，详细讲解了每个图标的绘制思路和关键代码，虽然在实际开发中不推荐这种方法，但作为一个学习和实践的过程。文章提供了一个Kotlin和两个Java的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

此篇主要是关于一些icon图使用自定义view的方式绘制出来
实际开发中不建议这么做,因为影响开发效率,而我写这一篇,纯粹是闲的:)
不涉及适配,部分属性因为全部是在一个view里绘制,所以对于单个而言会有重复.
部分icon地址

效果图

name

1. 电池

思路: Rect+Path+Rect+Text
语言: Kotlin
关键代码:

  override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        rectPaint?.style = Paint.Style.FILL
        resetPaintColor(rectPaint)
        canvas.drawRect(Rect(allStartX + topRectStartX, allStartY, allStartX + topRectX + topRectStartX, topRectY + allStartY), rectPaint!!)   //画实心
        rectPaint?.style = Paint.Style.STROKE
        canvas.drawPath(path!!, rectPaint!!)
        resetPaintColor(textPaint)
        if (completeProgress <= lowBattery) {
            textPaint?.textSize = (rectX * 8 / 5).toFloat()
            canvas.drawText("!", (allStartX + rectX / 2 - baseInside).toFloat(), (rectY - baseInside + allStartY).toFloat(), textPaint!!)
        } else {
            rectPaint?.style = Paint.Style.FILL
            rectPaint?.color = Color.GREEN
            val num = (rectY - 2 * baseInside) * (100 - completeProgress) / 100 + allStartY + topRectY + baseInside
            canvas.drawRect(Rect(allStartX + baseInside, num, allStartX + rectX - baseInside, rectY + topRectY - baseInside + allStartY), rectPaint!!)
        }
        textPaint?.textSize = textSize.toFloat()
        canvas.drawText(completeProgress.toString() + "%", rectX * 1.4f + allStartX, (distanceH / 2 + baseInside * 2).toFloat(), textPaint!!)
    }

2. 卡车

思路: RoundRect+Path+Circle(白色背景)+Circle
语言: Java
关键代码:

 private void drawCar(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        int startPath = startRect + baseWidth;
        canvas.drawRoundRect(new RectF(startRect, startRect, startPath, startPath), 5, 5, mPaint);
        mPath.reset();
        mPath.moveTo(startPath, startRect + baseWidth / 3);
        mPath.lineTo(startPath + baseWidth / 3, startRect + baseWidth / 3);
        mPath.lineTo(startPath + baseWidth / 2, startRect + baseWidth / 5 * 4);
        mPath.lineTo(startPath + baseWidth / 2, startRect + baseWidth);
        mPath.lineTo(startPath, startRect + baseWidth);
        mPath.close();
        canvas.drawPath(mPath, mPaint);
        int raidus = baseWidth / 5;
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(startPath + raidus, startRect + baseWidth, raidus, mPaint);
        canvas.drawCircle(startRect + raidus * 1.5f, startRect + baseWidth, raidus, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimaryDark));
        canvas.drawCircle(startPath + raidus, startRect + baseWidth, raidus, mPaint);
        canvas.drawCircle(startRect + raidus * 1.5f, startRect + baseWidth, raidus, mPaint);
    }

3. 购物车

思路: Path+Path+Circle
语言: Java
关键代码:

 private void drawShopCart(Canvas canvas) {
        int y = startRect ;
        int x = startRect + baseWidth * 3;
        mPath.reset();
        mPath.moveTo(x, y);
        mPath.lineTo(x + baseWidth / 4, y);
        mPath.lineTo(x + baseWidth / 2, y + baseWidth);
        mPath.lineTo(x + baseWidth / 4, y + baseWidth / 4 * 5);
        mPath.lineTo(x + baseWidth / 4 * 5, y + baseWidth / 4 * 5);
        canvas.drawPath(mPath, mPaint);
        mPath.reset();
        mPath.moveTo(x + baseWidth / 4 + 5, y + baseWidth / 12 * 5);
        mPath.lineTo(x + baseWidth * 5 / 4, y + baseWidth / 12 * 5);
        mPath.lineTo(x + baseWidth, y + baseWidth);
        mPath.lineTo(x + baseWidth / 2, y + baseWidth);
        mPath.close();
        canvas.drawPath(mPath, mPaint);
        int raidus = baseWidth / 8;
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(x + baseWidth / 4 * 5 - raidus, y + baseWidth / 4 * 5 + raidus * 2, raidus, mPaint);
        canvas.drawCircle(x + baseWidth / 2 - raidus, y + baseWidth / 4 * 5 + raidus * 2, raidus, mPaint);
    }