Couleur de bordure UITextField


133

J'ai vraiment un grand souhait de définir ma propre couleur sur la bordure UITextField. Mais jusqu'à présent, j'ai pu découvrir comment changer le style de la ligne de bordure uniquement.

J'ai utilisé la propriété background pour définir la couleur d'arrière-plan de cette manière:

self.textField.backgroundColor = textFieldColor;

Mais je dois aussi changer la couleur de la bordure UITextField. Et ma question portait sur la façon de changer la couleur de la bordure.


Beaucoup de réponses utiles mais une seule ( stackoverflow.com/a/5387607/826946 ) a mentionné quelque chose que j'ai trouvé clé: textField.borderStyle = UITextField.BorderStyle.none. Sans cela, j'obtiens des traces de la bordure intégrée. Apparemment, une fois que vous n'utilisez pas la bordure intégrée et commencez à définir la vôtre, vous devez dire que vous ne le souhaitez pas en utilisant borderStyle = none, puis définir tous les paramètres (couleur, cornerRadius et borderWidth)
Andy Weinstein

Réponses:


274

Importez le QuartzCoreframework dans votre classe:

#import <QuartzCore/QuartzCore.h>

et pour changer la couleur de la bordure, utilisez l'extrait de code suivant (je le règle sur redColor),

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

Pour revenir à la disposition d'origine, définissez simplement la couleur de la bordure sur la couleur claire

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

en code swift

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor

3
C'est #import <QuartzCore / QuartzCore.h> au lieu de QuartCore (vous avez oublié le z)
cldrr

54
Dans iOS 7, vous devez définir une largeur de bordure ou la couleur ne prend pas effet.
Micah

1
En tant que débutant, cela n'a aucun sens pour moi. Si je démarre une application vide et vide, accédez au storyboard et ajoutez un champ TextView. Où importer le quartzcore? Où ajouter les informations de borderwidth ci-dessus? Qu'est-ce que "textField" et comment sait-il de quel champ de texte je parle?
Nathan McKaskle

1
@Sephethus si vous ne l'avez pas encore compris, voici ce que vous devez faire: vous devez "raccorder" le champ de texte que vous avez créé dans le storyboard et modifier ces propriétés par programme . Une fois que vous avez connecté le storyboard, vous entrez dans votre code (par exemple dans viewDidLoad) et modifiez ces propriétés en disant self.myTextField.layer.cornerRadiusetc. Ces changements prendront effet dès que vous lancerez votre application, mais vous ne pouvez pas voir les changements dans le storyboard. Si cela n'a aucun sens pour vous, je vous suggère d'aller sur un site Web, par exemple Ray Wenderlich, et de lire quelques tutoriels pour débutants.
Aleksander

@NathanMcKaskle "Où dois-je importer le quartzcore?" Vous l'ajoutez en haut de votre fichier ViewController.h. "Qu'est-ce que" textField "et comment sait-il de quel champ de texte je parle?" Vous pouvez créer une variable IBOutlet de champ de texte «local» et la connecter au TextField (et non au TextView) que vous venez de mettre sur le Storyboard. Pour plus d'informations, cliquez ici: hubpages.com/technology / ... "Où puis-je ajouter les informations de borderwidth ci-dessus?" N'importe où, mais de préférence, à la fonction viewDidLoad.
Chen Li Yong

21

Essaye ça:

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

et importez QuartzCore:

#import <QuartzCore/QuartzCore.h>

17

Importez la classe suivante:

#import <QuartzCore/QuartzCore.h> 

// Code pour définir la couleur grise de la bordure du champ de texte

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

Remplacez-le 171.0par le numéro de couleur correspondant si nécessaire.


14

cette question apparaît assez haut sur une recherche Google et a fonctionné pour la plupart! J'ai trouvé que la réponse de Salman Zaidi était partiellement correcte pour iOS 7.

Vous devez apporter une modification au code de «retour». J'ai trouvé que ce qui suit pour revenir fonctionnait parfaitement:

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

Je comprends que cela est probablement dû à des changements dans iOS 7.


10

Pour simplifier ces actions à partir de la réponse acceptée, vous pouvez également créer une catégorie pour UIView(puisque cela fonctionne pour toutes les sous-classes de UIView, pas seulement pour les champs de texte:

UIView + Additions.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView + Additions.m:

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

Usage:

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];

9

Si vous utilisez un TextField avec des coins arrondis, utilisez ce code:

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

Pour supprimer la bordure:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];

8

Mise à jour pour Swift 5.0

textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0

4

borderColor sur n'importe quelle vue (ou sous-classe UIView) peut également être définie à l'aide du storyboard avec un peu de codage et cette approche peut être très pratique si vous définissez la couleur de la bordure sur plusieurs objets d'interface utilisateur.

Voici les étapes 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 la nommerai borderUIColor .
  2. Écrivez le setter 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 de couleurs.
  4. Dans la méthode 'Getter', retournez UIColor avec borderColor du calque.

PS: rappelez-vous, les catégories ne peuvent pas avoir de propriétés stockées. 'borderUIColor' est utilisé comme une propriété calculée, juste comme une référence pour réaliser ce sur quoi nous nous concentrons.

Veuillez consulter 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 2.0:

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 View pour lequel vous souhaitez définir la couleur de la bordure.
  2. Cliquez sur «Inspecteur d'identité» (3e à partir de la 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 de clé.
  4. Définissez le type de chemin de clé sur "Couleur".
  5. Entrez la valeur du chemin de clé sous la forme "layer.borderUIColor". [Souvenez-vous que cela devrait être le nom de la variable que vous avez déclaré dans la catégorie, pas borderColor ici c'est borderUIColor ].
  6. Enfin, choisissez la couleur que vous voulez.

Vous devez définir la valeur de la propriété layer.borderWidth sur au moins 1 pour voir la couleur de la bordure.

Construisez et exécutez. Codage heureux. :)


Veuillez ne pas publier de réponses identiques à plusieurs questions. Publiez une bonne réponse, puis votez / marquez pour fermer les autres questions comme des doublons. Si la question n'est pas un doublon, adaptez vos réponses à la question .
josliber

1

Voici une implémentation Swift. Vous pouvez créer une extension pour qu'elle soit utilisable par d'autres vues si vous le souhaitez.

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

Appelez cela comme: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true).

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.