Text in UIView Border

Question

I am currently working on a project in iOS (using XCode and Swift). I am trying to implement the following UITextFields for the login view:

I was thinking of different ways to go about doing this and they all seem complicated. It would be amazing if someone knows of a super easy way to do this or if there is already a cocoapod that can be used to create this TextView.

Here are a few ways I was thinking of doing it:

1. Just make a UITextField with a border and put a UILabel with a background matching the parent view's background, blocking out the part where "Login" and "Password" would show up. This would hide the border at these parts and would solve the issue. The problem with this approach is if the background is a gradient, pattern, or image. This can be seen in the following images:

If the user looks closely at the "EMAIL" and "PASSWORD" UILabels here it can be seen that it does not have a transparent background and that it has an set background color in order to block out the border of the UITextField.

Instead of doing this, I would like to actually stop the drawing of the border which brings me to a second possible method of implementation.

2. Using core graphics to manually draw the border of the UITextField, this would have to be dynamic since there can be different length strings ("Login) is 5 characters, "Password" is 8). This approach seems complicated because dealing with CoreGraphics can be annoying.

I wasn't able to come up with any other ways of implementing this but I'd appreciate it if there was a less cumbersome solution.

Answer 1

Try this extension. I have tried this and is working good.

extension UITextField {

  func leftBorder() {
    let leftBorder = CALayer()
    leftBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    leftBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(leftBorder)
  }

  func rightBorder() {
    let rightBorder = CALayer()
    rightBorder.frame = CGRect(x: CGFloat(self.frame.size.width - 1), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    rightBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(rightBorder)
  }

  func bottomBorder() {
    let bottomBorder = CALayer()
    bottomBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(self.frame.size.height - 1), width: CGFloat(self.frame.size.width), height: CGFloat(1.0))
    bottomBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(bottomBorder)
  }

  func topBorder1() {
    let topBorder = CALayer()
    topBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(25.0), height: CGFloat(1.0))
    topBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder)
  }

  func topBorder2(position: CGFloat) {
    let width = CGFloat(self.frame.size.width - position)
    let topBorder2 = CALayer()
    topBorder2.frame = CGRect(x: position, y: CGFloat(0), width: width, height: CGFloat(1.0))
    topBorder2.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder2)
  }

}

Call those extension methods in viewDidLayoutSubviews method like this..

override func viewDidLayoutSubviews() {
    loginTextField.leftBorder()
    loginTextField.rightBorder()
    loginTextField.bottomBorder()
    loginTextField.topBorder1()
    let position = CGFloat(25 + loginLabel.frame.size.width + 10)
    loginTextField.topBorder2(position: position)
}

This is how the initial story board looks like. I used a textfield and then placed a label above that textfield.

Note: I have used the label's width for some calculation.

And the result in the simulator is