Add a button on right view of UItextfield in such way that, text should not overlap the button

Question

I can add a button to a textfield on the right hand side of the UITextField using the right view however, the text overlaps on the button. Below is the code for right view button

        UIView.commitAnimations()
        var btnColor = UIButton(type: .Custom)
        btnColor.addTarget(self, action: #selector(self.openEmoji), forControlEvents: .TouchUpInside)
        btnColor.frame = CGRect(x: CGFloat(textField.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
        btnColor.setBackgroundImage(UIImage(named: "send.png"), forState: .Normal)
        textField.addSubview(btnColor)

Please let me know how to give padding from right view for text.

score 83 · Accepted Answer · edited Jan 16 '20 at 11:25

83

use the rightView property of the UITextField. Basically, there are two properties (this one and leftView accordingly) that allow you to place custom views/controls inside the UITextField. You can control whether those views are shown or not by means of rightViewMode/leftViewMode properties:

textField.rightView = btnColor
textField.rightViewMode = .unlessEditing

for e.g

let button = UIButton(type: .custom)
button.setImage(UIImage(named: "send.png"), for: .normal)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -16, 0, 0)
button.frame = CGRect(x: CGFloat(txt.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
button.addTarget(self, action: #selector(self.refresh), for: .touchUpInside)
textField.rightView = button
textField.rightViewMode = .always

and call the action as

@IBAction func refresh(_ sender: Any) {
}

edited Jan 16 '20 at 11:25

Sourabh Sharma

8,222
5
68
78

answered Feb 07 '17 at 05:27

Anbu.Karthik

82,064
23
174
143

Thanks All.. Its working now. I will accept the answer. Can Any one tell me how to give a space after image from left hand view for the text? – Saty Feb 07 '17 at 06:01
@Saty - not like its is depent upon user based – Anbu.Karthik Feb 07 '17 at 06:03
@ Anbu.Karthik As there is an image in left view so I want to have some space after the image so there must be some gap between leftview image and text – Saty Feb 07 '17 at 06:04
@Saty - yes absolutly, use leftview concept – Anbu.Karthik Feb 07 '17 at 06:22
@Saty - any other queries – Anbu.Karthik Feb 07 '17 at 06:36
when I declare 'IBAction', it shows me error - "Only Instance method can be declared @IBAction" – Tejas Aug 02 '17 at 11:01
@Tejas - You need to put the function inside the UIViewController not outside – Anbu.Karthik Aug 02 '17 at 11:05
@Anbu.Karthik : Thanks for quick response. I understand your point. But, I am configuring this button inside a custom cell class 'UITableViewCell'. where I have all outlets of my text field. And, based on Bool value, I make it editable or non-editable. When editable, I need to show a dropdown on click of this button. – Tejas Aug 02 '17 at 11:09
@Tejas - ok what the issue u faced – Anbu.Karthik Aug 02 '17 at 11:17
@Anbu.Karthik any suggestion or solution for that? – Tejas Aug 02 '17 at 11:17
Same: "Only Instance method can be declared @IBAction" – Tejas Aug 02 '17 at 11:17
1

@Anbu.karthik the text from the text box goes behind the image if you type for long enough, how do you prevent this? – Craig P Sep 25 '18 at 18:06
@CraigP you can inherit UITextField, and override `editingRect` so you have padding on right size. `let padding = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 32) return bounds.inset(by: padding)` – Seop Yoon Jun 09 '20 at 06:19
Working for me..... – M Hamayun zeb Jan 12 '22 at 09:50

score 9 · Answer 2 · answered Feb 07 '17 at 05:45

Create UITextField extension and add below method in it and you can change UIButton code as per your requirement.

func setRightViewIcon(icon: UIImage) {
    let btnView = UIButton(frame: CGRect(x: 0, y: 0, width: ((self.frame.height) * 0.70), height: ((self.frame.height) * 0.70)))
    btnView.setImage(icon, for: .normal)
    btnView.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 3)
    self.rightViewMode = .always
    self.rightView = btnView
}

score 6 · Answer 3 · answered Feb 16 '18 at 14:45

Correct answer Swift3+

If you just override the methods, the text may overlap the right view. This code completely solves this problem.

You UITextField subclass:

//...

private func setInsets(forBounds bounds: CGRect) -> CGRect {

    var totalInsets = insets //property in you subClass

    if let leftView = leftView  { totalInsets.left += leftView.frame.origin.x }
    if let rightView = rightView { totalInsets.right += rightView.bounds.size.width }

    return UIEdgeInsetsInsetRect(bounds, totalInsets)
}

override func textRect(forBounds bounds: CGRect) -> CGRect {
    return setInsets(forBounds: bounds)
}

override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
    return setInsets(forBounds: bounds)
}

override func editingRect(forBounds bounds: CGRect) -> CGRect {
    return setInsets(forBounds: bounds)
}

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {

    var rect = super.rightViewRect(forBounds: bounds)
    rect.origin.x -= insets.right

    return rect
}

override func leftViewRect(forBounds bounds: CGRect) -> CGRect {

    var rect = super.leftViewRect(forBounds: bounds)
    rect.origin.x += insets.left

    return rect
}

score 2 · Answer 4 · answered Feb 07 '17 at 05:28

you can assign button at right view of textfield

var btnColor = UIButton(type: .Custom)
            btnColor.addTarget(self, action: #selector(self.openEmoji), forControlEvents: .TouchUpInside)
            btnColor.frame = CGRect(x: CGFloat(textField.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
            btnColor.setBackgroundImage(UIImage(named: "send.png"), forState: .Normal)
            textField.rightView = btnColor

Hemang · Answer 5 · 2018-03-01T06:57:31.973

internal var btnDropDown: UIButton {
    let size: CGFloat = 25.0
    let button = UIButton(type: .custom)
    button.setImage(#imageLiteral(resourceName: "DropDownImage"), for: .normal)
    button.imageEdgeInsets = UIEdgeInsetsMake(0, -(size/2.0), 0, 0)
    button.frame = CGRect(x: self.frame.size.width - size, y: 0.0, width: size, height: size)
    return button
}

And I used it like this:

override func awakeFromNib() {
    super.awakeFromNib()   
    textField.rightView = self.btnDropDown
    textField.rightViewMode = .always
}

score 1 · Answer 6 · answered Oct 23 '18 at 11:59

You can achieve same as shown below:

@IBOutlet weak var textField: UITextField!

var textFieldBtn: UIButton {
    let button = UIButton(type: .custom)
    button.setImage(UIImage(named: "image.png"), for: .normal)
    button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0)
    button.frame = CGRect(x: CGFloat(textField.frame.size.width - 40), y: CGFloat(5), width: CGFloat(40), height: CGFloat(30))
    button.backgroundColor = UIColor.darkGray
    button.addTarget(self, action: #selector(self.refreshContent), for: .touchUpInside)

    return button
}

func refreshContent() {

    // Add your code here to handle button.
}

Add to textField.

textField.rightView = textFieldBtn
textField.rightViewMode = .always

score 0 · Answer 7 · answered Jul 11 '18 at 05:28

For Swift4

func setupUI() {
   let imgSearch = UIImageView();
   let imgSearch = UIImage(named: "search");

   // set frame on image before adding it to the uitextfield
   imgSearch.image = imagePassword;
   imgSearch.frame = CGRect(x: txtSearchField.frame.size.width - 40 , y: 5, width: 22, height: 22)
   txtSearchField.rightView = imgSearch
   txtSearchField.rightViewMode = .always
}

Call function like this

 // MARK: View lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        self.setupUI()
    }

Add a button on right view of UItextfield in such way that, text should not overlap the button

7 Answers7

Linked