【Swift】ColorLineView｜カスタム設定

カラーの線をひくためのUIBezierPathを使ってみました

ViewController.swift

func createColorLineView() {
        let frame = CGRect.init(x: 8, y: 100, width: self.view.frame.size.width * 0.8, height: self.view.frame.size.width * 0.8)
        let rect = CGRect.init(x: 0, y: 0, width: self.view.frame.size.width * 0.8, height: self.view.frame.size.width * 0.8)
        // ライン長さ
        let line:CGFloat = 10
        // ライン幅
        let width = 4

        let colorLineView = ColorLineView.init(frame: frame,color: .orange,pathItems: [
            
            // 上部
            /// カラー設定
            ["strokeColor":UIColor.red],
            /// 左上 横
            ["move":CGPoint(x: rect.minX, y: rect.minY),
             "addLine":CGPoint(x: line, y: rect.minY)],
            /// 左上 縦
            ["move":CGPoint(x: rect.minX, y: rect.minY),
             "addLine":CGPoint(x: rect.minX, y: line)],
            /// カラー設定
            ["strokeColor":UIColor.yellow],
            /// 右上 横
            ["move":CGPoint(x: rect.maxX - line, y: rect.minY),
             "addLine":CGPoint(x: rect.maxX, y: rect.minY)],
            /// 右上 縦
            ["move":CGPoint(x: rect.maxX, y: rect.minY),
             "addLine":CGPoint(x: rect.maxX, y: line)],
            // 下部
            /// 左下 横
            ["move":CGPoint(x: rect.minX, y: rect.maxY),
             "addLine":CGPoint(x: line, y: rect.maxY)],
            /// 左下 縦
            ["move":CGPoint(x: rect.minX, y: rect.maxY),
             "addLine":CGPoint(x: rect.minX, y: rect.maxY - line)],
            /// 右下 横
            ["move":CGPoint(x: rect.maxX - line, y: rect.maxY),
             "addLine":CGPoint(x: rect.maxX, y: rect.maxY)],
            /// 右下 縦
            ["move":CGPoint(x: rect.maxX, y: rect.maxY),
             "addLine":CGPoint(x: rect.maxX, y: rect.maxY - line)],

        ])
        colorLineView.backgroundColor = .clear
        self.view.addSubview(colorLineView)
}

ColorLineView.swift

@IBDesignable class ColorLineView: UIView {
    var color:UIColor = .red
    var lineWidth:CGFloat = 4
    var pathItems:[Dictionary<String,Any>]? = nil
    init(frame:CGRect = CGRect.zero,color:UIColor = .red) {
        super.init(frame: frame)
        self.color = color
    }
    init(frame:CGRect = CGRect.zero,color:UIColor = .red,pathItems:[Dictionary<String,Any>]) {
        super.init(frame: frame)
        self.color = color
        self.pathItems = pathItems
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        if pathItems == nil {
            let path = UIBezierPath()
            
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
            path.close()
            
            color.setStroke()
            path.stroke()
        } else {
            pathItems?.forEach({ item in
                let path = UIBezierPath()
                
                // ポイント移動
                if let movePoint = item["move"] as? CGPoint {
                    path.move(to: movePoint)
                }
                // ラインを引く
                if let addLinePoint = item["addLine"] as? CGPoint {
                    path.addLine(to: addLinePoint)
                }
                // 塗りつぶし
                if let strokeColor = item["strokeColor"] as? UIColor {
                    strokeColor.setStroke()
                    color = strokeColor
                } else {
                    color.setStroke()
                }
                // ライン幅
                if let lineWidth = item["lineWidth"] as? CGFloat {
                    path.lineWidth = lineWidth
                    self.lineWidth = lineWidth
                } else {
                    path.lineWidth = lineWidth
                }
                path.stroke()
            })
        }
    }
}

カスタム設定という名前ですが
もっと汎用的な形で呼び出したいですね

がんばります