iOS Utilisation de IBInspectable et IBDesignable


Exemple

IBInspectable propriétés IBDesignable et IBDesignable UIView sont une (ou deux) des nouvelles fonctionnalités les plus intéressantes des versions récentes de Xcode. Celles-ci n'ont rien à voir avec les fonctionnalités de votre application mais ont un impact sur l'expérience des développeurs dans Xcode. L'objectif est de pouvoir inspecter visuellement les vues personnalisées de votre application iOS sans l'exécuter. Supposons donc que vous ayez une vue personnalisée nommée CustomView qui hérite de UIView . Dans cette vue personnalisée, il affichera une chaîne de texte avec une couleur désignée. Vous pouvez également choisir de ne pas afficher de texte. Nous aurons besoin de trois propriétés:

var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true

Nous pouvons alors remplacer la fonction drawRect dans la classe:

if showText {
    if let text = text {
        let s = NSString(string: text)
        s.drawInRect(rect,
            withAttributes: [
                NSForegroundColorAttributeName: textColor,
                NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
            ])
    }
}

En supposant que la propriété text est définie, cela dessine une chaîne dans le coin supérieur gauche de la vue lorsque l'application est exécutée. Le problème est que nous ne saurons pas à quoi cela ressemble sans exécuter l'application. C'est là IBInspectable et IBDesignable . IBInspectable nous permet de définir visuellement les valeurs de propriété de la vue dans Xcode, comme avec les contrôles intégrés. IBDesignable nous montrera un aperçu visuel dans le storyboard. Voici comment la classe devrait ressembler:

@IBDesignable
class CustomView: UIView {
    @IBInspectable var textColor: UIColor = UIColor.blackColor()
    @IBInspectable var text: String?
    @IBInspectable var showText: Bool = true

    override func drawRect(rect: CGRect) {
        // ...
    }
}

Ou dans l'objectif C:

IB_DESIGNABLE
@interface CustomView: UIView

@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;

@end

@implementation CustomView

- (instancetype)init {
    if(self = [super init]) {
        self.textColor = [UIColor blackColor];
        self.showText = YES;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    //...
}

@end

Les prochaines captures d'écran montrent ce qui se passe dans Xcode. Le premier est ce qui se passe après l'ajout de la classe révisée. Notez qu'il existe trois nouveaux éléments d'interface utilisateur pour les trois propriétés. La couleur du texte affiche un sélecteur de couleurs, le texte est juste une zone de saisie et Afficher le texte nous donne les options pour Off et On qui sont respectivement false et true .

Le suivant est après avoir changé la couleur du texte en rouge en utilisant le sélecteur de couleur. De plus, du texte a été fourni pour que la fonction drawRect l’affiche. Notez que la vue dans Interface Builder a également été mise à jour.

Enfin, la définition de l'option Afficher le texte sur Off dans l'inspecteur de propriétés fait disparaître l'affichage de texte dans Interface Builder.

Cependant, nous avons tous besoin de créer un UIView arrondi à plusieurs vues de votre Storyboard Au lieu de déclarer IBDesignable à chaque vue de Storyboard , il est préférable de créer une Extension de UIView et de créer une interface utilisateur UIView chaque UIView tout au long du projet pour créer une vue arrondie en définissant le rayon du coin. Un rayon de bordure configurable sur toute UIView que vous créez dans le storyboard.

extension UIView {
    
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
    
}

entrer la description de l'image ici