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

100

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ą.

Crashalot
źródło

Odpowiedzi:

264

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}

wprowadź opis obrazu tutaj

i włącz

Clips subviews

wprowadź opis obrazu tutaj

Wyniki:

wprowadź opis obrazu tutaj

Woraphot Chokratanasombat
źródło
gdzie mogę dodać atrybuty środowiska wykonawczego zdefiniowane przez użytkownika?
Henson Fang,
Jak pokazuję na pierwszym obrazku, wybierz widok, a następnie w prawym panelu wybierz trzecią ikonę Zdefiniowane przez użytkownika atrybuty środowiska wykonawczego Kliknij element poniżej, aby dodać ścieżkę klucza, typ, wartość
Woraphot Chokratanasombat
1
Czy możesz sprawić, by promień obramowania był dynamiczny, aby zawsze stanowił 50% szerokości, czy też musi to być statyczna liczba całkowita?
Crashalot
1
O ile wiem, tylko stała wartość.
Woraphot Chokratanasombat
1
Po prostu do Twojej wiadomości, jeśli tak jak ja przyszedłeś tutaj, myśląc, że to zadziała na LaunchScreen.storyboard, to nie działa. Otrzymasz: Error: Launch screens may not use user defined runtime attributes. Wygląda na to, że jeśli potrzebujesz okrągłego obrazu na ekranie LaunchScreen, nie masz żadnych opcji.
Code Knox
22

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.

NRitH
źródło
1
Czy możesz sprawić, by promień obramowania był dynamiczny, aby zawsze stanowił 50% szerokości, czy też musi to być statyczna liczba całkowita?
Crashalot
5
Możesz, ale tylko w kodzie. Ciekawym obejściem jest jednak dodanie właściwości IBInspectable do klasy widoku, która jest wartością liczbową z zakresu od 0 do 100 i wskazuje procent szerokości, jaki powinien mieć promień. Na przykład wartość 50 oznacza, że ​​promień powinien wynosić 50% szerokości. Ponieważ jest to obliczona (nie przechowywana) właściwość, możesz nawet dodać ją do rozszerzenia UIView, aby wszystkie widoki mogły mieć tę właściwość.
NRitH
@NRitH, chciałbym zobaczyć coś takiego. Czy myślisz, że możesz tutaj zamieścić kod?
Cobie Fisher
17

Wybierz widok zmieniłeś użycie Corner Rediuse, Border Widthe i Border Color, również używając 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
        }
    }
}
Ananda Aiwale
źródło
3
po co używać cornerRadiusV zamiast cornerRadius?
luhuiya
1
jest ustawiony na cornerRadius za pomocą storyboardu, zapisz kodowanie w Project
Ananda Aiwale
Działało idealnie
Hassan Tareq
0

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
swiftBoy
źródło
To nie jest próbą odpowiedzi na pytanie i jest tylko duplikatem twojej drugiej odpowiedzi .
podkładka