Swift textfields without border

Question

I am new to swift. Your help will be really appreciated.

I have two textfields in my application. How would I create same UI as given in the pic below.

I want to create textfields with only one below border as given in the screenshot.

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

This is very easy with IB , don't use any boarder for textfield and add a label right under the textfield which width is same as textfield and height is 1 or 2 px, remove label text & finally most important give a background color to the label (EX:gray) , thats it .... hope it helps — Mahbub Ahmed, Apr 11 '17 at 00:33

score 0 · Answer 1 · answered Apr 11 '17 at 00:16

@IBOutlet var textField: UITextField! {
  didSet {
    let border = CALayer()
    let width: CGFloat = 1 // this manipulates the border's width
    border.borderColor = UIColor.darkGray.cgColor
    border.frame = CGRect(x: 0, y: textField.frame.size.height - width,
      width: textField.frame.size.width, height: textField.frame.size.height)

    border.borderWidth = width
    textField.layer.addSublayer(border)
    textField.layer.masksToBounds = true
  }
}

score 0 · Answer 2 · answered Apr 11 '17 at 00:40

Create a subclass of UITextField so you can reuse this component across multiple views without have to re implement the drawing code. Expose various properties via @IBDesignable and @IBInspectable and you can have control over color and thickness in the story board. Also - implement a "redraw" on by overriding layoutSubviews so the border will adjust if you are using auto layout and there is an orientation or perhaps constraint based animation. That all said - effectively your subclass could look like this:

import UIKit

class Field: UITextField {

    private let border = CAShapeLayer()

    @IBInspectable var color: UIColor = UIColor.blue {
        didSet {
            border.strokeColor = color.cgColor
        }
    }

    @IBInspectable var thickness: CGFloat = 1.0 {
        didSet {
            border.lineWidth = thickness
        }
    }

    override func draw(_ rect: CGRect) {
        self.borderStyle = .none
        let from = CGPoint(x: 0, y: rect.height)
        let here = CGPoint(x: rect.width, y: rect.height)
        let path = borderPath(start: from, end: here).cgPath
        border.path = path
        border.strokeColor = color.cgColor
        border.lineWidth = thickness
        border.fillColor = nil
        layer.addSublayer(border)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        let from = CGPoint(x: 0, y: bounds.height)
        let here = CGPoint(x: bounds.width, y: bounds.height)
        border.path = borderPath(start: from, end: here).cgPath
    }

    private func borderPath(start: CGPoint, end: CGPoint) -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: start)
        path.addLine(to: end)
        return path
    }
}

Then when you add a text field view to your story board - update the class in the Identity Inspector to use this subclass, Field - and then in the attributes inspector, you can set color and thickness.

Sakir Sherasiya · Answer 3 · 2017-04-11T06:34:12.083

Add border at Bottom in UITextField call below function:

func setTextFieldBorder(_ dimension: CGRect) -> CALayer {
    let border = CALayer()
    let width = CGFloat(2.0)
    border.borderColor = UIColor.darkGray.cgColor
    border.frame = CGRect(x: 0, y: dimension.size.height - width, width:  dimension.size.width, height: dimension.size.height)

    border.borderWidth = width
    return border

}

How to set UITextField border in textField below sample code for that:

txtDemo.layer.addSublayer(setTextFieldBorder(txtDemo.frame))
txtDemo.layer.masksToBounds = true

Where txtDemo is IBOutlet of UITextField.

Swift textfields without border

3 Answers3