The Swift Code之自定义UI控件,圆形进度控件

吴统威 on 编程语言 SWIFT | 2015-04-15 10:16:03.0

我们先看下这个UI控件的效果图

F3F9DA16-B316-4C57-9817-AD28FF904930.png

其实自定义控件,上一次有一篇文章写过了,主要用到的是@IBDesignable,@IBInspectable.这个圆形进度条主要功能点

1.图形的绘制

2.自定义控件

我们先创建一个UIView的一个子类,记得带上@IBDesignable,这个可以在xcode中显示

import UIKit
@IBDesignable
class CircleDataView:UIView{
}

加入几个基本属性,fontSize是控制字体大小,lineSize是控制圆圈的边框大小,process处理进度,progress是在xcode中设置进度

var fontSize:CGFloat = 25
var lineSize:CGFloat = 8
var process:CGFloat = 0
@IBInspectable var  progress:CGFloat{
   get{
      return process
   }
   set(newval) {
      let val = newval*3.6
      self.process = val
      setNeedsDisplay()
   }
}

然后重写drawRect方法,画图的步骤,参考上一篇文章<<IOS SWIFT基本画图教程>>

override func drawRect(rect: CGRect) {
        
        // println("开始画画.........")
        
        
        //获取画图上下文
        let context:CGContextRef = UIGraphicsGetCurrentContext(, 0, 0);
        

        //移动坐标
        let x = frame.size.width/2
        let y = frame.size.height/2
        var center = CGPointMake(x,y)
        
        
        //第一段文本
        let font:UIFont! = UIFont.systemFontOfSize(fontSize)
        var textAttributes: [String: AnyObject] = [
            NSForegroundColorAttributeName : Color.NAVBG,
            NSFontAttributeName:font
        ]
        
        
        // println("\(process)...............")
        
        let showp = process/3.6
        
        let str = NSAttributedString(string: "\(Int(showp))%", attributes: textAttributes)
        
        let size:CGSize = str.size()
        
        let stry:CGFloat = y-(size.height/2)
        let stryend:CGFloat = y+(size.height/2)
        
   
        str.drawAtPoint(CGPointMake(x-(size.width/2),stry-5))
        //第二段文本
        let tips:NSString = "保本保收益"
        var textAttributes2: [String: AnyObject] = [
            NSForegroundColorAttributeName : UIColor(white: 0.0, alpha: 1.0),
            NSFontAttributeName : UIFont.systemFontOfSize(fontSize/2)
        ]
        let tipsSize:CGSize = tips.sizeWithAttributes(textAttributes2)
        
        tips.drawAtPoint(CGPointMake(x-(tipsSize.width/2), stryend), withAttributes: textAttributes2)
        
        
        //灰色圆圈
        let radius = frame.size.width/2-20
        CGContextSetLineWidth(context, 2)
        
        CGContextSetStrokeColorWithColor(context, Color.HUISE.CGColor)
        CGContextAddArc(context, x, y, radius-4, 0, 360, 0)
        CGContextDrawPath(context, kCGPathStroke)
        
        
        //两个圆圈
        CGContextSetLineWidth(context, lineSize)
        
        CGContextSetStrokeColorWithColor(context, Color.YELLOW.CGColor)
        CGContextAddArc(context, x, y, radius, 0, 360, 0)
        CGContextDrawPath(context, kCGPathStroke)
        
        //
        CGContextSetStrokeColorWithColor(context,  Color.NAVBG.CGColor)
        process  = process * CGFloat(M_PI/180.0)
        CGContextAddArc(context, x, y, radius,0, process, 0)
   
        CGContextDrawPath(context, kCGPathStroke)
        
        
        // println("结束画画........")
        
        
    }

重点主要是在弧形的绘制:

弧度=角度乘以π后再除以180

角度=弧度除以π再乘以180

如果你还想设置更多的属性,当然依葫芦画瓢嘛!这个控件,就可以完整的使用在您的项目当中了.