[iOS] UIView 부분적으로 라운드 적용하기

[iOS] UIView 부분적으로 라운드 적용하기

제목 짓기가 어렵네요. 이걸 머라고 표현해야 하나.

프로젝트를 하다보면 라운드 형식의 UIView 또는 UIButton을 만들어야 하는 상황이 발생합니다. 굳이 이미지를 입히지 않아도 코드로 적용을 할 수 있습니다. 이미지를 보면서 설명하겠습니다.

[프로젝트] 힐링트리 로그인 화면

위 이미지와 같이 상단 "이메일로 가입하기"는 UIView를 상단 좌, 우측만 라운드를 준것이고 하단에 "FACEBOOK으로 가입하기", "NAVER로 가입하기" UIButton은 네군데 모두 라운드를 주었습니다.

하단 버튼 두개는 아래 코드와 같이 자주 사용되는 소스코드로 적용하였습니다.

facebookBtn.layer.borderWidth = 1.0;

facebookBtn.layer.borderColor = [[UIColor clearColor]CGColor];

facebookBtn.layer.cornerRadius = 5.0;

facebookBtn.layer.masksToBounds = YES;

문제는 위의 UIView 처럼 상단 두군데만 라운드를 주는 것처럼 부분으로 라운드를 줄 수 있습니다.

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:topView.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(5.0, 5.0)];

    

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

maskLayer.frame = topView.bounds;

maskLayer.path  = maskPath.CGPath;

topView.layer.mask = maskLayer;

위 소스코드에서 중요한 부분이 byRoundingCorners 부분입니다. 

(UIRectCornerTopLeft | UIRectCornerTopRight)

만 적용하였기 때문에 상단 좌, 우측만 라운드가 먹혔고 라운드 주고 싶은 부분만 위처럼 적용하면 됩니다.

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {

    UIRectCornerTopLeft     = 1 << 0,

    UIRectCornerTopRight    = 1 << 1,

    UIRectCornerBottomLeft  = 1 << 2,

    UIRectCornerBottomRight = 1 << 3,

    UIRectCornerAllCorners  = ~0UL

};

위 처럼 5가지 옵션을 선택하여 적용시켜 줍니다.