[Swift] UIBezierPathで簡単なアイコンサンプルを作成する

はじめに

アプリ開発をしていて簡易的にアイコンを設定したいと思ったときに、
単純なものならUIBezierPathを使用してサックっと作成してしまうのも良いかもと思いサンプルを作成しました。

対象バージョン

• Xcode ver.11.6
• iOS ver 13.5.1

完成サンプル

UIBezierPathView.swift

import UIKit

class UIBezierPathView: UIView {
    private var type: Int = 0
    
    init(frame: CGRect, type: Int) {
        super.init(frame: frame)
        self.type = type
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        backgroundColor = UIColor(red: 88/255, green: 149/255, blue: 223/255, alpha: 1)
        super.layoutSubviews()
        layer.cornerRadius = frame.width / 2
        layer.masksToBounds = true
    }
    
    override func draw(_ rect: CGRect) {
        switch type {
        case 1:
            // プラス
            let verticalPath = UIBezierPath();
            verticalPath.move(to: CGPoint(x: rect.midX, y: 15));
            verticalPath.addLine(to: CGPoint(x: rect.midX, y: rect.maxY - 15));
            verticalPath.close()
            UIColor.white.setStroke()
            verticalPath.lineWidth = 4
            verticalPath.stroke();
            
            let horizontalPath = UIBezierPath();
            horizontalPath.move(to: CGPoint(x: 15, y: rect.midY));
            horizontalPath.addLine(to: CGPoint(x: rect.maxX - 15, y: rect.midY));
            horizontalPath.close()
            UIColor.white.setStroke()
            horizontalPath.lineWidth = 4
            horizontalPath.stroke();
        case 2:
            // バツ
            let rightPath = UIBezierPath();
            rightPath.move(to: CGPoint(x: 18, y: 18));
            rightPath.addLine(to: CGPoint(x: rect.maxX - 18, y: rect.maxY - 18));
            rightPath.close()
            UIColor.white.setStroke()
            rightPath.lineWidth = 4
            rightPath.stroke();

            let leftPath = UIBezierPath();
            leftPath.move(to: CGPoint(x: rect.maxX - 18, y: 18));
            leftPath.addLine(to: CGPoint(x: 18, y: rect.maxY - 18));
            leftPath.close()
            UIColor.white.setStroke()
            leftPath.lineWidth = 4
            leftPath.stroke();
        case 3:
            // 四角
            let squarePath = UIBezierPath(rect: CGRect(x: 15, y: 15, width: 18, height: 18))
            UIColor.white.setStroke()
            squarePath.lineWidth = 4.0
            squarePath.stroke()
        case 4:
            // 三角
            let trianglePath = UIBezierPath();
            trianglePath.move(to: CGPoint(x: rect.maxX - 15, y: rect.midY));
            trianglePath.addLine(to: CGPoint(x: 20, y: 15));
            trianglePath.addLine(to: CGPoint(x: 20, y: rect.maxY - 15));
            trianglePath.close()
            UIColor.white.setStroke()
            trianglePath.lineWidth = 4.0
            trianglePath.stroke();
        case 5:
            // 三本線
            let lineOnePath = UIBezierPath();
            lineOnePath.move(to: CGPoint(x: 15, y: 18));
            lineOnePath.addLine(to: CGPoint(x: rect.maxX - 15, y: 18));
            lineOnePath.close()
            UIColor.white.setStroke()
            lineOnePath.lineWidth = 4
            lineOnePath.stroke();

            let lineTwoPath = UIBezierPath();
            lineTwoPath.move(to: CGPoint(x: 15, y: 25));
            lineTwoPath.addLine(to: CGPoint(x: rect.maxX - 15, y: 25));
            lineTwoPath.close()
            UIColor.white.setStroke()
            lineTwoPath.lineWidth = 4
            lineTwoPath.stroke();
            
            let lineThreePath = UIBezierPath();
            lineThreePath.move(to: CGPoint(x: 15, y: rect.maxY - 18));
            lineThreePath.addLine(to: CGPoint(x: rect.maxX - 15, y: rect.maxY - 18));
            lineThreePath.close()
            UIColor.white.setStroke()
            lineThreePath.lineWidth = 4
            lineThreePath.stroke();
        default:
            // 円
            let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius: 10, startAngle: 0, endAngle: CGFloat(Double.pi) * 2, clockwise: true)
            UIColor.white.setStroke()
            circlePath.lineWidth = 4.0
            circlePath.stroke()
        }
    }
}

UIBezierPathViewController.swift

import UIKit

class UIBezierPathViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        
        let circleView = UIBezierPathView(frame: CGRect(x: 0, y: 50, width: 50, height: 50), type: 0)
        circleView.center.x = view.center.x
        view.addSubview(circleView)
        
        let plusView = UIBezierPathView(frame: CGRect(x: 0, y: 150, width: 50, height: 50), type: 1)
        plusView.center.x = view.center.x
        view.addSubview(plusView)
        
        let closeView = UIBezierPathView(frame: CGRect(x: 0, y: 250, width: 50, height: 50), type: 2)
        closeView.center.x = view.center.x
        view.addSubview(closeView)

        let squareView = UIBezierPathView(frame: CGRect(x: 0, y: 350, width: 50, height: 50), type: 3)
        squareView.center.x = view.center.x
        view.addSubview(squareView)
        
        let triangleView = UIBezierPathView(frame: CGRect(x: 0, y: 450, width: 50, height: 50), type: 4)
        triangleView.center.x = view.center.x
        view.addSubview(triangleView)
        
        let threeLineView = UIBezierPathView(frame: CGRect(x: 0, y: 550, width: 50, height: 50), type: 5)
        threeLineView.center.x = view.center.x
        view.addSubview(threeLineView)
    }
}

まとめ

シンプルなものなら簡単に描画できるので、忘れたときに参考にしてもらえればと思います。