programing

스토리보드를 사용하여 UIView를 마스킹하고 둥근 모서리를 표시하시겠습니까?

subpage 2023. 5. 9. 22:44
반응형

스토리보드를 사용하여 UIView를 마스킹하고 둥근 모서리를 표시하시겠습니까?

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

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

네, 많이 사용하는데 이런 질문은 이미 여러 번 답이 나왔습니다.

하지만 어쨌든 인터페이스 빌더에서는.다음과 같은 사용자 정의 런타임 특성을 추가해야 합니다.

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

여기에 이미지 설명 입력

및 활성화

Clips subviews

여기에 이미지 설명 입력

결과:

여기에 이미지 설명 입력

사용자 정의 속성을 사용하여 스토리보드에서 이 작업을 수행할 수 있습니다.반올림할 보기를 선택하고 Identity Inspector를 엽니다.사용자 정의 런타임 속성 섹션에서 다음 두 항목을 추가합니다.

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

가져오기를 수행해야 할 수 있습니다.QuartzKit사용자 보기의 해당 클래스 파일(있는 경우)에서 사용할 수 있지만, 이 작업을 수행하지 않고도 작동할 수 있습니다.결과는 다를 수 있습니다.

EDIT: 동적 반지름의 예

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
        }
    }

}

저는 이것이 놀이터에서 작동한다는 것을 확인했습니다.

사용하다IBInspectableStoryboard에 속성을 추가하는 방법:

스토리보드를 사용하여 코너 Rediuse, 테두리 너비 및 테두리 색을 변경했습니다.

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
        }
    }
}

스토리보드에서 모든 것을 변경한에도 워라포트의 답변은 저에게 효과가 없습니다.

이것은 저에게 효과가 있었습니다.

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

보기를 코드 파일에 연결한 다음

yourView.layer.cornerRadius = yourView.frame.width / 2
yourView.layer.masksToBounds = true

언급URL : https://stackoverflow.com/questions/34215320/use-storyboard-to-mask-uiview-and-give-rounded-corners

반응형