iOS11からViewの一部だけを角丸にすることが簡単になった

Viewの一部を角丸にする方法がiOS11から簡単になってた

実装方法

例えばViewの右上と左下だけ角丸にしたい場合

iOS10系以前

これまでは、角丸のPathが指定されているCAShapeLayerを作成し、それを角丸にしたいViewのマスクレイヤーに指定していた。

let redView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
redView.center = view.center
redView.backgroundColor = .red
view.addSubview(redView)

//右上と左下を角丸にする設定
let path = UIBezierPath(roundedRect: redView.bounds, byRoundingCorners: [.bottomLeft, .topRight], cornerRadii: CGSize(width: 15, height: 15))
let mask = CAShapeLayer()
mask.path = path.cgPath
redView.layer.mask = mask

iOS11から

Viewの全ての角を丸くしたい時と同様にCALayerのcornerRadiusを指定すると共に、iOS11からCALayerにmaskedCornersというプロパティが生えており、そこに角丸にしたい位置のオプション情報を指定するだけ。

let blueView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
blueView.center = view.center
blueView.backgroundColor = .blue
view.addSubview(blueView)

//右上と左下を角丸にする設定
blueView.layer.cornerRadius = 15
blueView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMinYCorner]

このmaskedCornersプロパティはOptionSetプロトコルに準拠したCACornerMaskという構造体です

CACornerMask.swift

public struct CACornerMask : OptionSet {

    public init(rawValue: UInt)


    public static var layerMinXMinYCorner: CACornerMask { get }

    public static var layerMaxXMinYCorner: CACornerMask { get }

    public static var layerMinXMaxYCorner: CACornerMask { get }

    public static var layerMaxXMaxYCorner: CACornerMask { get }
}

プロパティ	角丸になる場所
layerMinXMinYCorner	左上
layerMaxXMinYCorner	右上
layerMinXMaxYCorner	左下
layerMaxXMaxYCorner	右下