美文网首页
自定义View 仪表盘

自定义View 仪表盘

作者: 卖炭少年炭治郎 | 来源:发表于2020-07-07 09:28 被阅读0次
package com.okay.testdemo.ui

import android.content.Context
import android.graphics.*
import android.os.Build
import android.support.annotation.RequiresApi
import android.util.AttributeSet
import android.view.View
import com.okay.testdemo.dp
import kotlin.math.cos
import kotlin.math.sin

/**
 * @author : zyl
 * @desc :
 */
val RADIUS = 150.dp

val OPEN_ARC = 120

val DASH_WIDTH = 2.dp

val DASH_HEIGHT = 10.dp

val DASH_COUNT = 20

val POINTER_POSITION = 10

val POINT_LENGTH = 120.dp

class DashboardView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
    }

    private val arcPath = Path()

    private val dashPath = Path()

    private lateinit var pathDashPathEffect: PathDashPathEffect

    init {
    }

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        arcPath.addArc(
            width / 2 - RADIUS,
            height / 2 - RADIUS,
            width / 2 + RADIUS,
            height / 2 + RADIUS,
            150f,
            360f - OPEN_ARC
        )
        dashPath.addRect(0f, 0f, DASH_WIDTH, DASH_HEIGHT, Path.Direction.CCW)
        val pathMeasure = PathMeasure(arcPath, false)

        //由于最后一个刻度不够画了 所以计算的时候需要减去一个刻度的宽度
        pathDashPathEffect = PathDashPathEffect(
            dashPath,
            (pathMeasure.length - DASH_WIDTH) / DASH_COUNT,
            0f,
            PathDashPathEffect.Style.ROTATE
        )
    }

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //画弧
        canvas.drawPath(arcPath, paint)

        //画刻度
        paint.pathEffect = pathDashPathEffect
        canvas.drawPath(arcPath, paint)
        paint.pathEffect = null

        //画指针
        val angle =
            (90 + OPEN_ARC / 2 + (360 - OPEN_ARC) / DASH_COUNT * POINTER_POSITION).toDouble()
        canvas.drawLine(
            width / 2f,
            height / 2f,
            width / 2f + (POINT_LENGTH * cos(Math.toRadians(angle))).toFloat(),
            height / 2f + (POINT_LENGTH * sin(Math.toRadians(angle))).toFloat(),
            paint
        )
    }
}













相关文章

  • 仿汽车速度仪表盘

    问题 如何线性颜色变化? 完整的自定义View 调用: 参考资料 自定义View实战(一) 汽车速度仪表盘

  • Android自定义控件

    自定义 View 之高仿支付宝芝麻信用分仪表盘效果 最近写的一个自定义 View,仿了下支付宝新旧版的芝麻信用分的...

  • 自定义View 仪表盘

  • Android View(转)

    自定义View的原理自定义View基础 - 最易懂的自定义View原理系列自定义View Measure过程 - ...

  • 自定义View系列

    自定义View1---知识储备自定义View2---View Measure过程自定义View3---View L...

  • 自定义View5---完整的自定义View

    移步自定义View系列 1.自定义view的分类自定义单一view(不含子view)继承view继承特定view如...

  • 自定义View

    自定义View系列文章 自定义View view向上滚动

  • 自定义View(一) 自定义View的概述

    不怕跌倒,所以飞翔 自定义View概述 1.自定义View分类 自定义View 直接继承View主要是绘制 自定义...

  • Android自定义View之仪表盘

    Android自定义View之仪表盘 欢迎访问我的博客 又是新系列(坑) 感觉都很零碎,能积累一些是一些了 背景 ...

  • 仪表盘

    Dashboard View 自定义仪表盘 写的第一篇博客,代码有点乱,单元测试的包名都忘了修改。附上效果图das...

网友评论

      本文标题:自定义View 仪表盘

      本文链接:https://www.haomeiwen.com/subject/ruooqktx.html