UIViewの一部だけ角丸にする

参考: how to set cornerRadius for only top-left and top-right corner of a UIView?

Problem

UIViewの左上と右上だけ角丸にしたい。上記の参考資料を見て試したが、左上は角丸になったが右上は角丸にならなかった。

Solution

ポイントはlayoutSubviews()をオーバーライドして、その中で角丸にする処理を実装すること。
layoutSubview()以外で角丸処理をすると、右上が角丸にならなかったり、マージンが崩れたりする。

CustomView.swiftを作成する

class CustomView: UIView {
  var corners: UIRectCorner = [.TopLeft, .TopRight, .BottomLeft, .BottomRight]
  var radius: CGFloat = 0

  func roundCorners(corners:UIRectCorner, radius: CGFloat) {
    self.corners = corners
    self.radius = radius
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    let maskPath = UIBezierPath(roundedRect: self.bounds,
      byRoundingCorners: self.corners,
      cornerRadii: CGSize(width: self.radius, height: self.radius))

    let maskLayer = CAShapeLayer()
    maskLayer.frame = self.bounds
    maskLayer.path = maskPath.CGPath

    self.layer.mask = maskLayer
  }
}

使用方法

class ViewController: UIViewController {
  @IBOutlet weak var titleView: CustomView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // 上部のみ角丸にする
    titleView.roundCorners([.TopLeft, .TopRight], radius: 10.0)
  }
}