Search code examples
iosswiftswift3uitextfield

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


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.


Solution

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