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

99

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.

Crashalot
quelle
Mögliches Duplikat von Set a border für UIButton in Storyboard
bummi

Antworten:

264

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}

Geben Sie hier die Bildbeschreibung ein

und aktivieren

Clips subviews

Geben Sie hier die Bildbeschreibung ein

Ergebnisse:

Geben Sie hier die Bildbeschreibung ein

Woraphot Chokratanasombat
quelle
Wo kann ich benutzerdefinierte Laufzeitattribute hinzufügen?
Henson Fang
Wie ich in der ersten Bildauswahlansicht zeige, wählen Sie im rechten Bereich das dritte Symbol aus. Benutzerdefinierte Laufzeitattribute Klicken Sie auf das Element unten, um Schlüsselpfad, Typ und Wert
hinzuzufügen
1
Können Sie den Rahmenradius dynamisch gestalten, sodass er immer 50% der Breite beträgt, oder muss er eine statische Ganzzahl sein?
Crashalot
1
Soweit ich weiß, nur fester Wert.
Woraphot Chokratanasombat
1
Nur zu Ihrer Information, wenn Sie wie ich hierher gekommen sind und gedacht haben, dass dies auf dem LaunchScreen.storyboard funktionieren würde, funktioniert dies nicht. Sie erhalten: Error: Launch screens may not use user defined runtime attributes. Sieht so aus, als hätten Sie keine Optionen mehr, wenn Sie ein rundes Bild auf dem LaunchScreen benötigen.
Code Knox
22

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.

NRitH
quelle
1
Können Sie den Rahmenradius dynamisch gestalten, sodass er immer 50% der Breite beträgt, oder muss er eine statische Ganzzahl sein?
Crashalot
5
Sie können, aber nur im Code. Eine interessante Problemumgehung besteht jedoch darin, der Klasse Ihrer Ansicht eine IBInspectable-Eigenschaft hinzuzufügen, die einen numerischen Wert zwischen 0 und 100 aufweist und den Prozentsatz der Breite angibt, den der Radius haben soll. Ein Wert von 50 bedeutet beispielsweise, dass der Radius 50% der Breite betragen sollte. Da es sich um eine berechnete (nicht gespeicherte) Eigenschaft handelt, können Sie sie sogar einer Erweiterung von UIView hinzufügen, sodass alle Ansichten die Eigenschaft haben können.
NRitH
@NRitH, ich wäre interessiert so etwas zu sehen. Glaubst du, du kannst den Code hier posten?
Cobie Fisher
17

Ansicht auswählen Sie haben Corner Rediuse, Border Widthe und Border Color auch mit StoryBord geändert

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
        }
    }
}
Ananda Aiwale
quelle
3
Warum CornerRadiusV anstelle von CornerRadius verwenden?
luhuiya
1
Es wird CornerRadius mit dem Storyboard durch gesetzt, speichern Sie die Schreibcodierung in Project
Ananda Aiwale
Hat perfekt funktioniert
Hassan Tareq
0

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
swiftBoy
quelle
Dies versucht nicht, die Frage zu beantworten und ist nur ein Duplikat Ihrer anderen Antwort hier .
Unterlegscheibe