在 UItextfield 的右视图上添加一个按钮，文本不应与按钮重叠

Posted 2023-03-14

【中文标题】在 UItextfield 的右视图上添加一个按钮，文本不应与按钮重叠

【英文标题】：Add a button on right view of UItextfield in such way that, text should not overlap the button

【发布时间】：2017-02-07 05:24:23

【问题描述】：

我可以使用右视图将按钮添加到 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)

请告诉我如何从右视图为文本提供填充。

【参考方案1】：

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

textField.rightView = btnColor
textField.rightViewMode = .unlessEditing

例如

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

并将动作称为

@IBAction func refresh(_ sender: Any) 

【讨论】：

谢谢大家。它现在可以工作了。我会接受答案。任何人都可以告诉我如何在文本的左侧视图中为图像留出空格吗？

@Saty - 不像它是依赖于基于用户的

@Anbu.Karthik 因为左视图中有一个图像，所以我想在图像后面留一些空间，所以左视图图像和文本之间必须有一些间隙

@Saty - 绝对是，使用左视图概念

@Anbu.karthik 如果您输入的时间足够长，文本框中的文本会出现在图像后面，如何防止这种情况发生？

【参考方案2】：

创建 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

【参考方案3】：

正确答案 Swift3+

如果你只是重写方法，文本可能会与右视图重叠。这段代码彻底解决了这个问题。

你的 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

【参考方案4】：

您可以在文本字段的右视图分配按钮

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

【参考方案5】：

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

我是这样使用的：

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

【参考方案6】：

您可以实现如下所示：

@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.

添加到文本字段。

textField.rightView = textFieldBtn
textField.rightViewMode = .always

【参考方案7】：

对于 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

这样调用函数

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