web-dev-qa-db-fra.com

Est-il possible de définir les propriétés de la bordure UIView à partir du constructeur d'interface?

Est-il possible de contrôler les propriétés de la bordure UIView (couleur, épaisseur, etc.) directement à partir du constructeur d'interface ou est-ce que je peux le faire uniquement par programme?

iosuiviewinterface-builderborder
170
matteo.cajani

En réalité, vous pouvez définir certaines propriétés de la couche d'une vue via le générateur d'interface. Je sais que je peux définir les propriétés borderWidth et cornerRadius d'une couche via xcode. borderColor ne fonctionne pas, probablement parce que la couche veut une CGColor au lieu d'une UIColor.

Vous devrez peut-être utiliser des chaînes au lieu de chiffres, mais cela fonctionne!

layer.cornerRadius
layer.borderWidth
layer.borderColor

Mettre à jour: layer.masksToBounds = true

example

Mettre à jour: sélectionnez le type approprié pour Keypath:

 enter image description here

369
Rich86man

La réponse de Rich86Man est correcte, mais vous pouvez utiliser des catégories pour proxy propriétés telles que layer.borderColor. (De la ConventionalC CocoaPod)

CALayer + XibConfiguration.h:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer(XibConfiguration)

// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;

@end

CALayer + XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

-(void)setBorderUIColor:(UIColor*)color
{
    self.borderColor = color.CGColor;
}

-(UIColor*)borderUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Interface Builder

layer.borderUIColor

Le résultat sera apparent lors de l'exécution, pas dans Xcode.

Edit: Vous devez également définir layer.borderWidth sur au moins 1 pour voir la bordure avec la couleur choisie.

Dans Swift 2.0:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.CGColor
        }

        get {
            return UIColor(CGColor: self.borderColor!)
        }
    }
}

Dans Swift 3.0:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.cgColor
        }

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}
178
Peter DeWeese

Réponse similaire à celle de iHulk, mais dans Swift

Ajoutez un fichier nommé UIView.Swift dans votre projet (ou collez-le simplement dans n’importe quel fichier):

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.cgColor
        }
        get {
            guard let color = layer.borderColor else {
                return nil
            }
            return UIColor(cgColor: color)
        }
    }
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Ceci sera ensuite disponible dans Interface Builder pour chaque bouton, imageView, étiquette, etc., dans le panneau Utilitaires> Inspecteur des attributs:

 Attributes Inspector

Remarque: la bordure n'apparaîtra qu'au moment de l'exécution.

69
Axel Guilmin

Vous pouvez créer une catégorie de UIView et l'ajouter dans le fichier .h de la catégorie

@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;

Maintenant, ajoutez ceci dans le fichier .m

@dynamic borderColor,borderWidth,cornerRadius;

et cela aussi dans. m fichier

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
}

à présent, vous le verrez dans votre storyboard pour toutes les sous-classes UIView (UILabel, UITextField, UIImageView, etc.)

enter image description here

Ca y est .. Pas besoin d'importer une catégorie n'importe où, ajoutez simplement les fichiers de la catégorie dans le projet et voyez ces propriétés dans le storyboard.

56
iHulk

Pour Swift 3 et 4 , si vous voulez utiliser IBInspectables, voici ce qui suit:

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}
8
RamwiseMatt

bien que cela puisse définir les propriétés, cela ne se reflète pas réellement dans IB. Donc, si vous écrivez essentiellement du code dans IB, vous pouvez aussi bien le faire dans votre code source

7
Zayin Krige

Si vous voulez gagner du temps, utilisez simplement deux UIViews l'un sur l'autre, l'un à l'arrière étant la couleur de la bordure et l'autre à l'avant plus petit, donnant l'effet de bordure. Je ne pense pas que ce soit une solution élégante non plus, mais si Apple se souciait un peu plus, vous ne devriez pas avoir à le faire.

4
Matthew Quiros

Le scénarimage ne fonctionne pas pour moi tout le temps même après avoir essayé toute la solution ici

Donc, il est toujours parfait de répondre en utilisant le code, il suffit de créer une instance IBOutlet de UIView et d'ajouter les propriétés

Réponse courte:

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

Réponse longue:

Coins arrondis de UIView/UIButton, etc.

customUIView.layer.cornerRadius = 10

Épaisseur de la frontière

pcustomUIView.layer.borderWidth = 2

Couleur de la bordure

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

Ce n'est absolument possible que lorsque vous définissez layer.masksToBounds = true et reposez-vous.

0
Sunil Targe