Utiliser Storyboard pour masquer UIView et donner des coins arrondis?


100

De nombreuses questions comme celle-ci expliquent comment créer un masque par programmation et fournir des coins arrondis à un UIView.

Existe-t-il un moyen de tout faire dans Storyboard? Le simple fait de demander parce qu'il semble que la création de coins arrondis dans Storyboard maintient une démarcation plus claire entre la présentation et la logique.


Réponses:


264

Oui, j'utilise beaucoup mais une question comme celle-ci a déjà été répondue à plusieurs reprises.

Mais de toute façon dans Interface Builder. Vous devez ajouter des attributs d'exécution définis par l'utilisateur comme ceci:

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

entrez la description de l'image ici

et activer

Clips subviews

entrez la description de l'image ici

Résultats:

entrez la description de l'image ici


où puis-je ajouter des attributs d'exécution définis par l'utilisateur?
Henson Fang

Comme je le montre dans la première image, sélectionnez la vue, puis sur le volet de droite, sélectionnez la troisième icône Attributs d'exécution définis par l'utilisateur Cliquez sur l'élément ci-dessous pour ajouter le chemin de clé, le type, la valeur
Woraphot Chokratanasombat

1
Pouvez-vous rendre le rayon de la bordure dynamique afin qu'il soit toujours à 50% de la largeur ou doit-il être un entier statique?
Crashalot du

1
Autant que je sache, valeur fixe uniquement.
Woraphot Chokratanasombat

1
Juste pour info, si comme moi vous êtes venu ici en pensant que cela fonctionnerait sur LaunchScreen.storyboard, ce n'est pas le cas. Vous obtiendrez: Error: Launch screens may not use user defined runtime attributes. On dirait que si vous avez besoin d'une image ronde sur le LaunchScreen, vous n'avez plus d'options.
Code Knox

22

Vous pouvez le faire dans un storyboard en utilisant des propriétés définies par l'utilisateur. Sélectionnez la vue que vous souhaitez arrondir et ouvrez son inspecteur d'identité. Dans la section Attributs d'exécution définis par l' utilisateur , ajoutez les deux entrées suivantes:

  • Chemin de la clé:, layer.cornerRadiusType: Nombre, Valeur: (quel que soit le rayon souhaité)
  • Chemin de la clé:, layer.masksToBoundsType: Booléen, Valeur: vérifié

Vous devrez peut-être importer QuartzKitdans le fichier de classe correspondant de votre vue (le cas échéant), mais je jure que je l'ai fait fonctionner sans le faire. Vos résultats peuvent varier.

EDIT: Exemple de rayon dynamique

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

}

J'ai vérifié que cela fonctionne dans une aire de jeux.


1
Pouvez-vous rendre le rayon de la bordure dynamique afin qu'il soit toujours à 50% de la largeur ou doit-il être un entier statique?
Crashalot

5
Vous pouvez, mais uniquement dans le code. Une solution de contournement intéressante, cependant, consiste à ajouter une propriété IBInspectable à la classe de votre vue qui est une valeur numérique comprise entre 0 et 100 et indique le pourcentage de la largeur que le rayon doit être. Par exemple, une valeur de 50 signifie que le rayon doit être de 50% de la largeur. Comme il s'agit d'une propriété calculée (non stockée), vous pouvez même l'ajouter à une extension de UIView afin que toutes les vues puissent avoir la propriété.
NRitH

@NRitH, je serais intéressé de voir quelque chose comme ça. Pensez-vous que vous pouvez publier le code ici?
Cobie Fisher

17

Sélectionnez la vue vous avez changé la fonction Corner Rediuse, Border Widthe et Border Color également en utilisant 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
        }
    }
}

3
pourquoi utiliser cornerRadiusV au lieu de cornerRadius?
luhuiya

1
il est défini cornerRadius en utilisant le storyboard à travers, enregistrez le codage d'écriture dans Project
Ananda Aiwale

A parfaitement fonctionné
Hassan Tareq le

0

Même après avoir apporté tous les changements au storyboard, la réponse de Woraphot ne fonctionne pas pour moi.

Cela a fonctionné pour moi:

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

Longue réponse :

Coins arrondis de UIView / UIButton etc.

customUIView.layer.cornerRadius = 10

Épaisseur de la bordure

pcustomUIView.layer.borderWidth = 1

Couleur de la bordure

customUIView.layer.borderColor = UIColor.blue.cgColor

Cela ne tente pas de répondre à la question et n'est qu'un double de votre autre réponse ici .
shim le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.