wake-up-neo.com

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

Viele Fragen wie diese erklären, wie programmgesteuert eine Maske erstellt und abgerundete Ecken für eine UIView bereitgestellt werden.

Gibt es eine Möglichkeit, alles im Storyboard zu erledigen? Nur zu fragen, weil es so aussieht, als ob abgerundete Ecken in Storyboard erstellt würden, führt zu einer klareren Abgrenzung zwischen Präsentation und Logik.

89
Crashalot

Ja, ich benutze das oft, aber solche Fragen wurden schon oft beantwortet.

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

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

enter image description here

und aktivieren

Clips subviews

enter image description here

Ergebnisse:

enter image description here

Sie können dies in einem Storyboard tun, indem Sie benutzerdefinierte Eigenschaften verwenden. Wählen Sie die Ansicht aus, die Sie runden möchten, und öffnen Sie den Identitätsinspektor. Fügen Sie im Abschnitt ser Defined Runtime Attributes die folgenden zwei Einträge hinzu:

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

Möglicherweise müssen Sie QuartzKit in die entsprechende Klassendatei Ihrer Ansicht importieren (falls vorhanden), aber ich schwöre, dass ich es 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, dass dies auf einem Spielplatz funktioniert.

21
NRitH

Ansicht auswählen you changed Corner Rediuse , Border Widthe and Border Color also Using StoryBord

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
        }
    }
}
8
Ananda Aiwale

Auch nachdem Sie alle Änderungen im Storyboard vorgenommen haben, 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 etc

customUIView.layer.cornerRadius = 10

Randstärke

pcustomUIView.layer.borderWidth = 1

Randfarbe

customUIView.layer.borderColor = UIColor.blue.cgColor
0
swiftBoy