Swift version: 5.2
You've always been able to have custom views inside your apps, but if you're having a hard time visualizing how they look at design time then you should try @IBDesignable
: it lets you see exactly how your custom views look inside IB, and if you combine it with @IBInspectable
you can even adjust your view's design there too.
This example view draws an ellipse that fills itself. If you add this to your project, create a view, then set that view to have this custom subclass, you'll see an ellipse appear immediately. You can move the view or resize it, and the ellipse will be updated. Plus, because I used @IBInspectable
you can adjust the colors and stroke width right inside the attributes inspector, helping you make sure your UI looks exactly as you expect.
@IBDesignable class EllipseView: UIView {
@IBInspectable var strokeWidth: CGFloat = 0
@IBInspectable var fillColor: UIColor = UIColor.black
@IBInspectable var strokeColor: UIColor = UIColor.clear
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else { return }
let rectangle = bounds.insetBy(dx: strokeWidth / 2, dy: strokeWidth / 2)
context.setFillColor(fillColor.cgColor)
context.setStrokeColor(strokeColor.cgColor)
context.setLineWidth(strokeWidth)
context.addEllipse(in: rectangle)
context.drawPath(using: .fillStroke)
}
}
SPONSORED Would you describe yourself as knowledgeable, but struggling when you have to come up with your own code? Fernando Olivares has a new book containing iOS rules you can immediately apply to your coding habits to see dramatic improvements, while also teaching applied programming fundamentals seen in refactored code from published apps.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Available from iOS 8.0
This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.
Link copied to your pasteboard.