UITextField只有顶部和底部边框

我目前有一个正常的边界。 我只想要有一个顶部和底部的边框 。

我如何做到这一点？

使用UITextField的layer属性，我有以下代码：

  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; 

我有一种使我的UITextField额外的长时间工作 ，以便用户没有看到左边界和右边界，但我只是想知道是否有一个更好的，不那么hackish这样做？

我检查了文档 ，并且更改UITextField的borderStyle没有这个选项。

从，

iOS的第一个计时器

Answer 1

我发现的一个方法是使用图层。 这是一个片段：

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

希望这有助于某人。

Answer 2

@ user3075378在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

@Sebyddd为什么停在那里？ （;

编辑：有一个问题，在自动布局设置视图的正确框架之前画线，我编辑我的答案与修复：它基本上涉及在layoutSubviews()调用drawLines() 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 4

您可以创build一个带有顶部和底部边框的图像，并将其设置为UITextField的背景：

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

Answer 5

您也可以将视图添加到顶部和底部以用作边框。

 // 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 6

您可以使用图层为任何UIView子类添加线条/形状。 此代码在文本字段的顶部和底部绘制两行。 您可以将它添加到控件的子类中，或者直接在父视图/视图控制器中调用它。

 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：用AutoLayout清理（我在这里使用PureLayout，但是你也可以用普通的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

我build议你在文本框左侧放置一个视图，在文本框右侧放置一个视图以覆盖左侧/右侧边框。

 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 9

希望这有助于，把它放在一个文本字段覆盖类

 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 10

感谢user3075378。 我的回答是基于他的。 增加左右小行。

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