Actualmente tengo el siguiente código para configurar una contraseña textfield:

  self.passwordTextField = [UITextField new];
  self.passwordTextField.placeholder = @"Password";
  self.passwordTextField.font = [UIFont systemFontOfSize:18.f];
  self.passwordTextField.secureTextEntry = YES;
  self.passwordTextField.returnKeyType = UIReturnKeyDone;
  self.passwordTextField.delegate = self;
  self.passwordTextField.backgroundColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:0.64];
  self.passwordTextField.layer.borderColor = [[UIColor lightGrayColor] CGColor];
  self.passwordTextField.layer.borderWidth = 1.0f;

  CGFloat textFieldHeight = 45.f;
  CGFloat textFieldWidth = 300.f;
  self.passwordTextField.frame = CGRectMake(DIALOG_VIEW_WIDTH/2.f - textFieldWidth / 2.f, 240.f, textFieldWidth, textFieldHeight);

  UIImageView *icon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"text-input-icon-password-key.png"]];
  icon.frame = CGRectMake(0, 0, 45.f, 45.f);
  icon.backgroundColor = [UIColor lightGrayColor];
  self.passwordTextField.leftView = icon;
  self.passwordTextField.leftViewMode = UITextFieldViewModeAlways;

  [self.dialogView addSubview:self.passwordTextField];

que me da esto:

¿Cómo puedo agregar relleno a un UITextField con un icono

Sin embargo, quiero añadir algunas más transparente relleno a la izquierda del marcador de posición de texto y a la derecha de la vista de la imagen que muestra el icono. Alguna idea de cómo esto se puede hacer?


Actualización: Gracias por las respuestas. He logrado este en la final por la creación de un UIView para el objeto en su totalidad, con un UIImageView para el icono y un UITextField incrustado en otro UIView para el texto. El resultado fue el siguiente:

¿Cómo puedo agregar relleno a un UITextField con un icono

InformationsquelleAutor Steve Walsh | 2014-03-11

4 Comentarios

  1. 14

    «Actualización: Gracias por las respuestas. He logrado este en la final por la creación de un UIView para el objeto en su totalidad, con un UIImageView para el icono y un UITextField incrustado en otro UIView para el texto.«

    Usted podría haber continuado utilizando el leftView propiedad de la UITextField tales:

    UIView *vwContainer = [[UIView alloc] init];
    [vwContainer setFrame:CGRectMake(0.0f, 0.0f, 50.0f, 45.0f)];
    [vwContainer setBackgroundColor:[UIColor clearColor]];
    
    UIImageView *icon = [[UIImageView alloc] init];
    [icon setImage:[UIImage imageNamed:@"text-input-icon-password-key.png"]];
    [icon setFrame:CGRectMake(0.0f, 0.0f, 45.0f, 45.0f)];
    [icon setBackgroundColor:[UIColor lightGrayColor]];
    
    [vwContainer addSubview:icon];
    
    [self.passwordTextField setLeftView:vwContainer];
    [self.passwordTextField setLeftViewMode:UITextFieldViewModeAlways];
  2. 2

    Si quieres un control total sobre el diseño personalizado, a continuación, usted debe subclase UITextField y reemplazar ambos leftViewRectForBounds: y placeholderRectForBounds: métodos. A continuación, puede devolver los marcos para las dos áreas y por lo tanto especificar el relleno entre ellos.

    • Es allí una manera de hacer esto sin primordial UITextField?
    • La respuesta de @Gabriel creo, cambiar la imagen que estás usando…
  3. 1

    Aquí es un UITextField subclase que permite inserciones en el leftView (icono), el texto y el texto de marcador de posición. Todos estos son configurables en IB

    class UITextFieldWithInsets: UITextField {
        @IBInspectable var horizontalInset:CGFloat = 0
        @IBInspectable var verticalInset:CGFloat = 0
    
        @IBInspectable var leftViewHorizontalInset:CGFloat = 0
        @IBInspectable var leftViewVerticalInset:CGFloat = 0
    
        override func textRectForBounds(bounds: CGRect) -> CGRect {
            return CGRectInset(bounds , horizontalInset , verticalInset)
        }
    
        override func editingRectForBounds(bounds: CGRect) -> CGRect {
            return CGRectInset(bounds , horizontalInset + leftViewHorizontalInset + leftViewWidth, verticalInset)
        }
    
        override func placeholderRectForBounds(bounds: CGRect) -> CGRect {
            return CGRectInset(bounds, horizontalInset + leftViewHorizontalInset + leftViewWidth, verticalInset)
        }
    
        override func leftViewRectForBounds(bounds: CGRect) -> CGRect {
            let verticalInsetForCentered = (bounds.height - leftViewHeight) / 2
            return CGRect(x: leftViewHorizontalInset, y: leftViewVerticalInset > 0 ? leftViewVerticalInset : verticalInsetForCentered, width: leftViewWidth, height: leftViewHeight)
        }
    
        private var leftViewWidth : CGFloat { get { return leftView?.frame.width ?? 0 } }
        private var leftViewHeight : CGFloat { get { return leftView?.frame.width ?? 0 } }
    }
    • Lector de cuidado: con esta solución el inset se aplica en ambos lados de la disminución de la zona de edición. Esto se puede corregir, por ejemplo, para editingRect, dejar que el cuerpo se deje xMargin = horizontalInset + leftViewHorizontalInset + leftViewWidth; return CGRect(x: xMargin, y: límites.origen.y, ancho: límites.tamaño.ancho – xMargin, altura: los límites.tamaño.altura)

Dejar respuesta

Please enter your comment!
Please enter your name here