Pregunta 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 texto.

¿Cómo puedo agregar algo de relleno (horizontal) a esos elementos?

Traté de 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 cuenta que no estoy interesado en agregar relleno al texto del campo de texto, como este Establecer relleno para UITextField con UITextBorderStyleNone


75
2017-10-14 23:39


origen


Respuestas:


Solo 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 imagen desde la derecha por 10 en lugar de tener la imagen apretada contra el borde en iOS 7.

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

  1. Crea un nuevo archivo que sea una subclase de UITextField en lugar de la predeterminada NSObject
  2. Agregue un nuevo método llamado - (id)initWithCoder:(NSCoder*)coder para establecer la imagen

    - (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. Puede que tenga que importar #import <QuartzCore/QuartzCore.h>

  4. Añade el rightViewRectForBounds método anterior

  5. En Interface Builder, haga clic en el campo de texto en el que desea crear una subclase y cambie el atributo de clase por el nombre de esta nueva subclase


69
2017-10-15 04:10



Una solución mucho más simple, que aprovecha 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

142
2018-06-24 13:53



La manera más fácil es agregar un UIView a leftView / righView y agregar un ImageView a UIView, ajustar el origen de ImageView dentro de UIView en cualquier lugar que desee, esto funcionó para mí como un encanto. Solo necesita 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];

38
2018-06-27 11:48



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

11
2017-07-31 17:08



Esto funciona para mí

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

Que te ayude


6
2017-08-01 04:57



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 incluir QuartzCore en una línea :)


4
2017-12-24 11:01



La mejor manera de hacerlo es simplemente hacer una clase usando la subclase de UITextField y en el archivo .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 hacerlo, vaya a su storyboard o xib y haga clic en el inspector de identidad y reemplace UITextfield con su propia opción "CustomTextField" en clase.

Nota: Si simplemente proporciona relleno con diseño automático para el campo de texto, su aplicación no se ejecutará y mostrará solo la pantalla en blanco.


3
2018-03-19 08:26



Encontré esto en alguna parte ...

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

[self addSubview:itemDescription];

1
2017-10-14 23:45



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

Ejemplo

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

1
2017-10-15 00:23