仪表盘 DashboardView

最新推荐文章于 2024-05-16 10:07:35 发布
最新推荐文章于 2024-05-16 10:07:35 发布
阅读量197 收藏
点赞数
文章标签： swift
原文链接：https://my.oschina.net/u/216465/blog/873288
版权

运行效果如下： 

//
//  AKDashboardView.swift
//  AKSwifty
//
//  Created by wangcong on 01/04/2017.
//  Copyright © 2017 ApterKing. All rights reserved.
//

import UIKit

// 指针
class AKNeedleView: UIView {
    
    public var color = UIColor.red {
        didSet {
            self.setNeedsDisplay()
        }
    }
    
    convenience init() {
        self.init(frame: CGRect.zero)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clear
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(UIColor.clear.cgColor)
        context?.setStrokeColor(color.cgColor)
        
        // 绘制第一条线
        context?.setLineWidth(1)
        context?.move(to: CGPoint(x: 0, y: rect.height / 2.0))
        context?.addLine(to: CGPoint(x: rect.width * 2.0 / 3.0, y: rect.height / 2.0))
        context?.drawPath(using: CGPathDrawingMode.fillStroke)
        
        // 绘制第二条线
        context?.setLineWidth(2)
        context?.setLineCap(CGLineCap.round)
        context?.move(to: CGPoint(x: rect.width * 2.0 / 3.0, y: rect.height / 2.0))
        context?.addLine(to: CGPoint(x: rect.width - 12, y: rect.height / 2.0))
        context?.drawPath(using: CGPathDrawingMode.fillStroke)
        
        // 绘制小圆圈
        context?.setLineWidth(2)
        context?.addArc(center: CGPoint(x: rect.width - 8, y: rect.height / 2.0), radius: 4, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
        context?.drawPath(using: CGPathDrawingMode.fillStroke)
        
        // 绘制小圆边缘阴影
        context?.setStrokeColor(color.withAlphaComponent(0.5).cgColor)
        context?.addArc(center: CGPoint(x: rect.width - 8, y: rect.height / 2.0), radius: 6, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
        context?.strokePath()    }
    
}

class AKDashboardView: UIView {
    
    // Edge
    private lazy var outEdgeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.white.cgColor
        shapeLayer.lineWidth = 2.0
        shapeLayer.lineCap = kCALineCapButt
        return shapeLayer
    }()
    
    private lazy var inEdgeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.white.cgColor
        shapeLayer.lineWidth = 2.0
        shapeLayer.lineCap = kCALineCapButt
        return shapeLayer
    }()
    
    public var edgeColor = UIColor.white {
        didSet {
            self.outEdgeLayer.strokeColor = edgeColor.cgColor
            self.inEdgeLayer.strokeColor = edgeColor.cgColor
        }
    }
    
    public var edgeWidth: CGFloat = 2.0 {
        didSet {
            self.outEdgeLayer.lineWidth = edgeWidth
            self.resetAll()
        }
    }
    
    public var edgeSpacing: CGFloat = 40 {
        didSet {
            self.maskLayer.lineWidth = edgeSpacing
            self.longScaleLayer.lineWidth = edgeSpacing / 3
            self.shortScaleLayer.lineWidth = edgeSpacing / 4
            self.resetAll()
        }
    }
    
    // 长刻度
    private lazy var longScaleLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.white.cgColor
        shapeLayer.lineWidth = 40 / 6
        shapeLayer.lineCap = kCALineCapButt
        return shapeLayer
    }()
    public var longScaleColor = UIColor.white {
        didSet {
            longScaleLayer.strokeColor = longScaleColor.cgColor
        }
    }
    public var longScales: Int = 5 {
        didSet {
            resetLongScaleLayer()
            resetLongScaleTextLayer()
        }
    }
    
    // 长刻度文字
    private var longScaleTextLayer: CALayer = CALayer()
    public var longScaleTextColor = UIColor.white {
        didSet {
            guard let sublayers = longScaleTextLayer.sublayers else {
                return
            }
            for sublayer in sublayers {
                if let textLayer = sublayer as? CATextLayer {
                    textLayer.foregroundColor = longScaleTextColor.cgColor
                }
            }
        }
    }
    public var longScaleTexts: [String] = [] {
        didSet {
            resetLongScaleTextLayer()
        }
    }
    
    // 短刻度
    private lazy var shortScaleLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.white.cgColor
        shapeLayer.lineWidth = 40 / 8
        shapeLayer.lineCap = kCALineCapButt
        return shapeLayer
    }()
    public var shortScaleColor = UIColor.white {
        didSet {
            shortScaleLayer.strokeColor = shortScaleColor.cgColor
        }
    }
    
    public var shortScales: Int = 1 { // 短的刻度是：在长刻度区间内的分度值
        didSet {
            resetShortScaleLayer()
        }
    }
    
    // 进度条
    private lazy var maskLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 40
        shapeLayer.strokeStart = 0.0
        shapeLayer.strokeEnd = 0.0
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.white.cgColor
        return shapeLayer
    }()
    
    private lazy var gradientLayer: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.green.cgColor, UIColor.orange.cgColor, UIColor.red.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0)
        return gradientLayer
    }()
    
    public var gradientColors: [UIColor] = [UIColor.green, UIColor.orange, UIColor.red] {
        didSet {
            var cgColors = [CGColor]()
            for color in gradientColors {
                cgColors.append(color.cgColor)
            }
            gradientLayer.colors = cgColors
        }
    }
    
    // 指针
    private var needleView = AKNeedleView()
    public var needleColor: UIColor = UIColor.white {
        didSet {
            needleView.color = needleColor
        }
    }
    
    // 设置刻度
    public var dashScale: CGFloat = 0.0 {
        didSet {
            setDashSacle(dashScale, animated: false)
        }
    }
    
    convenience init() {
        self.init(frame: CGRect.zero)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        gradientLayer.mask = maskLayer
        self.layer.addSublayer(gradientLayer)
        
        shortScaleLayer.lineWidth = edgeSpacing / 4
        self.layer.addSublayer(shortScaleLayer)
        
        longScaleLayer.lineWidth = edgeSpacing / 3
        self.layer.addSublayer(longScaleLayer)
        
        self.layer.addSublayer(outEdgeLayer)
        self.layer.addSublayer(inEdgeLayer)
        
        needleView.layer.anchorPoint = CGPoint(x: 1, y: 0.5)
        self.addSubview(needleView)
        
        self.layer.addSublayer(longScaleTextLayer)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = self.bounds
        longScaleTextLayer.frame = self.bounds
        resetAll()
    }
    
    // 重置Layer 及View
    fileprivate func resetAll() {
        
        resetLongScaleLayer()
        resetLongScaleTextLayer()
        resetShortScaleLayer()
        
        let radius = frame.size.width / 2 > frame.size.height ?
            frame.size.height - edgeWidth / 2: frame.size.width / 2 - edgeWidth / 2
        
        maskLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height), radius: radius - edgeWidth / 2 - edgeSpacing / 2, startAngle: CGFloat(Float.pi), endAngle: CGFloat(Float.pi * 2), clockwise: true).cgPath
        
        outEdgeLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height), radius: radius, startAngle: CGFloat(Float.pi), endAngle: CGFloat(Float.pi * 2), clockwise: true).cgPath
        
        inEdgeLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height), radius: radius - edgeWidth / 2 - edgeSpacing, startAngle: CGFloat(Float.pi), endAngle: CGFloat(Float.pi * 2), clockwise: true).cgPath
        
        needleView.frame = CGRect(x: frame.size.width / 2 - radius + edgeSpacing - 2 * edgeWidth, y: frame.size.height - 15 / 2, width: radius - edgeSpacing + 2 * edgeWidth, height: 15)
    }
    
    fileprivate func resetLongScaleLayer() {
        let radius = frame.size.width / 2 > frame.size.height ?
            frame.size.height - edgeWidth / 2: frame.size.width / 2 - edgeWidth / 2
        let longScaleRadius = radius - edgeWidth / 2 - edgeSpacing / 6
        let C = CGFloat.pi * longScaleRadius
        longScaleLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height), radius: longScaleRadius, startAngle: CGFloat(Float.pi), endAngle: CGFloat(Float.pi * 2), clockwise: true).cgPath
        longScaleLayer.lineDashPattern = [2, NSNumber(value: Float((C - CGFloat(2 * longScales)) / CGFloat(longScales - 1)))]
    }
    
    fileprivate func resetLongScaleTextLayer() {
        
        if let sublayers = self.longScaleTextLayer.sublayers {
            for sublayer in sublayers {
                sublayer.removeFromSuperlayer()
            }
        }
        
        let textSize: CGFloat = 12
        let radius = frame.size.width / 2 > frame.size.height ?
            frame.size.height - edgeWidth / 2: frame.size.width / 2 - edgeWidth / 2
        let longScaleTextRadius = radius - edgeWidth / 2 - edgeSpacing / 6 - textSize
        let angleSpacing = CGFloat.pi / CGFloat(longScales - 1)
        
        var angle = CGFloat.pi
        for index in 0 ..< longScales {
            let textLayer = CATextLayer()
            textLayer.foregroundColor = longScaleTextColor.cgColor
            textLayer.fontSize = 10
            textLayer.string = index >= longScaleTexts.count ? "" : longScaleTexts[index % longScaleTexts.count]
            textLayer.allowsEdgeAntialiasing = true
            textLayer.contentsScale = UIScreen.main.scale
            textLayer.alignmentMode = kCAAlignmentCenter
            
            let x = longScaleTextRadius * cos(angle)
            let y = longScaleTextRadius * sin(angle)
            textLayer.frame = CGRect(origin: CGPoint(x: self.frame.size.width / 2.0 + x - textSize / 2.0, y: self.frame.size.height + y - (index == 0 || index == longScales - 1 ? textSize : textSize / 2.0)), size: CGSize(width: 12, height: 12))
            angle += angleSpacing
            
            self.longScaleTextLayer.addSublayer(textLayer)
        }
        
    }
    
    fileprivate func resetShortScaleLayer() {
        let radius = frame.size.width / 2 > frame.size.height ?
            frame.size.height - edgeWidth / 2: frame.size.width / 2 - edgeWidth / 2
        let shortScaleRadius = radius - edgeWidth / 2 - edgeSpacing / 8
        let C = CGFloat.pi * shortScaleRadius
        let realShortScales = (longScales - 1) * (shortScales + 1) + 1
        shortScaleLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height), radius: shortScaleRadius, startAngle: CGFloat(Float.pi), endAngle: CGFloat(Float.pi * 2), clockwise: true).cgPath
        shortScaleLayer.lineDashPattern = [2, NSNumber(value: Float((C - CGFloat(2 * realShortScales)) / CGFloat(realShortScales - 1)))]
    }
    
    // MARK: 设置dashScale
    public func setDashSacle(_ scale: CGFloat, animated: Bool) {
        let realScale = scale > 1.0 ? 1.0 : (scale < 0 ? 0 : scale)
        if animated {
            let strokeAnim = CABasicAnimation(keyPath: "strokeEnd")
            strokeAnim.duration = 0.25
            strokeAnim.toValue = realScale
            strokeAnim.fillMode = kCAFillModeForwards
            strokeAnim.isRemovedOnCompletion = false
            maskLayer.add(strokeAnim, forKey: "strokeEnd")
        } else {
            self.maskLayer.strokeEnd = realScale
        }
        
        let rotatedAnim = CABasicAnimation(keyPath: "transform.rotation")
        rotatedAnim.duration = animated ? 0.25 : 0.01
        rotatedAnim.toValue = realScale * CGFloat.pi
        rotatedAnim.isRemovedOnCompletion = false
        rotatedAnim.fillMode = kCAFillModeForwards
        needleView.layer.add(rotatedAnim, forKey: "transform.rotation")
    }
}

** 用法 **

        let dashboardView = AKDashboardView(frame: CGRect(x: (UIScreen.main.bounds.size.width - 300) / 2.0, y: 200, width: 300, height: 150))
        dashboardView.gradientColors = [UIColor.green, UIColor.orange, UIColor.red]
        dashboardView.needleColor = UIColor.white
        dashboardView.shortScaleColor = UIColor.white.withAlphaComponent(0.6)
        dashboardView.shortScales = 5
        dashboardView.longScales = 11
        dashboardView.longScaleColor = UIColor.white
        dashboardView.longScaleTexts = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
        dashboardView.setDashSacle(0.8, animated: true)

Demo下载地址

转载于:https://my.oschina.net/u/216465/blog/873288

chuangketong9015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android代码-DashboardView
08-06
DashboardView Android 自定义View 仪表盘 HOW TO USE gradle root build.gradle: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } moudle build.gradle: compile 'com.github.SuperKung:DashboardView:1.2.1' xml more app:startNumber app:maxNumber app:backgroundColor app:progressColor app:startProgressColor app:endProgressColor app:progressStrokeWidth app:tikeStrArray app:tikeStrColor app:tikeStrSize app:startNumber app
dashboard android,DashboardView
weixin_32923817的博客
05-27 144
Android 自定义 View 仪表盘HOW TO USEgradleroot build.gradle:allprojects {repositories {...maven { url 'https://jitpack.io' }}}moudle build.gradle:compile 'com.github.SuperKung:DashboardView:1.2.1'xmlandroid...
推荐开源项目：DashboardView - 自定义仪表盘控件库
最新发布
gitblog_00049的博客
05-16 427
推荐开源项目：DashboardView - 自定义仪表盘控件库 项目地址:https://gitcode.com/woxingxiao/DashboardView 在移动应用开发中，有时候我们需要为用户提供一种直观且吸引人的数据展示方式，这时一款灵活、易定制的仪表盘控件就显得尤为重要。今天，我要向大家推荐的是由woxingxiao开发的开源项目——DashboardView。这是一款专门为And...
Jenkins 视图管理Dashboard View（学习笔记十七）
weixin_34414650的博客
05-11 824
1.目标 创建的作业多了，在一个视图中展示多有不便。因此需要使用 Dashboard View 将作业按照后缀进行分类展示。 如下图，可以按照后缀添加CODE，TEST和OTHER视图。 2.环境说明 Dashboard View 插件 3.配置 （1）点击【All】后面的『+...
Android仪表盘自定View
zzf0521的博客
06-02 540
速度区间
Android仪表盘源码
05-30
一种常见的方法是使用自定义View，例如在这个DashboardViewDemo-master项目中，开发者可能创建了一个名为`DashboardView`的自定义View类，该类继承自Android的基础View类，并实现了绘制仪表盘的各种图形元素，如指针...
Android 自定义View 仪表盘
01-25
本文将深入探讨如何创建一个自定义的“仪表盘”View，以实现一个美观且功能丰富的界面元素。我们将覆盖以下知识点： 1. **自定义View的基本结构**： 创建自定义View通常涉及继承现有View类，如`View`或`ViewGroup`...
andoird自定义仪表盘控件
07-23
本文将深入探讨如何在Android中创建一个自定义的仪表盘控件。仪表盘控件通常用于展示数据，如速度、电量或者进度等，它能以直观且动态的方式呈现信息，使用户能够快速理解应用程序的状态。 首先，我们需要理解...
android 仪表盘 仪表盘的分了不同的颜色
12-14
在这个项目中，开发者创建了一个自定义的`DashboardView`类，继承自`View`或`ViewGroup`，以便根据需求定制仪表盘的显示效果，包括颜色、刻度、指针等元素。 2. **绘图（Drawing）**： 自定义视图的核心在于`...
android 进度条渐进渐出、仪表盘旋转
10-31
在Android开发中，UI设计是用户体验的关键部分，而进度条（ProgressBar）和仪表盘（Dashboard）作为常见的反馈组件，能够有效地展示应用的加载状态或任务完成进度。本篇将深入探讨如何实现Android进度条的渐进渐出...
swift-HXCharts包括了仪表盘柱状图圆形图折线图等四种绘图
08-15
HXCharts 包括了仪表盘、柱状图、圆形图、折线图等四种绘图
iOS仿支付宝芝麻信用分数仪表盘动画效果
09-01
主要为大家详细介绍了iOS仿支付宝芝麻信用分数仪表盘动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 自定义View 仪表盘 DashboardView 的实现
热门推荐
博客
06-27 1万+
有天上班，老板突然扔给我一张图，说：这个东西能不能做一下。我说应该可以。然后老板那就没有下文了，我想既然问了，那我就抽空做一下。当我做出来的时候去找老板，我说上次你给我发的那个图，我已经做出来了，您要不要看一下。老板说，不用了，不需要了。不需要了。。 不需要了 。。 不需要了！！听到这句话我的内心是几乎是崩溃的，哭哭。好吧，既然这样，那么就开源出来吧
码表dashboard仪表盘自定义View的开发
wujiawei2010的博客
06-02 436
新进公司,让做一个码表,很简单的,一个速度指针,一个方向指针,一个速度数值显示,还要实现表盘样式的切换,以及提供速度和方向的查询方法, 找别人的代码,都是用canvas来实现指针的转动,我也想这么做,但是室友表示这么做太麻烦,用属性动画就可以实现指针转动了. 代码周末再来帖,现在就这样!
Android自定义View之仪表盘
小海编码日记
04-12 1091
新建项目，新建DashBoardView继承自View实现OnGlobalLayoutListener接口，并重写OnDraw方法。 使用OnGlobalLayoutListener接口需要重写onGlobalLayout方法，在这个方法中我们将获取View的宽高。新建如下变量：private Context mContext; private Paint mCirclePaint,mDe
View系列 : View项目：汽车仪表盘，圆盘
C++ JAVA的专栏
03-28 3599
1：汽车仪表盘 2 ：效果分解 汽车 仪表盘
XAF之向DashboardView中动态添加ViewItem
压碎起重机
04-09 1567
在Application Model中添加 DashboardView的ViewItem是很方便的，但有时候我们也需要在代码中动态地添加ViewItem。 在下面的示例中，MyDashboardView含有两个ListView（图1），点击一个Action新加一个ListView（图2）。 图1 图2 //simpleAction1_Execute中的代码可放在ViewCo
XAF之Dashboard
压碎起重机
04-07 1680
Dashbord View是一种较特殊的View，它可以在一个Frame里紧密地显示多个View。          DashboardView中的每个View由一个DashboardViewItem表示。在Application Model中DashboardViewItem节点下的IModelDashboardViewItem.View属性对应了该DashboradViewItem。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值