Add bottom border line to UI TextField view in SwiftUI / Swift / Objective-C / Xamarin

You can create this extension outside class and replace width with whatever borderWidth you want.

**Swift 4**

extension UITextField
{
func setBottomBorder(withColor color: UIColor)
{
self.borderStyle = UITextBorderStyle.none
self.backgroundColor = UIColor.clear
let width: CGFloat = 1.0

let borderLine = UIView(frame: CGRect(x: 0, y: self.frame.height - width, width: self.frame.width, height: width))
borderLine.backgroundColor = color
self.addSubview(borderLine)
}
}


**Original**


extension UITextField
{
func setBottomBorder(borderColor: UIColor)
{
self.borderStyle = UITextBorderStyle.None
self.backgroundColor = UIColor.clearColor()
let width = 1.0

let borderLine = UIView(frame: CGRectMake(0, self.frame.height - width, self.frame.width, width))
borderLine.backgroundColor = borderColor
self.addSubview(borderLine)
}
}

and then add this to your viewDidLoad replacing yourTextField with your UITextField variable and with any color you want in the border

yourTextField.setBottomBorder(UIColor.blackColor())

This basically adds a view with that color at the bottom of the text field.

import UIkit

extension UITextField

{

func underlinedLogin()

{

let border = CALayer()

let width = CGFloat(1.0)

border.borderColor = UIColor.black.cgColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = width
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
}

call method on viewdidload

`mobileNumberTextField.underlinedLogin()`

`passwordTextField.underlinedLogin()`

//select like text field on mainstoryboard

[![image][1]][1]


[1]:

** Here myTF is outlet for MT TEXT FIELD **

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: self.myTF.frame.size.height - width, width: self.myTF.frame.size.width, height: self.myTF.frame.size.height)

border.borderWidth = width
self.myTF.layer.addSublayer(border)
self.myTF.layer.masksToBounds = true

[![enter image description here][1]][1]

**Objective C**

[txt.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[txt.layer setBorderColor: [[UIColor grayColor] CGColor]];
[txt.layer setBorderWidth: 0.0];
[txt.layer setCornerRadius:12.0f];
[txt.layer setMasksToBounds:NO];
[txt.layer setShadowRadius:2.0f];
txt.layer.shadowColor = [[UIColor blackColor] CGColor];
txt.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
txt.layer.shadowOpacity = 1.0f;
txt.layer.shadowRadius = 1.0f;

**Swift**



txt.layer.backgroundColor = UIColor.white.cgColor
txt.layer.borderColor = UIColor.gray.cgColor
txt.layer.borderWidth = 0.0
txt.layer.cornerRadius = 5
txt.layer.masksToBounds = false
txt.layer.shadowRadius = 2.0
txt.layer.shadowColor = UIColor.black.cgColor
txt.layer.shadowOffset = CGSize.init(width: 1.0, height: 1.0)
txt.layer.shadowOpacity = 1.0
txt.layer.shadowRadius = 1.0

[1]:

None of these solutions really met my expectations. I wanted to **subclass** the TextField since I don't want to set the border manually all the time. I also wanted to **change the border color** e.g. for an error. So here's my solution with `Anchors`:

class CustomTextField: UITextField {

var bottomBorder = UIView()

override func awakeFromNib() {

// Setup Bottom-Border

self.translatesAutoresizingMaskIntoConstraints = false

bottomBorder = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1) // Set Border-Color
bottomBorder.translatesAutoresizingMaskIntoConstraints = false

addSubview(bottomBorder)

bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
bottomBorder.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
bottomBorder.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
bottomBorder.heightAnchor.constraint(equalToConstant: 1).isActive = true // Set Border-Strength

}
}


---- Optional ----

To change the color add sth like this to the `CustomTextField Class`:

@IBInspectable var hasError: Bool = false {
didSet {

if (hasError) {

bottomBorder.backgroundColor = UIColor.red

} else {

bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1)

}

}
}

And to trigger the Error call this after you created an instance of CustomTextField

textField.hasError = !textField.hasError

[![enter image description here][1]][1]

Hope it helps someone ;)


[1]:

Here is swift3 code with @IBInspectable


create a new file Cocoa Touch Class Swift File


import UIKit


extension UIView {

@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}

@IBInspectable var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}

@IBInspectable var borderColor: UIColor? {
get {
return UIColor(cgColor: layer.borderColor!)
}
set {
layer.borderColor = newValue?.cgColor
}
}

@IBInspectable var leftBorderWidth: CGFloat {
get {
return 0.0 // Just to satisfy property
}
set {
let line = UIView(frame: CGRect(x: 0.0, y: 0.0, width: newValue, height: bounds.height))
line.translatesAutoresizingMaskIntoConstraints = false
line.backgroundColor = UIColor(cgColor: layer.borderColor!)
line.tag = 110
self.addSubview(line)

let views = ["line": line]
let metrics = ["lineWidth": newValue]
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line(==lineWidth)]", options: [], metrics: metrics, views: views))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line]|", options: [], metrics: nil, views: views))
}
}

@IBInspectable var topBorderWidth: CGFloat {
get {
return 0.0 // Just to satisfy property
}
set {
let line = UIView(frame: CGRect(x: 0.0, y: 0.0, width: bounds.width, height: newValue))
line.translatesAutoresizingMaskIntoConstraints = false
line.backgroundColor = borderColor
line.tag = 110
self.addSubview(line)

let views = ["line": line]
let metrics = ["lineWidth": newValue]
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line]|", options: [], metrics: nil, views: views))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line(==lineWidth)]", options: [], metrics: metrics, views: views))
}
}

@IBInspectable var rightBorderWidth: CGFloat {
get {
return 0.0 // Just to satisfy property
}
set {
let line = UIView(frame: CGRect(x: bounds.width, y: 0.0, width: newValue, height: bounds.height))
line.translatesAutoresizingMaskIntoConstraints = false
line.backgroundColor = borderColor
line.tag = 110
self.addSubview(line)

let views = ["line": line]
let metrics = ["lineWidth": newValue]
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "[line(==lineWidth)]|", options: [], metrics: metrics, views: views))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line]|", options: [], metrics: nil, views: views))
}
}
@IBInspectable var bottomBorderWidth: CGFloat {
get {
return 0.0 // Just to satisfy property
}
set {
let line = UIView(frame: CGRect(x: 0.0, y: bounds.height, width: bounds.width, height: newValue))
line.translatesAutoresizingMaskIntoConstraints = false
line.backgroundColor = borderColor
line.tag = 110
self.addSubview(line)

let views = ["line": line]
let metrics = ["lineWidth": newValue]
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line]|", options: [], metrics: nil, views: views))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[line(==lineWidth)]|", options: [], metrics: metrics, views: views))
}
}
func removeborder() {
for view in self.subviews {
if view.tag == 110 {
view.removeFromSuperview()
}

}
}
}

and replace the file with the below code and you will get the option in storyboard attribute inspector like this

[![enter image description here][1]][1]




[1]:

Enjoy :)

You can create a subclass of `UITextField` as shown below:

class TextField : UITextField {

override var tintColor: UIColor! {

didSet {
setNeedsDisplay()
}
}

override func draw(_ rect: CGRect) {

let startingPoint = CGPoint(x: rect.minX, y: rect.maxY)
let endingPoint = CGPoint(x: rect.maxX, y: rect.maxY)

let path = UIBezierPath()

path.move(to: startingPoint)
path.addLine(to: endingPoint)
path.lineWidth = 2.0

tintColor.setStroke()

path.stroke()
}
}

You can use this **ORGANIZED** and can also **CUSTOMIZE** this extension further:

> "**One Line Implementation**" in **viewDidAppear**(so that frame size will be correct):


// Add layer in your textfield
yourTextField.addLayer(.bottom).addPadding(.left)


// Extension
extension UITextField {

enum Position {
case up, bottom, right, left
}

// MARK: - Add Single Line Layer
func addLayer(_ position: Position) -> UITextField {

// bottom layer
let bottomLayer = CALayer()
// set width
let height = CGFloat(1.0)
bottomLayer.borderWidth = height
// set color
bottomLayer.borderColor = UIColor.white.cgColor
// set frame
// y position changes according to the position
let yOrigin = position == .up ? 0.0 : frame.size.height - height
bottomLayer.frame = CGRect.init(x: 0, y: yOrigin, width: frame.size.width, height: height)
layer.addSublayer(bottomLayer)
layer.masksToBounds = true

return self
}

// Add right/left padding view in textfield
func addPadding(_ position: Position, withImage image: UIImage? = nil) {
let paddingHeight = frame.size.height
let paddingViewFrame = CGRect.init(x: 0.0, y: 0.0, width: paddingHeight * 0.6, height: paddingHeight)
let paddingImageView = UIImageView.init(frame: paddingViewFrame)
paddingImageView.contentMode = .scaleAspectFit

if let paddingImage = image {
paddingImageView.image = paddingImage
}

// Add Left/Right view mode
switch position {
case .left:
leftView = paddingImageView
leftViewMode = .always
case .right:
rightView = paddingImageView
rightViewMode = .always
default:
break
}
}
}

On Swift 3. You can create an extension and add after your view class.

extension UITextField
{
func setBottomBorder(borderColor: UIColor)
{

self.borderStyle = UITextBorderStyle.none
self.backgroundColor = UIColor.clear
let width = 1.0

let borderLine = UIView()
borderLine.frame = CGRect(x: 0, y: Double(self.frame.height) - width, width: Double(self.frame.width), height: width)

borderLine.backgroundColor = borderColor
self.addSubview(borderLine)
}
}

What I did was to create an extension to UITextField and added a Designer editable property. Setting this property to any color would change the border (bottom) to that color (setting other borders to none).

Since this also requires to change the place holder text color, I also added that to the extension.

extension UITextField {

@IBInspectable var placeHolderColor: UIColor? {
get {
return self.placeHolderColor
}
set {
self.attributedPlaceholder = NSAttributedString(string:self.placeholder != nil ? self.placeholder! : "", attributes:[NSForegroundColorAttributeName: newValue!])
}
}


@IBInspectable var bottomBorderColor: UIColor? {
get {
return self.bottomBorderColor
}
set {
self.borderStyle = UITextBorderStyle.None;
let border = CALayer()
let width = CGFloat(0.5)
border.borderColor = newValue?.CGColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)

border.borderWidth = width
self.layer.addSublayer(border)
self.layer.masksToBounds = true

}
}
}