AutoLayoutに追従する図形を描く

5410 ワード
AutoLayout Swift UI UI テキストリンク

UIViewの contentMode に redraw を設定すると、Viewのframeが変わった時にAutoLayoutを使用しても簡単に図形を再描画することができます。
以下のコードでは下向きの三角形が描画されます。

import UIKit

final class TriangleView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentMode = .redraw
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        contentMode = .redraw
    }

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: rect.origin)
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.close()
        UIColor.gray.setFill()
        path.fill()
    }
}

let view = TriangleView(frame: .init(origin: .zero, size: .init(width: 50, height: 25)))
view.backgroundColor = .white

Playgroundだと以下のコードを追記するだけで簡単にUIを確認できて便利ですね。

import PlaygroundSupport
PlaygroundPage.current.liveView = view