원하는 방향만 둥글게 하기


설명

뷰를 만들다 보면 전체를 둥글게 하는것이 아니라 특정 방향만 둥글게 해줘야 되는 경우가 있습니다. UIView 상속 받은 모든 컴포넌트에 해당되는 내용입니다.


사용환경

* Swift 4.2
* XCode 10.0


코드

// Swift // 오른쪽위와 오른쪽아래를 둥글게 let contentImage = UIView()
contentImage.frame = CGRectMake(64, 64, 55, 55)
contentImage.backgroundColor = UIColor.redColor()
let maskPath = UIBezierPath(roundedRect: contentImage.bounds, byRoundingCorners: [UIRectCorner.TopRight, UIRectCorner.BottomRight], cornerRadii: CGSizeMake(3.0, 3.0))
let maskLayer = CAShapeLayer()
maskLayer.frame = contentImage.bounds
maskLayer.path = maskPath.CGPath
contentImage.layer.mask = maskLayer
view.addSubview(contentImage)


// Objective-C
// 오른쪽위와 오른쪽아래를 둥글게
UIView * ContentImage = [[UIImageView alloc]initWithFrame:CGRectMake(64, 64, 55, 55)];
ContentImage.backgroundColor = [UIColor redColor];
UIBezierPath * maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:ContentImage.bounds byRoundingCorners:(UIRectCornerTopRight | UIRectCornerBottomRight) cornerRadii:CGSizeMake(3.0, 3.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = ContentImage.bounds;maskLayer.path = maskPath.CGPath;
ContentImage.layer.mask = maskLayer;
[self.view addSubview:ContentImage];

둥글게 하고 싶은 모서리의 방향을 UIRectCorner 속성을 추가 해주시면 됩니다. UIRectCorne 종류는 밑에 표를 참조 하시면 됩니다.

Objective-C Swift
전체 UIRectCornerAllCorners UIRectCorner.allCorners
왼쪽 위 UIRectCornerTopLeft UIRectCorner.topLeft
왼쪽 아래 UIRectCornerBottomLeft UIRectCorner.bottomLeft
오른쪽 위 UIRectCornerTopRight UIRectCorner.topRight
오른쪽 아래 UIRectCornerBottomRight UIRectCorner.bottomRight

맞치며

작업을 하다보면 이미지 보다 UIView 또는 다른 컴포넌트 뷰를 이용해서 만드는 경우가 더 편하고 손쉽게 만들어지는 경우도 있습니다. 물론 단순 이미지보다는 손은 더 갑니다. 디자인을 보다보면 이쁜 디자인을 위해 둥근 모서리를 이용하는 경우가 많습니다. 위에 코드를 위해 원하는 모양을 손쉽게 만들수있습니다. 틀린점이나 궁금한점 있으시면 댓글을 남겨주세요. 감사합니다.

+ Recent posts