UITextfield leftView / rightView relleno en iOS7

Las vistas leftView y rightView de un UITextField en iOS7 están realmente cerca del borde del campo de text.

¿Cómo puedo agregar algunos rellenos (horizontales) a esos elementos?

Intenté modificar el marco, pero no funcionó

uint padding = 10;//padding for iOS7 UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage]; iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16); textField.leftView = iconImageView; 

Tenga en count que no estoy interesado en agregar relleno al text del campo de text, como este set de relleno para UITextField con UITextBorderStyleNone

Estaba trabajando en esto yo mismo y usé esta solución:

 - (CGRect) rightViewRectForBounds:(CGRect)bounds { CGRect textRect = [super rightViewRectForBounds:bounds]; textRect.origin.x -= 10; return textRect; } 

Esto moverá la image de la derecha por 10 en lugar de tener la image apretada contra el borde en iOS 7.

Además, esto estaba en una subclass de UITextField , que puede ser creado por:

  1. Cree un file nuevo que sea una subclass de UITextField lugar del NSObject pnetworkingeterminado NSObject
  2. Agregue un nuevo método denominado - (id)initWithCoder:(NSCoder*)coder para configurar la image

     - (id)initWithCoder:(NSCoder*)coder { self = [super initWithCoder:coder]; if (self) { self.clipsToBounds = YES; [self setRightViewMode:UITextFieldViewModeUnlessEditing]; self.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_edit_icon.png"]]; } return self; } 
  3. Es posible que tenga que importar #import <QuartzCore/QuartzCore.h>

  4. Agregue el método rightViewRectForBounds anterior

  5. En Interface Builder, click TextField que desea subclass y cambie el atributo class al nombre de esta nueva subclass

Una solución mucho más simple, que aprovecha el contentMode :

  arrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"down_arrow"]]; arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height); arrow.contentMode = UIViewContentModeCenter; textField.rightView = arrow textField.rightViewMode = UITextFieldViewModeAlways; 

En Swift 2,

  let arrow = UIImageView(image: UIImage(named: "down_arrow")) arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height); arrow.contentMode = UIViewContentMode.Center self.textField.rightView = arrow self.textField.rightViewMode = UITextFieldViewMode.Always 

En Swift 3,

  let arrow = UIImageView(image: UIImage(named: "arrowDrop")) if let size = arrow.image?.size { arrow.frame = CGRect(x: 0.0, y: 0.0, width: size.width + 10.0, height: size.height) } arrow.contentMode = UIViewContentMode.center self.textField.rightView = arrow self.textField.rightViewMode = UITextFieldViewMode.always 

La forma más fácil es agregar una UIView a leftView / righView y agregar una ImageView a UIView, ajustar el origen de ImageView dentro de UIView en cualquier lugar que te guste, esto me funcionó como un encanto. Necesita solo unas pocas líneas de código

 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 26, 26)]; imgView.image = [UIImage imageNamed:@"img.png"]; UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)]; [paddingView addSubview:imgView]; [txtField setLeftViewMode:UITextFieldViewModeAlways]; [txtField setLeftView:paddingView]; 

Esto funciona muy bien para Swift:

 let imageView = UIImageView(image: UIImage(named: "image.png")) imageView.contentMode = UIViewContentMode.Center imageView.frame = CGRectMake(0.0, 0.0, imageView.image!.size.width + 20.0, imageView.image!.size.height) textField.rightViewMode = UITextFieldViewMode.Always textField.rightView = imageView 

Esto me funciona

 UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 20)]; self.passwordTF.leftView = paddingView; self.passwordTF.leftViewMode = UITextFieldViewModeAlways; 

Puede que te ayude.

Me gusta esta solución porque resuelve el problema con una sola línea de código

 myTextField.layer.sublayerTransform = CATransform3DMakeTranslation(10.0f, 0.0f, 0.0f); 

Nota: … o 2 si considera include una línea de QuartzCore 🙂

La mejor manera de hacer esto es simplemente hacer una class usando la subclass de UITextField y en el file .m

  #import "CustomTextField.h" #import <QuartzCore/QuartzCore.h> @implementation CustomTextField - (id)initWithCoder:(NSCoder*)coder { self = [super initWithCoder:coder]; if (self) { //self.clipsToBounds = YES; //[self setRightViewMode:UITextFieldViewModeUnlessEditing]; self.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,15,46)]; self.leftViewMode=UITextFieldViewModeAlways; } return self; } 

Al hacer esto, vaya a su guión gráfico o xib y click el inspector de identidad y reemplace UITextfield con su propia opción "CustomTextField" en class.

Nota: Si simplemente le da relleno con layout automático para el campo de text, su aplicación no se ejecutará y mostrará solo la pantalla en blanco.

Encontré esto en algún lugar …

 UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)]; paddingView.backgroundColor = [UIColor clearColor]; itemDescription.leftView = paddingView; itemDescription.leftViewMode = UITextFieldViewModeAlways; [self addSubview:itemDescription]; 

Cree una class UITextField personalizada y use esa class en lugar de UITextField. Anular – (CGRect) textRectForBounds: (CGRect) limita para establecer el rectángulo que necesita

Ejemplo

 - (CGRect)textRectForBounds:(CGRect)bounds{ CGRect textRect = [super textRectForBounds:bounds]; textRect.origin.x += 10; textRect.size.width -= 10; return textRect; } 

¡He tenido este problema yo mismo, y la solución más fácil es, con mucho, modificar tu image para simplemente agregar relleno a cada lado de la image!

Acabo de alterar mi image png para agregar relleno transparente de 10 píxeles, ¡y funciona bien, sin encoding alguna!

Un truco: agregue una UIView que contenga UIImageView a UITextField como rightView. Esta UIView debe ser de mayor tamaño, ahora coloque UIImageView a la izquierda. Entonces habrá un relleno de espacio desde la derecha.

 // Add a UIImageView to UIView and now this UIView to UITextField - txtFieldDate UIView *viewRightIntxtFieldDate = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 30)]; // (Height of UITextField is 30px so height of viewRightIntxtFieldDate = 30px) UIImageView *imgViewCalendar = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, 10, 10)]; [imgViewCalendar setImage:[UIImage imageNamed:@"calendar_icon.png"]]; [viewRightIntxtFieldDate addSubview:imgViewCalendar]; txtFieldDate.rightViewMode = UITextFieldViewModeAlways; txtFieldDate.rightView = viewRightIntxtFieldDate; 

Aquí hay una solución:

  UIView *paddingTxtfieldView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 42)]; // what ever you want txtfield.leftView = paddingTxtfieldView; txtfield.leftViewMode = UITextFieldViewModeAlways; 

El ejemplo a continuación es para agregar relleno horizontal a una vista izquierda que pasa a ser un ícono; puede usar el enfoque similar para agregar relleno a cualquier vista UIView que desee usar como la vista izquierda del campo de text.

Dentro de la subclass UITextField :

 static CGFloat const kLeftViewHorizontalPadding = 10.0f; @implementation TextFieldWithLeftIcon { UIImage *_image; UIImageView *_imageView; } - (instancetype)initWithFrame:(CGRect)frame image:(UIImage *)image { self = [super initWithFrame:frame]; if (self) { if (image) { _image = image; _imageView = [[UIImageView alloc] initWithImage:image]; _imageView.contentMode = UIViewContentModeCenter; self.leftViewMode = UITextFieldViewModeAlways; self.leftView = _imageView; } } return self; } #pragma mark - Layout - (CGRect)leftViewRectForBounds:(CGRect)bounds { CGFloat widthWithPadding = _image.size.width + kLeftViewHorizontalPadding * 2.0f; return CGRectMake(0, 0, widthWithPadding, CGRectGetHeight(bounds)); } 

Aunque somos una subclass UITextField aquí, creo que este es el enfoque más limpio.

 - (CGRect)rightViewRectForBounds:(CGRect)bounds { return CGRectMake(bounds.size.width - 40, 0, 40, bounds.size.height); } 

gracias chicos por sus respuestas, para mi sorpresa ninguno de ellos realmente encajó la image de vista correcta en mi campo de text al time que proporciona el relleno necesario. Entonces pensé en usar el modo AspectFill y sucedieron los milagros. Para los futuros buscadores, esto es lo que usé:

 UIImageView *emailRightView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 35, 35)]; emailRightView.contentMode = UIViewContentModeScaleAspectFill; emailRightView.image = [UIImage imageNamed:@"icon_email.png"]; emailTextfield.rightViewMode = UITextFieldViewModeAlways; emailTextfield.rightView = emailRightView; 

el 35 en el marco de mi vista de image representa la altura de mi emailTextfield, siéntase libre de ajustarlo a sus necesidades.

Si está utilizando un UIImageView como leftView, debe usar este código:

Precaución: no utilice la vista interior, ni la vista ni la vista, ni la vista.

 -(UIView*)paddingViewWithImage:(UIImageView*)imageView andPadding:(float)padding { float height = CGRectGetHeight(imageView.frame); float width = CGRectGetWidth(imageView.frame) + padding; UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)]; [paddingView addSubview:imageView]; return paddingView; } 

Código simple en Swift:

 let paddleView:UIView = UIView(frame: CGRect(x:0, y:0, width:8, height:20)); uiTextField.leftView = paddleView; uiTextField.leftViewMode = UITextFieldViewMode.Always; 

Creé un método personalizado en mi class ViewController, como se muestra a continuación:

 - (void) modifyTextField:(UITextField *)textField { // Prepare the imageView with the requinetworking image uint padding = 10;//padding for iOS7 UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage]; iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16); // Set the imageView to the left of the given text field. textField.leftView = iconImageView; textField.leftViewMode = UITextFieldViewModeAlways; } 

Ahora puedo llamar a ese método dentro del método ( viewDidLoad ) y enviar cualquiera de mis TextFields a ese método y agregar relleno tanto a la derecha como a la izquierda, y dar colors de text y background escribiendo solo una línea de código, de la siguiente manera:

 [self modifyTextField:self.firstNameTxtFld]; 

¡Esto funcionó perfectamente en iOS 7! Espero que esto también funcione en iOS 8 y 9 también.

Sé que agregar demasiadas vistas podría hacer que este object sea un poco más pesado para cargarse. Pero cuando me preocupaba la dificultad en otras soluciones, me encontré más pnetworkingispuesto a este método y más flexible con este uso. 😉

Espero que esta respuesta pueda ser útil o útil para encontrar otra solución para alguien más.

¡Aclamaciones!

La forma más fácil es simplemente cambiar el campo de text como RoundRect en lugar de Custom y ver la magia. 🙂

para Swift2, uso

 ... self.mSearchTextField.leftViewMode = UITextFieldViewMode.Always let searchImg = UIImageView(image: UIImage(named: "search.png")) let size = self.mSearchTextField.frame.height searchImg.frame = CGRectMake(0, 0, size,size) searchImg.contentMode = UIViewContentMode.ScaleAspectFit self.mSearchTextField.leftView = searchImg ...