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:

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.

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.

try like this take two images from UX designer same like as u wanted and put textfields and give clear colour for background to textfields and check — User, Apr 19 '17 at 06:48

score 1 · Answer 1 · answered Apr 19 '17 at 07:09

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

This seems like a good solution. How can I make it so that there is a corner radius as well. This is important since most UITextFields will have rounded corners of around 4-5px. — Kevin Rajan, Apr 19 '17 at 07:15

score 0 · Answer 2 · answered May 29 '17 at 09:49

0

I do not think it is possible to do this with a corner radius. The only way that I can imagine doing this is by going into CoreGraphics, which is usually more work than it is worth. Take a look here

answered May 29 '17 at 09:49

score 0 · Accepted Answer · answered Jun 09 '17 at 18:45

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)
}

Text in UIView Border

3 Answers3