自定義View之icon集合

前言

此篇主要是關於一些icon圖使用自定義view的方式繪製出來
實際開發中不建議這麼做,因爲影響開發效率,而我寫這一篇,純粹是閒的:)
不涉及適配,部分屬性因爲全部是在一個view裏繪製,所以對於單個而言會有重複.

效果圖

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);
    }

最後

Github 項目地址
有不對的地方歡迎留言指正,不勝感激.