fields - text field ios 11

UITextField Sólo borde superior e inferior

Question

Actualmente tengo una frontera regular. Me gustaría tener sólo un borde superior e inferior .

¿Cómo logro esto?

Al usar la propiedad de layer UITextField , tengo el siguiente código:

 self.layer.borderColor = [[UIColor colorWithRed:160/255.0f green:160/255.0f blue:160/255.0f alpha:1.0f] CGColor];
self.layer.borderWidth = 4.0f;

Tengo que hacerlo funcionar haciendo que mi UITextField sea muy largo , de modo que el usuario no vea los bordes izquierdo y derecho, pero me preguntaba si había una forma mejor y menos astuta de hacerlo.

He comprobado los documentos y cambiar el UITextField un UITextField no tiene esta opción.

Desde,

Un primer temporizador de iOS

Answer 1

@Sebyddd ¿por qué detenerse ahí? (;

EDITAR: Hay un problema con las líneas que se dibujan antes de que el diseño automático establezca el marco correcto para la vista. Edité mi respuesta con una solución: básicamente implica llamar a drawLines() en layoutSubviews() :

class FramedTextField: UITextField {
@IBInspectable var linesWidth: CGFloat = 1.0 { didSet{ drawLines() } }
@IBInspectable var linesColor: UIColor = UIColor.blackColor() { didSet{ drawLines() } }
@IBInspectable var leftLine: Bool = false { didSet{ drawLines() } }
@IBInspectable var rightLine: Bool = false { didSet{ drawLines() } }
@IBInspectable var bottomLine: Bool = false { didSet{ drawLines() } }
@IBInspectable var topLine: Bool = false { didSet{ drawLines() } }
func drawLines() {
if bottomLine {
add(CGRectMake(0.0, frame.size.height - linesWidth, frame.size.width, linesWidth))
}
if topLine {
add(CGRectMake(0.0, 0.0, frame.size.width, linesWidth))
}
if rightLine {
add(CGRectMake(frame.size.width - linesWidth, 0.0, linesWidth, frame.size.height))
}
if leftLine {
add(CGRectMake(0.0, 0.0, linesWidth, frame.size.height))
}
}
typealias Line = CGRect
private func add(line: Line) {
let border = CALayer()
border.frame = line
border.backgroundColor = linesColor.CGColor
layer.addSublayer(border)
}
override func layoutSubviews() {
super.layoutSubviews()
drawLines()
}
}

Answer 2

El gran y sencillo ejemplo de @ user3075378 en Swift.

var bottomBorder = CALayer()
bottomBorder.frame = CGRectMake(0.0, textField.frame.size.height - 1, textField.frame.size.width, 1.0);
bottomBorder.backgroundColor = UIColor.blackColor().CGColor
textField.layer.addSublayer(bottomBorder)

Answer 3

Espero que esto ayude, ponga esto dentro de una clase de anulación de campo de texto

UIView *view = [[UIView alloc] init];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.layer.borderWidth = 1;
view.backgroundColor = [UIColor blackColor];
[self addSubview:view];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:1.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:1.0]];

Answer 4

Gracias al usuario 3075378. Mi respuesta se basa en la suya. Añadiendo pequeñas líneas derecha e izquierda.

- (void)styleSearchTextField {
CALayer *bottomBorder = [CALayer layer], *leftBorder = [CALayer layer], *rightBorder = [CALayer layer];
CGFloat thickness = 1.0f;
CGFloat side_height = 6.0f;
bottomBorder.frame = CGRectMake(0.0f, searchTextField.frame.size.height - 1, searchTextField.frame.size.width, thickness);
leftBorder.frame = CGRectMake(0.0f, searchTextField.frame.size.height - side_height, thickness, searchTextField.frame.size.height - 1);
rightBorder.frame = CGRectMake(searchTextField.frame.size.width - 1, searchTextField.frame.size.height - side_height, thickness, searchTextField.frame.size.height - 1);
bottomBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;
leftBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;
rightBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;
[searchTextField.layer addSublayer:bottomBorder];
[searchTextField.layer addSublayer:leftBorder];
[searchTextField.layer addSublayer:rightBorder];
}

Answer 5

Le sugeriré que coloque una vista en el lado izquierdo del campo de texto y una vista en el lado derecho del campo de texto para cubrir el borde izquierdo / derecho.

UIView *v1 = [[UIView all] initWithFrame:CGRectMake(textfield.frame.origin.x - 5, textfield.frame.origin.y, 10, textifield.frame.size.height)];
UIView *v2 = [[UIView all] initWithFrame:CGRectMake(textfield.frame.origin.x + textfield.frame.size.with - 5, textfield.frame.origin.y, 10, textifield.frame.size.height)];

Answer 6

Puede usar capas para agregar líneas / formas a cualquier subclase UIView. Este código dibuja dos líneas en la parte superior e inferior de un campo de texto. Puede agregarlo a una subclase de un control o llamar directamente a un controlador de vista / vista principal.

CGRect layerFrame = CGRectMake(0, 0, _usernameField.frame.size.width, _usernameField.frame.size.height);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0);
CGPathAddLineToPoint(path, NULL, layerFrame.size.width, 0); // top line
CGPathMoveToPoint(path, NULL, 0, layerFrame.size.height);
CGPathAddLineToPoint(path, NULL, layerFrame.size.width, layerFrame.size.height); // bottom line
CAShapeLayer * line = [CAShapeLayer layer];
line.path = path;
line.lineWidth = 2;
line.frame = layerFrame;
line.strokeColor = [UIColor blackColor].CGColor;
[_usernameField.layer addSublayer:line];

Answer 7

Swift 3: Limpie con AutoLayout (Estoy usando PureLayout aquí, pero también puede hacerlo con NSLayoutConstraint)

func makeUnderline(for textField: UITextField) {
let borderLine = UIView()
borderLine.backgroundColor = UIColor.black
borderLine.autoSetDimension(.height, toSize: 1)
textField.addSubview(borderLine)
borderLine.autoPinEdgesToSuperviewEdges(with: UIEdgeInsets.zero, excludingEdge: .top)
}

Answer 8

También puede agregar vistas a la parte superior e inferior para usar como bordes.

// Top border
UIView *topBorder = [[UIView alloc]
initWithFrame:CGRectMake(0,
0,
textfield.frame.size.width,
4.0f)];
topBorder.backgroundColor = [UIColor colorWithRed:160/255.0f
green:160/255.0f
blue:160/255.0f
alpha:1.0f];
[textfield addSubview:topBorder];
// Bottom border
UIView *bottomBorder = [[UIView alloc]
initWithFrame:CGRectMake(0,
textfield.frame.origin.y +
textfield.frame.size.height - 4.0f,
textfield.frame.size.width,
4.0f)];
bottomBorder.backgroundColor = [UIColor colorWithRed:160/255.0f
green:160/255.0f
blue:160/255.0f
alpha:1.0f];
[textfield addSubview:bottomBorder];

Answer 9

Un enfoque que he encontrado que funciona bien es usar capas. Aquí hay un fragmento de código:

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0.0f, self.frame.size.height - 1, self.frame.size.width, 1.0f);
bottomBorder.backgroundColor = [UIColor blackColor].CGColor;
[myTextField.layer addSublayer:bottomBorder];

Espero que esto ayude a alguien.

Answer 10

puede crear una imagen con el borde superior e inferior y establecerla en el fondo de su UITextField:

yourTextField.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourBorderedImageName"]];