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

I believe one method of doing this is by drawing the individual borders:

extension UITextField {
    func border(position: CGFloat) {
    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)
    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)
    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)
    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)
    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)
}