Verwenden Sie Storyboard, um UIView zu maskieren und abgerundete Ecken zu geben?

Viele Fragen wie diese erklären, wie man programmgesteuert eine Maske erstellt und einem UIView abgerundete Ecken verleiht.

Gibt es eine Möglichkeit, alles in Storyboard zu erledigen? Nur zu fragen, weil es so aussieht, als würde man in Storyboard abgerundete Ecken erstellen, um eine klarere Abgrenzung zwischen Präsentation und Logik zu erhalten.

Ja, ich benutze das oft, aber eine solche Frage wurde bereits oft beantwortet.

Aber trotzdem im Interface Builder. Sie müssen benutzerdefinierte Laufzeitattribute wie folgt hinzufügen:

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

und aktivieren

Clips subviews

Ergebnisse:

Sie können dies in einem Storyboard mithilfe benutzerdefinierter Eigenschaften tun. Wählen Sie die Ansicht aus, die Sie runden möchten, und öffnen Sie den Identitätsinspektor. In den User Defined Runtime Attributes Abschnitt, fügen Sie die folgenden zwei Einträge:

• Schlüsselpfad : layer.cornerRadius, Typ: Nummer, Wert: (beliebiger Radius)
• Schlüsselpfad : layer.masksToBounds, Typ: Boolean, Wert: markiert

Möglicherweise müssen QuartzKitSie die entsprechende Klassendatei Ihrer Ansicht (falls vorhanden) importieren , aber ich schwöre, dass ich sie zum Laufen gebracht habe, ohne dies zu tun. Ihre Ergebnisse können variieren.

BEARBEITEN: Beispiel eines dynamischen Radius

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

}

Ich habe überprüft, ob dies auf einem Spielplatz funktioniert.

Ansicht auswählen

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

Selbst nachdem alle Änderungen im Storyboard vorgenommen wurden, funktioniert Woraphots Antwort bei mir nicht.

Das hat bei mir funktioniert:

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

Lange Antwort :

Abgerundete Ecken von UIView / UIButton usw.

customUIView.layer.cornerRadius = 10

Randdicke

pcustomUIView.layer.borderWidth = 1

Randfarbe

customUIView.layer.borderColor = UIColor.blue.cgColor