Color de borde UITextField


133

Realmente deseo establecer mi propio color en el borde UITextField. Pero hasta ahora pude descubrir cómo cambiar solo el estilo de la línea de borde.

He usado la propiedad de fondo para establecer el color de fondo de esta manera:

self.textField.backgroundColor = textFieldColor;

Pero también tengo que cambiar el color del borde UITextField. Y mi pregunta era sobre cómo cambiar el color del borde.


Muchas respuestas útiles, pero solo una ( stackoverflow.com/a/5387607/826946 ) mencionó algo que encontré clave: textField.borderStyle = UITextField.BorderStyle.none. Sin eso obtengo rastros de la frontera incorporada. Aparentemente, una vez que no usa el borde incorporado y comienza a definir el suyo, debe decir que no lo quiere usando borderStyle = none y luego definir todos los parámetros (color, cornerRadius y borderWidth)
Andy Weinstein

Respuestas:


274

QuartzCoreMarco de importación en su clase:

#import <QuartzCore/QuartzCore.h>

y para cambiar el color del borde use el siguiente fragmento de código (lo estoy configurando en redColor),

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

Para volver al diseño original, simplemente configure el color del borde en color claro,

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

en código rápido

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

3
Es #import <QuartzCore / QuartzCore.h> en lugar de QuartCore (olvidó la z)
cldrr

54
En iOS 7 debe establecer un ancho de borde o el color no tendrá efecto.
Micah

1
Como principiante, esto no tiene sentido para mí. Si comienzo una aplicación vacía en blanco, vaya al guión gráfico y agregue un campo TextView. ¿Dónde importo el cuarzo? ¿Dónde agrego la información de ancho de borde anterior? ¿Qué es "textField" y cómo sabe de qué campo de texto estoy hablando?
Nathan McKaskle el

1
@Sephethus si aún no lo has descubierto, esto es lo que tienes que hacer: debes "conectar" el campo de texto que creaste en el guión gráfico y cambiar estas propiedades mediante programación . Una vez que haya conectado el guión gráfico, ingrese a su código (por ejemplo, en viewDidLoad) y cambie estas propiedades diciendo self.myTextField.layer.cornerRadiusetc. Estos cambios entrarán en vigencia tan pronto como inicie su aplicación, pero no puede ver los cambios en el Guión gráfico. Si esto no tiene ningún sentido para usted, le sugiero que vaya a un sitio web, por ejemplo, Ray Wenderlich, y lea algunos textos para principiantes.
Aleksander

@NathanMcKaskle "¿Dónde importo el cuarzo?" Lo agrega en la parte superior de su archivo ViewController.h. "¿Qué es" textField "y cómo sabe de qué campo de texto estoy hablando?" Puede crear un campo de texto 'local' IBOutlet var y conectarlo al TextField (no TextView) que acaba de poner en el Storyboard. Para obtener más información, consulte aquí: hubpages.com/technology/… "¿Dónde agrego la información de ancho de borde anterior?" En cualquier lugar, pero preferiblemente, en la función viewDidLoad.
Chen Li Yong

21

Prueba esto:

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];

e importar QuartzCore:

#import <QuartzCore/QuartzCore.h>

17

Importa la siguiente clase:

#import <QuartzCore/QuartzCore.h> 

// Código para configurar el color gris para el borde del campo de texto

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

Reemplace 171.0con el número de color correspondiente según sea necesario.


14

¡Esta pregunta aparece bastante alta en una búsqueda de Google y funcionó en su mayor parte! Encontré que la respuesta de Salman Zaidi fue parcialmente correcta para iOS 7.

Debe realizar una modificación en el código de "reversión". Descubrí que lo siguiente para revertir funcionó perfectamente:

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

Entiendo que esto probablemente se deba a cambios en iOS 7.


10

Para simplificar estas acciones a partir de la respuesta aceptada, también puede crear Categoría para UIView(ya que esto funciona para todas las subclases de UIView, no solo para los campos de texto:

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

Uso:

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

9

Si usa un TextField con esquinas redondeadas, use este código:

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

Para eliminar el borde:

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

8

Actualización para swift 5.0

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

4

color del bordeTambién se puede establecer en cualquier vista (o subclase UIView) usando el guión gráfico con un poco de codificación y este enfoque podría ser realmente útil si está configurando el color del borde en varios objetos de la interfaz de usuario.

A continuación se detallan los pasos para lograrlo.

  1. Crea una categoría en la clase CALayer. Declare una propiedad de tipo UIColor con un nombre adecuado, la nombraré como borderUIColor .
  2. Escriba el setter y getter para esta propiedad.
  3. En el método 'Setter' simplemente establezca la propiedad "borderColor" de la capa en el nuevo valor CGColor de colores.
  4. En el método 'Getter', devuelve UIColor con borderColor de la capa.

PD: Recuerde, las categorías no pueden tener propiedades almacenadas. 'borderUIColor' se usa como una propiedad calculada, solo como una referencia para lograr lo que nos estamos enfocando.

Por favor, eche un vistazo a la muestra de código a continuación;

C objetivo:

Archivo de interfaz

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

@interface CALayer (BorderProperties)

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

@end

Archivo de Implementación:

#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!)
    }
}
}

Y finalmente vaya a su guión gráfico / XIB, siga los pasos restantes;

  1. Haga clic en el objeto Ver para el que desea establecer el Color del borde.
  2. Haga clic en "Inspector de identidad" (tercero desde la izquierda) en el panel "Utilidad" (lado derecho de la pantalla).
  3. En "Atributos de tiempo de ejecución definidos por el usuario", haga clic en el botón "+" para agregar una ruta clave.
  4. Establezca el tipo de ruta de la clave en "Color".
  5. Ingrese el valor para la ruta clave como "layer.borderUIColor". [Recuerde que este debería ser el nombre de la variable que declaró en la categoría, no borderColor aquí es borderUIColor ].
  6. Finalmente elige el color que quieras.

Tienes que establecer layer.borderWidth valor de la propiedad de al menos 1 para ver el color del borde.

Construye y corre. Feliz codificación. :)


No publique respuestas idénticas a varias preguntas. Publique una buena respuesta, luego vote / marque para cerrar las otras preguntas como duplicados. Si la pregunta no es un duplicado, adapte sus respuestas a la pregunta .
josliber

1

Aquí hay una implementación rápida. Puede hacer una extensión para que otras vistas la puedan usar si lo desea.

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

Llamar a esto como: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.