Storyboard를 사용하여 UIView를 마스킹하고 둥근 모서리를 제공 하시겠습니까?


100

이와 같은 많은 질문 프로그래밍 방식으로 마스크를 만들고 UIView에 둥근 모서리를 제공하는 방법을 설명합니다.

Storyboard에서 모든 작업을 수행 할 수있는 방법이 있습니까? 스토리 보드에서 둥근 모서리를 만드는 것처럼 보이기 때문에 묻는 것만으로 프레젠테이션과 논리 사이의 명확한 경계를 유지할 수 있습니다.


답변:


264

네, 많이 사용하지만 이와 같은 질문은 이미 여러 번 답변되었습니다.

그러나 어쨌든 Interface Builder에서. 다음과 같은 사용자 정의 런타임 속성을 추가해야합니다.

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

여기에 이미지 설명 입력

및 활성화

Clips subviews

여기에 이미지 설명 입력

결과 :

여기에 이미지 설명 입력


사용자 정의 런타임 속성은 어디에 추가 할 수 있습니까?
Henson Fang

내가 첫 번째 이미지를 선택보기에 표시로서 다음 오른쪽 창에 런타임 키 경로, 유형, 값을 추가하려면 아래의 항목을 클릭하여 속성 정의 세 번째 아이콘 사용을 선택
Woraphot Chokratanasombat

1
테두리 반경을 동적으로 만들어 항상 너비의 50 %가되도록 할 수 있습니까? 아니면 정적 정수 여야합니까?
Crashalot 2015

1
내가 아는 한, 고정 가치 만.
Woraphot Chokratanasombat

1
참고로, 저처럼 LaunchScreen.storyboard에서 이것이 작동 할 것이라고 생각하고 여기에왔다면 그렇지 않습니다. 당신은 얻을 것입니다 : Error: Launch screens may not use user defined runtime attributes. LaunchScreen에 둥근 이미지가 필요한 것처럼 보입니다. 옵션이 없습니다.
Code Knox

22

사용자 정의 속성을 사용하여 스토리 보드에서 수행 할 수 있습니다. 반올림 할보기를 선택하고 해당 ID 검사기를 엽니 다. 에서 런타임 정의 사용자 속성 섹션, 다음 두 가지 항목을 추가 :

  • 키 경로 : layer.cornerRadius, 유형 : 숫자, 값 : (원하는 반경)
  • 키 경로 : layer.masksToBounds, 유형 : 부울, 값 : 선택됨

QuartzKit뷰의 해당 클래스 파일 (있는 경우) 을 가져와야 할 수도 있지만 그렇게하지 않고 작동하도록했습니다. 결과는 다를 수 있습니다.

편집 : 동적 반경의 예

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

나는 이것이 놀이터에서 작동하는지 확인했습니다.


1
테두리 반경을 동적으로 만들어 항상 너비의 50 %가되도록 할 수 있습니까? 아니면 정적 정수 여야합니까?
Crashalot 2015

5
할 수 있지만 코드에서만 가능합니다. 하지만 흥미로운 해결 방법은 뷰의 클래스에 0에서 100 사이의 숫자 값이고 반경이 있어야하는 너비의 백분율을 나타내는 IBInspectable 속성을 추가하는 것입니다. 예를 들어 값이 50이면 반경이 너비의 50 % 여야 함을 의미합니다. 계산 된 (저장되지 않은) 속성이기 때문에 모든 뷰가 속성을 가질 수 있도록 UIView의 확장에 추가 할 수도 있습니다.
NRitH

@NRitH, 나는 그런 것을보고 싶습니다. 여기에 코드를 게시 할 수 있다고 생각하십니까?
Cobie Fisher

17

보기 선택 StoryBord를 사용하여 Corner Rediuse, Border Widthe 및 Border Color를 변경했습니다.

extension UIView {

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

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

    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

3
cornerRadius 대신 cornerRadiusV를 사용하는 이유는 무엇입니까?
luhuiya

1
그것은 프로젝트에 코딩 쓰기 저장을 통해 스토리 보드를 사용하여 CornerRadius를 설정
아난다 Aiwale

완벽하게 작동 함
Hassan Tareq

0

스토리 보드를 모두 변경 한 후에도 Woraphot의 답변 이 작동하지 않습니다.

이것은 나를 위해 일했습니다.

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

긴 대답 :

UIView / UIButton 등의 둥근 모서리

customUIView.layer.cornerRadius = 10

테두리 두께

pcustomUIView.layer.borderWidth = 1

테두리 색상

customUIView.layer.borderColor = UIColor.blue.cgColor

이것은 질문에 대한 답변을 시도하지 않으며 여기에있는 다른 답변 의 중복 일뿐 입니다.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.