ios 以这样的方式在 UItextfield 的右视图上添加一个按钮，文本不应与按钮重叠

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

提问by Saty

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

我可以使用右视图向 UITextField 右侧的文本字段添加一个按钮，但是，文本在按钮上重叠。下面是右视图按钮的代码

        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.

请让我知道如何从右视图为文本提供填充。

回答by Anbu.Karthik

use the rightViewproperty 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/leftViewModeproperties:

使用UITextField的rightView属性。基本上，有两个属性（相应的这个和 leftView）允许您在 UITextField 中放置自定义视图/控件。您可以通过rightViewMode/leftViewMode属性控制是否显示这些视图：

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

回答by Tejas

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

创建 UITextField 扩展并在其中添加以下方法，您可以根据需要更改 UIButton 代码。

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
}

回答by SeRG1k

Correct answer Swift3+

正确答案 Swift3+

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

如果您只是覆盖这些方法，则文本可能会与右视图重叠。这段代码完全解决了这个问题。

You UITextField subclass:

你 UITextField 子类：

//...

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
}

回答by Hemang

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
}

回答by Ram

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

回答by Nahush Sarje

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

回答by Hardik Thakkar

For Swift4

对于 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()
    }