読者です 読者をやめる 読者になる 読者になる

【swift】Viewの一部を角丸にする

swiftで角丸のViewを作るには、layerのcornerRadiusを設定すれば簡単にできますが、これだと4隅すべてが角丸になってしまいます。

上だけを角丸にしたい時などには、一部だけ角丸のパスをUIBezierPathで作成し、CAShapeLayerに設定します。

developer.apple.com

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .grayColor()

        // 上だけ角丸にするViewを用意 
        let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view1.backgroundColor = .greenColor()

        view.addSubview(view1)
        view1.center = view.center

        // TopLeft, TopRightを5px丸めたパスを生成
        let maskPath = UIBezierPath(roundedRect: view1.frame, byRoundingCorners: [.TopLeft, .TopRight], cornerRadii: CGSize(width: 5, height: 5))
        
        // CAShapeLayerを生成し、先ほど生成したパスをセットする
        let maskLayer = CAShapeLayer()
        maskLayer.path = maskPath.CGPath

        // 対象のViewのlayer.maskにCAShapeLayerをセットする
        view1.layer.mask = maskLayer
    }

}

f:id:w6500:20160527002452p:plain:w300