CODEWITHSUNDEEP
iosswiftuitextfield
eChung00
eChung00

Reputation: 633

UITextField custom underline in Swift

I have a question about making an underline on UITextField. I am trying to make an underline with bar on each end as shown below.

enter image description here

I tried the following and got this one. There is no bar on the right end.

enter image description here

extension UITextField {
func underline() {
    let borderWidth = CGFloat(1.0)
    let endBorderHeight = CGFloat(10.0)

    let bottom = CALayer()
    bottom.frame = CGRect(
        x: 1,
        y: self.frame.height - borderWidth,
        width: self.frame.width - 2,
        height: borderWidth)

    bottom.borderWidth = borderWidth
    bottom.borderColor = UIColor.lightGrayColor().CGColor

    let leftEndBorder = CALayer()
    leftEndBorder.frame = CGRect(
        x: 0,
        y: self.frame.height - endBorderHeight,
        width: borderWidth,
        height: endBorderHeight)
    leftEndBorder.borderWidth = borderWidth
    leftEndBorder.borderColor = UIColor.lightGrayColor().CGColor

    print(bottom.frame.width)
    let rightEndBorder = CALayer()
    rightEndBorder.frame = CGRect(
        x: self.frame.width - 1,
        y: self.frame.height - endBorderHeight,
        width: borderWidth,
        height: endBorderHeight)

    rightEndBorder.borderWidth = borderWidth
    rightEndBorder.borderColor = UIColor.lightGrayColor().CGColor

    self.layer.addSublayer(leftEndBorder)
    self.layer.addSublayer(bottom)
    self.layer.addSublayer(rightEndBorder)
    self.layer.masksToBounds = true
    }
}

I could make the bar on left side but having trouble making the right side because of the wrong x position of the rightEndBorder probably?

Can anyone tell me what I am doing wrong??

----- edit

I tried to set the x-position of the rightEndBorder to 200 and it gave me the following.

enter image description here

But if I tried to set it to 300, I don't see it anymore.

----- edit

Checked if the entire textfield was shown on the screen.

enter image description here

----- edit

It was that the leading and trailing constraints that changed the width of the textField I guess.

enter image description here

----- Solution

The problem was that I had leading and trailing constraints on the textField and those constraints changed the width after the unline was inserted. After searching google, I figured that I had to make the underline after the constraints were applied which is in the function viewDidLayoutSubviews().

Upvotes: 0

Views: 2059

Answers (1)

Ian Moses
Ian Moses

Reputation: 611

Re-typing from comments section as an answer.

The problem seems to be either that the view is getting cut off (thus you will not see the right border) or the right end border is being shifted farther right after setting. Reason for suspecting this is from your picture where the right border is placed at x = 200 because it is well past half along the bottom border line but should be only be 40% of the way along the line.

Update:

The correct answer to this question was the constraints imposed caused the textfield width to change.

Upvotes: 1

Related Questions