web-dev-qa-db-fra.com

UITextField définit la couleur de la bordure à l'aide du storyboard

J'aimerais définir la couleur de la bordure à l'aide du storyboard, si possible. J'ai vu répondre ici: UITextField border color

Et j'ai suivi la réponse dans le storyboard: enter image description here

Toutes les propriétés sont définies, mais TextField n’affiche pas de bordure. Aucune suggestion?

iosstoryboarduitextfield
13
katit

Comme l'a souligné Bogdan , vous pouvez très bien le faire avec des sous-classes simples et quelques bits de code. Après cela, tout sera éditable dans les Storyboards.

  1. Sous-classe UITextField
  2. Créez deux propriétés, une pour la largeur de la bordure et l'autre pour la couleur de la bordure
  3. Rendre ces variables IBInspectable et toute la classe IBDesignable
  4. Vous serez en mesure de changer la couleur et la largeur de la bordure et de voir le changement en temps réel.

Code pour illustration (Swift 3.1):

@IBDesignable
class FormTextField: UITextField {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
}

Edit: vous verrez ceci dans votre inspecteur Attributes

Attributes Inspector

11
Markus

Comme Bogdan l'a souligné, il est vrai que vous ne pouvez pas trouver la propriété layer.borderColor dans le storyboard, car il s'agit d'une opération d'exécution.

Cependant, vous pouvez toujours définir borderColor sans utiliser IB_DESIGNABLE, dans n’importe quelle vue (ou sous-classe UIView) avec un peu de codage.

Voici les étapes à suivre pour y parvenir,

  1. Créez une catégorie sur la classe CALayer. Déclarez une propriété de type UIColor avec un nom approprié, je l'appellerai borderUIColor.
  2. Ecrivez le passeur et le getter pour cette propriété.
  3. Dans la méthode 'Setter', définissez simplement la propriété "borderColor" du calque sur la nouvelle valeur CGColor des couleurs.
  4. Dans la méthode 'Getter', renvoyez UIColor avec borderColor.

P.S: N'oubliez pas que les catégories ne peuvent pas avoir de propriétés stockées. 'borderUIColor' est utilisé comme propriété calculée, juste comme référence pour réaliser ce sur quoi nous nous concentrons.

S'il vous plaît jeter un oeil à l'exemple de code ci-dessous;

Objectif c:

Fichier d'interface:

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

@interface CALayer (BorderProperties)

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

@end

Fichier d'implémentation:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

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

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

@end

Swift 3.1:

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

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

Et enfin, allez sur votre storyboard/XIB, suivez les étapes restantes;

  1. Cliquez sur l'objet Voir pour lequel vous souhaitez définir une couleur de bordure.
  2. Cliquez sur "Inspecteur d'identité" (3ème à gauche) dans le panneau "Utilitaire" (côté droit de l'écran).
  3. Sous "Attributs d'exécution définis par l'utilisateur", cliquez sur le bouton "+" pour ajouter un chemin d'accès à la clé.
  4. Définissez le type de chemin de clé sur "Couleur". 
  5. Entrez la valeur du chemin de clé sous "layer.borderUIColor". [Rappelez-vous que cela devrait être le nom de variable que vous avez déclaré dans la catégorie, pas borderColor ici c'est borderUIColor].
  6. Enfin, choisissez la couleur de votre choix.

Modifier: vous devez définir la valeur de la propriété layer.borderWidth sur au moins 1 pour afficher la couleur de la bordure.

Construire et exécuter . Happy Coding. :)

7
Rameswar Prasad

Je ne suis pas sûr que vous puissiez changer la couleur de la bordure d'un UITextfield dans le storyboard. Vous pouvez le changer par programme avec quelque chose comme:

UITextField *myTextField = (UITextField *)[self.view viewWithTag:1];
myTextField.borderStyle = UITextBorderStyleLine;
myTextField.layer.borderWidth = 2;
myTextField.layer.borderColor = [[UIColor redColor] CGColor];

J'espère que cela t'aides.

2
Gismay

Ajout à markus, mettez le code complet:

import UIKit //IMPORTANT
@IBDesignable
class BorderTextField: UITextField {
 @IBInspectable var borderColor: UIColor? {
    didSet {
        layer.borderColor = borderColor?.cgColor
    }
 }
 @IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
 }
}
0
Gerardo Salazar Sánchez

Ceci est une variante de la réponse @rameswar qui, je pense, est correcte. Comme nous appliquons une UIColor, je pense qu'il est préférable d'écrire une extension pour la UITextField à la place (UI choses ensemble):

extension UITextField {

  var borderColor : UIColor? {
    get {
      if let cgcolor = layer.borderColor {
        return UIColor(CGColor: cgcolor)
      } else {
        return nil
      }
    }
    set {
      layer.borderColor = newValue?.CGColor

      // width must be at least 1.0
      if layer.borderWidth < 1.0 {
        layer.borderWidth = 1.0
      }
    }
  }
}

La propriété d'exécution serait alors borderColor (vous n'avez donc pas besoin de taper layer. et je pense que c'est un peu plus propre que borderUIColor).

La borderColor de CALayer est optionnelle, donc c'est cette propriété. Il devient noir lorsqu'il est défini sur nil

Et finalement, le layer.borderWidth est défini sur un minimum de 1,0 car la couleur n’est pas définie autrement.

0
FranMowinckel

Il n'affiche aucune bordure à cause de la propriété layer.borderColor. Ses attributs de type CGColor et Runtime ne le supportent pas encore par défaut. Désactiver un seul attribut désactive également les autres.

Pour le faire à partir du storyboard, mais aussi du code et des sous-classes, vous pouvez utiliser cette méthode:

Sous-classe UITextField et créez une propriété IB_DESIGNABLE UIColor que vous transformerez ensuite en CGColor pour l'appliquer à self.layer.borderColor.

0
Bogdan Raducan