iOS Drawing

Drawing in iOS

Paths, Strokes, and Fills

The code below draws a circle with a vertical line down the center.

import UIKit

@IBDesignable

class PushButtonView: UIButton {
    override func draw(_ rect: CGRect) {
        // Circle
        let path = UIBezierPath(ovalIn: rect)
        UIColor.red.setFill()
        path.fill()

        // Vertical Line
        let linePath = UIBezierPath()
        let lineLength = bounds.width * 0.8

        // Position cursor at a CGPoint
        linePath.move(to: CGPoint(x: bounds.width/2.0, y: bounds.height/2.0 - lineLength/2.0))

        // Draw line to a CGPoint
        linePath.addLine(to: CGPoint(x: bounds.width/2.0, y: bounds.height/2.0 + lineLength/2.0))

        // Configure stroke and draw
        linePath.lineWidth = 3.0
        UIColor.white.setStroke()
        linePath.stroke()
    }
}

Frame vs Alignment Rectangles

References

• Difference between Frame and Alignment Rectangle - Stack Overflow

Layers

References

• Apple Developer *Layer
• UIView vs CALayer - Stack Overflow
• Views vs Layers - Rapture in Venice

References

• Apple developer
  • Graphics and drawing overview
• Core Graphics With Swift Tutorial - Ray Wenderlich
• Core Graphics Tutorial - Techopedia