UIView 둥근 모서리 제공


577

내 로그인 뷰는이 하위 뷰를 가지고 UIActivityViewUILabel"...에 서명"말을. 이 서브 뷰에는 둥글 지 않은 모서리가 있습니다. 어떻게 둥글게 만들 수 있습니까?

내 xib 내에서 할 수있는 방법이 있습니까?


6
IB에서 이와 같은 작업을 수행하려면 모서리가 둥근 미리 렌더링 된 이미지가 필요합니다.
Ed Marty

9
@ ed- marty 일 필요는 없지만 @Gujamin의 답변cornerRadius사전 렌더링 된 이미지를 사용하거나 코드에서 설정하지 않고도 Interface Builder를 사용하여 테이블에 속성을 적용하는 방법을 보여주기 때문에 더 많은 가치가 있습니다.
djskinner

답변:


1219

이 시도

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

참고 : 둥근 모서리를 UIViewController보기 에 적용하려는 경우 보기 가 실제로 인스턴스화 된 -viewDidLoad후 보기 컨트롤러의 생성자에 적용되지 않아야합니다 view.


6
이 속성은 이전 버전이 아닌 iPhone 3.0에만 존재합니다.
Kendall Helmstetter Gelner

5
나는 이것이 내가 본 것 중 가장 즉각적으로 만족스러운 답변 중 하나라고 말해야합니다. 여기서 확인하면 먼저 이미지 편집기로 시간을 절약 할 수 있었고 색상 / 사이징 변경에 대한 뷰가 더 부서지기 쉽습니다. 감사!
Justin Searls

20
관련 참고 사항 : UIView에 쉽게 적용하기 위해보다 시각적 인 장점 (예 : 그림자)에 관심이있는 사람은 CALayer 클래스 참조를 확인해야합니다. : 그것의 대부분은 위의 대답처럼, 하나 개 또는 두 개의 속성 값을 설정하는 것만 큼 쉽습니다 developer.apple.com/mac/library/documentation/GraphicsImaging/...
저스틴 Searls

6
@Ben Collins (또는이 문제가있는 다른 사람)의 경우 뷰에 "클립 하위 뷰"가 설정되어 있는지 확인하십시오. 인터페이스 빌더에서이를 확인할 수 있습니다.
zem

2
스크롤보기 또는 애니메이션 (UITableView에서 사용하려고 시도한 경우)에 둥근 모서리가 많이 있으면 성능이 크게 저하됩니다. 멋진 부드러운 스크롤 테이블보기가 빨리 고르지 않게됩니다 :(
Slee

261

또한 인터페이스 빌더 의 사용자 정의 런타임 속성 기능을 사용하여 키 경로 layer.cornerRadius를 값으로 설정할 수 있습니다. QuartzCore그래도 라이브러리 를 포함시켜야합니다 .

이 트릭은 layer.borderWidth 설정에도 작동하지만을 layer.borderColor기대 하지 않으므로 작동 CGColor하지 않습니다 UIColor.

이러한 매개 변수는 런타임에 평가되므로 스토리 보드에서 효과를 볼 수 없습니다.

인터페이스 빌더를 사용하여 코너 반경 설정


10
Clip Subviews보기 IB에 대한 옵션도 확인하십시오
Peter

2
(또는) 키 경로 추가 : layer.masksToBounds, 유형 : 부울 : 확인 됨
Amitabh

64

이제 @IBInspectable과 함께 UIView에서 빠른 범주 (그림 아래 코드)를 사용하여 스토리 보드에 결과를 표시 할 수 있습니다 (범주를 사용하는 경우 layer.cornerRadius가 아닌 키 경로로 cornerRadius 만 사용하십시오.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

여기에 이미지 설명을 입력하십시오


또한 맞춤 하위 클래스를 사용하는 경우 @IBDesignableIB에서 실시간 미리보기를 위해 태그를 지정하십시오 . ( nshipster.com/ibinspectable-ibdesignable 에서 자세히 알아보기 )
clozach

56

빠른

짧은 답변:

myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true  // optional

보충 답변

이 답변에 도달했다면 이미 문제를 해결하기에 충분히 보셨을 것입니다. 나는 왜이 일을하는지에 대한 시각적 인 설명을하기 위해이 답변을 추가하고 있습니다.

일반으로 시작하면 UIView사각형 모서리가 있습니다.

let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)

여기에 이미지 설명을 입력하십시오

cornerRadius뷰의 속성을 변경하여 둥근 모서리를 줄 수 있습니다 layer.

blueView.layer.cornerRadius = 8

여기에 이미지 설명을 입력하십시오

더 큰 반경 값은 더 둥근 모서리를 제공합니다

blueView.layer.cornerRadius = 25

여기에 이미지 설명을 입력하십시오

값이 작을수록 모서리가 덜 둥글게됩니다.

blueView.layer.cornerRadius = 3

여기에 이미지 설명을 입력하십시오

이것이 바로 문제를 해결하기에 충분할 수 있습니다. 그러나 뷰에 때때로 뷰의 범위를 벗어나는 서브 뷰 또는 서브 레이어가있을 수 있습니다. 예를 들어, 이와 같은 하위 를 추가하려는 경우

let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)

또는 이와 같은 하위 레이어 를 추가하려는 경우

let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)

그럼 나는 결국

여기에 이미지 설명을 입력하십시오

이제 경계 바깥에 물건을 놓고 싶지 않은 경우이 작업을 수행 할 수 있습니다

blueView.clipsToBounds = true

아니면 이거

blueView.layer.masksToBounds = true

결과는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

둘 다 clipsToBounds하고 masksToBounds있다 상응 . 첫 번째는와 함께 UIView사용되고 두 번째는와 함께 사용됩니다 CALayer.

또한보십시오


4
또한 모서리 반경을 짧은 쪽 (이 경우 blueView.frame.size.height/2)의 절반으로 설정하면 모서리 가 완벽하게 둥글게됩니다.
Johann Burgess

44

Ed Marty와 다른 접근법 :

#import <QuartzCore/QuartzCore.h>

[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];

IB에서 모든 객체를로드하려면 setMasksToBounds가 필요합니다 ...보기가 반올림되는 문제가 있지만 IB의 객체는 없었습니다.

이 수정 = D 도움이되기를 바랍니다!


48
어떻게 다른가요? 도트 구문을 사용하지 않는 것 외에?
user102008

3
[v.layer setMasksToBounds : YES]; \ n이 줄은 마술입니다. 큰 문제를 해결합니다
Cullen SUN

3
나는 iOS 개발을 시작할 때 이것을 썼고 도트 구문과 괄호 구문 사이에 차이가 없다는 것을 몰랐다. 따라서 나는 "다른"라고 썼습니다. 내 코드에는 Ed Marty가 원래 응답 (이후 편집)에 없었던 import <>도 포함되어있어 사람들이 문제를 해결할 수 있도록 도와줍니다 (일명 가져 오지 않음).
크리스티안 플랫 하임 젠슨

28

이 블로그 게시물에 설명 된대로 UIView의 모서리를 둥글게하는 방법은 다음과 같습니다.

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

멋진 부분은 반올림 할 모서리를 선택할 수 있다는 것입니다.


6
외부 사이트에 대한 링크를 제공하는 대신 여기에 답변을 포함하는 것이 좋으므로 링크 된 블로그 게시물의 관련 코드를 답변으로 가져 왔습니다. 사람들은 블로그 게시물을 방문하여 자세한 내용을 볼 수 있지만 문제의 게시물이 사라지면 콘텐츠가 계속 유지 될 수 있습니다. 또한이 질문에 실제로 같은 것을 묻지 않은 여러 가지 질문에 대한 답변을 게시했습니다. 그것들은 제거되었고, 하나의 질문은 이것의 복제로 종료되었습니다. 우리는 각 질문에 맞는 답을 만들고 싶습니다.
Brad Larson

5
미리 아는. 블로그 게시물은 현재 404입니다.
Anthony C

이 방법은 깨끗하지만 뷰에서 그림자 효과를 숨길 수 있습니다.
thesummersign

19

먼저 헤더 파일을 가져와야합니다 <QuartzCore/QuartzCore.h>

 #import QuartzCore/QuartzCore.h>

[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];

-를 사용하는 것을 놓치지 마십시오 setMasksToBounds. 그렇지 않으면 효과가 표시되지 않을 수 있습니다.


2
"QuartzCore / QuartzCore.h"를 가져올 필요가 없습니다
Sudhir Kumar

예, 가져와야합니다.
Lord Zsolt

3
@LordZsolt iOS7에서 변경되었을 수도 있지만 더 이상 QuartzCore를 가져올 필요는 없습니다.
Marc

14

UIView테두리 색상과 너비를 변경할 수있는 다음과 같은 사용자 정의 클래스를 사용할 수 있습니다. 이이기 때문에 IBDesignalbe당신은뿐만 아니라 인터페이스 빌더의 속성을 변경할 수 있습니다.

여기에 이미지 설명을 입력하십시오

import UIKit

@IBDesignable public class RoundedView: UIView {

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

}

6
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;

[self.view addSubview:view];
[view release];

setMasksToBounds를 적용하는 것이 중요합니다. 배경색과 그림자를 설정하는 것은 아닙니다.
djskinner

3

스위프트 4-IBDesignable 사용

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
            layer.cornerRadius = newValue
        }
    }
}

죄송하지만 IOS 개발의 새로운 이민자입니다. 솔루션이 어떻게 layer.cornerRadius원래 상태로 돌아 가지 못하게 합니까? (즉, xcode 스토리 보드 cornerRadius는 원본 UIView이 초기화 된 후에 만 설정하는 방법을 어떻게 알 수 있습니까?)
AlanSTACK


3

-스위프트 UI

SwiftUI에서는 원하는 곳에서 cornerRadius수정자를 직접 사용할 수 있습니다 View. 이 질문의 예는 다음과 같습니다.

Text("Signing In…")
    .padding(16)
    .background(Color.red)
    .cornerRadius(50)

시사

참고 것을 당신이 CornerRadius를 설정 때문에 경우에도, 반경 등 더 이상 다이아몬드가없는 이상 높이의 절반 이상 이 원활 라운드 것입니다.

체크 아웃 이 답변 하는 방법에 자체에를 라운드 특정의 코너 SwiftUI에서


2

가져 오기 Quartzcore framework를 수행 한 후 매우 중요한 행 으로 설정 setMaskToBounds해야 TRUE합니다.

그때: [[yourView layer] setCornerRadius:5.0f];


2
UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
    // Create a white border with defined width
    original.layer.borderColor = [UIColor yellowColor].CGColor;
    original.layer.borderWidth = 1.5;

    // Set image corner radius
    original.layer.cornerRadius =cornerRadius;

    // To enable corners to be "clipped"
    [original setClipsToBounds:YES];
    return original;
}

2

obj c에서 프로그래밍 방식으로 수행하십시오.

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50,    200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]

[self.view addSubview:view];

stoaryboard에서이 작업을 수행 할 수도 있습니다.

 layer.cornerRadius  Number  5

여기에 이미지 설명을 입력하십시오


2

둥근 모서리가 viewDidload () 에서 작동하지 않으면 viewDidLayoutSubview ()에 코드를 작성하는 것이 좋습니다

-(void)viewDidLayoutSubviews
{
    viewTextfield.layer.cornerRadius = 10.0 ;                                               
    viewTextfield.layer.borderWidth = 1.0f;
    viewTextfield.layer.masksToBounds =  YES;
    viewTextfield.layer.shadowRadius = 5;
    viewTextfield.layer.shadowOpacity = 0.3;
    viewTextfield.clipsToBounds = NO;
    viewTextfield.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}

도움이 되었기를 바랍니다!


0

이미지를 사용할 수도 있습니다.

UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
                                , 0
                                , maskingImage.size.width
                                , maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];

0

라운드 뷰의 cornerRadious 속성 설정

set masksToBounds Boolean 이미지의 부울 값은 여전히 ​​코너 반경 경계를 벗어나지 않습니다.

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

UIView 확장 사용하기 :

extension UIView {    

func addRoundedCornerToView(targetView : UIView?)
{
    //UIView Corner Radius
    targetView!.layer.cornerRadius = 5.0;
    targetView!.layer.masksToBounds = true

    //UIView Set up boarder
    targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
    targetView!.layer.borderWidth = 3.0;

    //UIView Drop shadow
    targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    targetView!.layer.shadowOpacity = 1.0
}
}

용법:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

Swift 4.2 및 Xcode 10.1에서

let myView = UIView()
myView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
myView.myViewCorners()
//myView.myViewCorners(width: myView.frame.width)//Pass View width
view.addSubview(myView)

extension UIView {
    //If you want only round corners
    func myViewCorners() {
        layer.cornerRadius = 10
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
    //If you want complete round shape, enable above comment line
    func myViewCorners(width:CGFloat) {
        layer.cornerRadius = width/2
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
}

-4

ON Xcode 6 당신의 시도

     self.layer.layer.cornerRadius = 5.0f;

또는

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.