Swiftで同じ図形を違う色で描く方法

はじめに

下の図のように、UIBezierPathを使ってSwiftで図形を作り、各四角を指定した色で画面に描きたいと思ったのですが、最後の色が全てに適応されたり、四角が一個しか描画されないなど、結構苦戦したので記事にしてみました。

やり方

ViewController.swift

import UIKit

let category = ["赤", "青", "赤", "青", "赤"]

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        for i in 0..<category.count {
            let rectangleLayer = CAShapeLayer.init()
　　　　　　　// 図形を描く画面の大きさ
            let rectangleFrame = CGRect.init(x: 0, y: 0, width: 414, height: 896)
            rectangleLayer.frame = rectangleFrame
        　　// 四角の位置と大きさを指定
            let rectangle = UIBezierPath(rect: CGRect(x: 100 + i * 50, y: 100 , width: 50, height: 50))
　　　　　　　// 配列に入っている色に合わせて四角の色を指定する
            if category[i] == "赤" {
                rectangleLayer.fillColor = UIColor.red.cgColor
            }
            else if category[i] == "青" {
                rectangleLayer.fillColor = UIColor.blue.cgColor
            }
            rectangle.fill()
            // 線の太さの指定
            rectangle.lineWidth = 0
            // 描画する
            rectangleLayer.path = rectangle.cgPath
            self.view.layer.addSublayer(rectangleLayer)
        }

    }


}

参考Web
https://uruly.xyz/【swift3】uibezierpathで卵型を書こう【cashapelayer】/
http://tokyo.supersoftware.co.jp/technology/8011
https://program-life.com/648