我们先看下这个UI控件的效果图
其实自定义控件,上一次有一篇文章写过了,主要用到的是@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
如果你还想设置更多的属性,当然依葫芦画瓢嘛!这个控件,就可以完整的使用在您的项目当中了.