UIViewの一部を角丸にしたい
この記事は、TECOTEC Advent Calendar 2018 の11日目の記事です。
ソースコード
開発環境:Xcode:10.1
開発言語:Swift4.2
【UIView.layer.maskedCornersに設定できる値(iOS11以降)】
.layerMinXMinYCorner 左上
.layerMaxXMinYCorner 右上
.layerMinXMaxYCorner 左下
.layerMaxXMaxYCorner 右下
【UIBezierPathのbyRoundingCornersに設定できる値(iOS11未満)】
.topLeft 左上
.topRight 右上
.bottomLeft 左下
.bottomRight 右下
.allCorners 全て
※ autoLayoutを使用しているとiOS11未満の角丸処理がviewDidLoad()だと上手くいかない可能性があるのでviewDidAppear()以降で書くと安全
sample1.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var yellowView: UIView!
@IBOutlet weak var blueView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
/// iOS11以降の角丸処理
blueView.layer.cornerRadius = 20
blueView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner]
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
/// iOS11未満の角丸処理
let path = UIBezierPath(roundedRect:yellowView.bounds,
byRoundingCorners:[.topRight, .bottomRight],
cornerRadii: CGSize(width: 20, height: 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
yellowView.layer.mask = maskLayer
}
}
・感想
iOS11以降の角丸処理簡単になったなあ