Użyj Storyboard, aby zamaskować UIView i nadać zaokrąglone rogi?

Wiele pytań , jak to wytłumaczyć, jak programowo utworzyć maskę i zapewniają zaokrąglone narożniki do UIView.

Czy jest sposób, aby to wszystko zrobić w Storyboard? Po prostu pytam, ponieważ wydaje się, że tworzenie zaokrąglonych rogów w Storyboard zapewnia wyraźniejsze rozgraniczenie między prezentacją a logiką.

Tak, często tego używam, ale na takie pytanie odpowiadano już wiele razy.

Ale tak czy inaczej w Interface Builder. Musisz dodać zdefiniowane przez użytkownika atrybuty środowiska wykonawczego w następujący sposób:

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

i włącz

Clips subviews

Wyniki:

Możesz to zrobić w scenorysie, używając właściwości zdefiniowanych przez użytkownika. Wybierz widok, który chcesz zaokrąglić, i otwórz jego Inspektora tożsamości. W sekcji Atrybuty środowiska wykonawczego zdefiniowane przez użytkownika dodaj następujące dwa wpisy:

• Ścieżka klucza:, layer.cornerRadiustyp: liczba, wartość: (dowolny promień)
• Ścieżka klucza:, layer.masksToBoundsTyp: Boolean, Wartość: zaznaczona

Być może będziesz musiał zaimportować QuartzKitodpowiedni plik klasy swojego widoku (jeśli istnieje), ale przysięgam, że udało mi się to bez robienia tego. Twoje wyniki mogą się różnić.

EDYCJA: Przykład dynamicznego promienia

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

}

Sprawdziłem, że to działa na placu zabaw.

Wybierz widok

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

Nawet po wprowadzeniu wszystkich zmian w storyboardzie odpowiedź Woraphota nie działa dla mnie.

To zadziałało dla mnie:

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

Długa odpowiedź :

Zaokrąglone rogi UIView / UIButton itp

customUIView.layer.cornerRadius = 10

Grubość krawędzi

pcustomUIView.layer.borderWidth = 1

Kolor ramki

customUIView.layer.borderColor = UIColor.blue.cgColor