UIView 에서 Round 처리하는 방법에 대해 정리해본다.
extension UIView {
public func setRoundedBorder(color: UIColor = .separator,
radius: CGFloat = 3,
borderWidth: CGFloat = 0.5) {
layer.borderColor = color.cgColor
layer.borderWidth = borderWidth
layer.cornerRadius = radius
layer.masksToBounds = true
}
}
Swift
복사
기본코드는 이렇다.
여기에 필요에 따라 입맛따라 변형 시켜 사용하면 되는데,
1.
모서리를 둥굴게
layer.cornerRadius = 9 // 원하는 숫자 (앱 아이콘에 사용되는 Radius 값은 9)
Swift
복사
이 cornerRadius 를 어떻게 조절하느냐에 따라 여러가지가 가능하다.
// Circle
layer.cornerRadius = frame.width / 2
// 좌우 Round
layer.cornerRadius = frame.height / 2
Swift
복사
2.
외각선
layer.borderColor = UIColor.black.cgColor // cgColor 잊지 말기
layer.borderWidth = borderWidth // 보통 1 or 0.5
Swift
복사
3.
마지막엔 꼭 layer.masksToBounds = true 를 넣어준다.
그 외
1.
점선으로 외각선
func setDottedLineBorder() {
layer.sublayers = layer.sublayers?.filter({ !($0 is CAShapeLayer) })
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineDashPattern = [4, 4]
shapeLayer.frame = bounds
shapeLayer.fillColor = nil
shapeLayer.path = UIBezierPath(rect: bounds).cgPath
layer.addSublayer(shapeLayer)
}
Swift
복사
2.
원하는 쪽에만 Radius 주기
@available(iOS 11.0, *)
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
clipsToBounds = true
layer.cornerRadius = radius
layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
}
Swift
복사
사실 iOS 11 이하를 위한 코드도 있긴 하다.
func roundCorners(corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
layer.mask = mask
}
// 써봤는데 잘 동작 안한다. 뭐가 잘못된거지?
Swift
복사
사용은
someView.roundCorners([.topLeft, .topRight, .bottomLeft, .bottomRight],
radius: 3)
Swift
복사
이렇게 쓰면 된다.
위 기술한 내용 말고 다른 타입?을 쓰고 있다면 댓글 달아주세요. 문서 업데이트 해놓겠습니다.