How can I add an inset to the text and placeholder in PhoneNumberTextField

Question

I need to use a textfield to havet he user type in phone numbers so I'm using the PhoneNumberTextField from the project PhoneNumberKit.

By default it's just a borderless textfield. I modified it by adding a border with a corner radius and a UIButton added to its leftView. The problem with that is the text/placeholder is shown right up against the border.

I tried subclassing PhoneNumberTextField and adding the text inset capability like this.

@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {
    @IBInspectable var inset: CGFloat = 0

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: inset, dy: inset)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: inset, dy: inset)
    }

    override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: inset, dy: inset)
    }
}

The issue here is it doesn't take the leftView into account now. The text/placeholder is partially covered by the leftView.

Is there any other way to fix this?

Demo project

I think the problem is in the layer you are adding for rounding text field. — Jarvis The Avenger, Feb 25 '19 at 09:49
Instead of button why don't you use image view and add tap gesture to it. — Jarvis The Avenger, Feb 25 '19 at 09:49
@JarvisTheAvenger I tried with an `UIImageView` and a `UIView` as the `leftView`. Still the issue persists. — Isuru, Feb 25 '19 at 10:58

Dharmesh Kheni · Accepted Answer · 2019-02-25T10:49:58.743

2

You need to update your CNPhoneNumberTextField class like shown below where you can give leftPadding for your textField from storyboard.

Your class will look like:

import UIKit
import PhoneNumberKit

@IBDesignable
class CNPhoneNumberTextField: PhoneNumberTextField {

    @IBInspectable var leftPadding: CGFloat = 0

    override open func textRect(forBounds bounds: CGRect) -> CGRect {

        let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
        return bounds.inset(by: padding)
    }

    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {

        let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
        return bounds.inset(by: padding)
    }

    override open func editingRect(forBounds bounds: CGRect) -> CGRect {

        let padding = UIEdgeInsets(top: 0, left: leftPadding, bottom: 0, right: 0)
        return bounds.inset(by: padding)
    }
}

And from storyboard with Attribute inspector section you can assign left padding like:

And your result will be:

Reference from THIS answer.

EDIT:

HERE is the demo project.

edited Feb 25 '19 at 10:49

answered Feb 25 '19 at 09:50

Dharmesh Kheni

71,228
33
160
165

Hi, thanks for the answer. For some reason, it's still not working for me. Can you please attach the Xcode project? – Isuru Feb 25 '19 at 10:45
Yes sure. Will do it. – Dharmesh Kheni Feb 25 '19 at 10:46
I see. You increased the padding value to a bigger number so it will go past the `leftView`. I was wondering why the textRect doesn't take the `leftView`'s bounds into account. – Isuru Feb 25 '19 at 10:55
It's taking `leftView`'s bounds into account thats why you are getting result which you showed in you first image in your question – Dharmesh Kheni Feb 25 '19 at 11:19

score 0 · Answer 2 · answered Feb 25 '19 at 09:38

0

You could probably add some padding like this:

override func textRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.textRect(forBounds: bounds)
    rect.origin.x += 10
    return rect
}

answered Feb 25 '19 at 09:38

rodskagg

3,827
4
27
46

How can I add an inset to the text and placeholder in PhoneNumberTextField

2 Answers2