create a view that shows the union jack in 3 different sizes in swift

Here's the code:

import UIKit

class UnionJackView: UIView {
    let smallSize: CGFloat = 60
    let mediumSize: CGFloat = 120
    let largeSize: CGFloat = 180
    override func draw(_ rect: CGRect) {
        // Draw the Union Jack in 3 different sizes
        drawUnionJack(size: smallSize, origin: CGPoint(x: 20, y: 20))
        drawUnionJack(size: mediumSize, origin: CGPoint(x: 120, y: 20))
        drawUnionJack(size: largeSize, origin: CGPoint(x: 240, y: 20))
    func drawUnionJack(size: CGFloat, origin: CGPoint) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = CGRect(origin: origin, size: CGSize(width: size, height: size))
        let width = size / 6
        let height = size / 2
        let topRect = CGRect(x: 0, y: 0, width: size, height: height)
        let topLayer = createRectLayer(rect: topRect, color: .red)
        let leftRect = CGRect(x: 0, y: height, width: width, height: height)
        let leftLayer = createRectLayer(rect: leftRect, color: .white)
        let rightRect = CGRect(x: size - width, y: height, width: width, height: height)
        let rightLayer = createRectLayer(rect: rightRect, color: .white)
        let midRect = CGRect(x: size / 2 - width / 2, y: height, width: width, height: height)
        let midLayer = createRectLayer(rect: midRect, color: .red)
        let bottomRect = CGRect(x: 0, y: size - height, width: size, height: height)
        let bottomLayer = createRectLayer(rect: bottomRect, color: .red)
        let mid2Rect = CGRect(x: size / 2 - width / 2, y: 0, width: width, height: height)
        let mid2Layer = createRectLayer(rect: mid2Rect, color: .red)
        let crossPath = UIBezierPath()
        let crossLayer = CAShapeLayer()
        crossLayer.strokeColor = UIColor.white.cgColor
        crossLayer.lineWidth = width
        // Add vertical line
        crossPath.move(to: CGPoint(x: size / 2, y: height))
        crossPath.addLine(to: CGPoint(x: size / 2, y: size - height))
        // Add horizontal line
        crossPath.move(to: CGPoint(x: 0, y: size / 2))
        crossPath.addLine(to: CGPoint(x: size, y: size / 2))
        crossLayer.path = crossPath.cgPath
    func createRectLayer(rect: CGRect, color: UIColor) -> CAShapeLayer {
        let layer = CAShapeLayer()
        layer.frame = rect
        let path = UIBezierPath(rect: rect)
        layer.fillColor = color.cgColor
        layer.path = path.cgPath
        return layer
2889 chars
74 lines

This code defines a UnionJackView class that inherits from UIView. The draw() method of this class is called when the view is displayed on screen. This method draws the Union Jack flag three times, with different sizes and positions.

The actual drawing is done using CAShapeLayer and UIBezierPath. The drawUnionJack() method takes a size and an origin as parameters, and creates a new CAShapeLayer that contains the flag. It then adds sublayers to this layer to draw the red and white rectangles, the red cross, and the white lines that intersect in the center.

The createRectLayer() method is a helper method that creates a CAShapeLayer for a rectangular path with the given rect and color.

To use this view, simply instantiate a UnionJackView and add it to your view hierarchy. For example:

let unionJackView = UnionJackView()
67 chars
3 lines

gistlibby LogSnag