bickster bickster - 3 years ago 443
iOS Question

Draw male and female gender symbols in iOS

Does anyone know how to programmatically draw the male and female gender signs in iOS like the ones below?

Gender symbols

Answer Source

An example for drawing the female symbol. First, make a Layer using UIBezierPath to draw it:

import UIKit

class FemaleLayer: CAShapeLayer {

    override var frame: CGRect {
        didSet{
            self.draw()
        }
    }

    private func draw() {
        self.lineWidth = 20.0
        self.fillColor = UIColor.clear.cgColor
        self.strokeColor = UIColor.black.cgColor

        let path = UIBezierPath()
        let sideLength = fmin(self.frame.width, self.frame.height)
        let circlesRadius = (sideLength / 2.0 - self.lineWidth) * 0.6
        let circleCenterY = self.bounds.midY * 0.8

        path.addArc(withCenter: CGPoint(x:self.bounds.midX, y:circleCenterY), radius: circlesRadius, startAngle: 0.0, endAngle: 2 * CGFloat.pi, clockwise: true)

        let circleBottomY = circleCenterY + circlesRadius
        path.move(to: CGPoint(x: self.bounds.midX, y: circleBottomY))
        path.addLine(to: CGPoint(x: self.bounds.midX, y: circleBottomY + circlesRadius))
        path.move(to: CGPoint(x: self.bounds.midX * 0.6, y: circleBottomY + circlesRadius * 0.5))
        path.addLine(to: CGPoint(x: self.bounds.midX * 1.4, y: circleBottomY + circlesRadius * 0.5))

        self.path = path.cgPath
    }
}

Then use it by adding the layer to a UIView:

let femaleLayer = FemaleLayer()
femaleLayer.frame = self.view.bounds
self.view.layer.addSublayer(femaleLayer)

The final result:
enter image description here

Updated, for male:

class MaleLayer: CAShapeLayer {
    override var frame: CGRect {
        didSet{
            self.draw()
        }
    }

    private func draw() {
        self.lineWidth = 20.0
        self.fillColor = UIColor.clear.cgColor
        self.strokeColor = UIColor.black.cgColor

        let path = UIBezierPath()
        let sideLength = fmin(self.frame.width, self.frame.height)
        let circlesRadius = (sideLength / 2.0 - self.lineWidth) * 0.6
        let circleCenterX = self.bounds.midX * 0.9
        let circleCenterY = self.bounds.midY * 1.2

        path.addArc(withCenter: CGPoint(x:circleCenterX, y:circleCenterY), radius: circlesRadius, startAngle: 0.0, endAngle: 2 * CGFloat.pi, clockwise: true)

        let circleRightTopX = circleCenterX + circlesRadius * 0.686
        let circleRightTopY = circleCenterY - circlesRadius * 0.686
        let lineLength = circlesRadius * 0.7
        path.move(to: CGPoint(x: circleRightTopX, y: circleRightTopY))
        path.addLine(to: CGPoint(x: circleRightTopX + lineLength, y: circleRightTopY - lineLength))
        path.move(to: CGPoint(x: circleRightTopX, y: circleRightTopY - lineLength))
        path.addLine(to: CGPoint(x: circleRightTopX + lineLength + self.lineWidth / 2.0, y: circleRightTopY - lineLength))
        path.move(to: CGPoint(x: circleRightTopX + lineLength, y: circleRightTopY - lineLength))
        path.addLine(to: CGPoint(x: circleRightTopX + lineLength , y: circleRightTopY))

        self.path = path.cgPath
    }
}

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download