web-dev-qa-db-fra.com

Ajouter un bouton sur la vue de droite de UItextfield de manière à ce que le texte ne chevauche pas le bouton

Je peux ajouter un bouton à un champ de texte situé dans la partie droite de UITextField à l'aide de la vue de droite. Toutefois, le texte recouvre le bouton. Ci-dessous le code pour le bouton droit de vue

        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)

S'il vous plaît laissez-moi savoir comment donner un remplissage de la vue de droite pour le texte.

iosswiftswift3uitextfield
13
Saty

utilisez la propriété rightView de UITextField. En gros, deux propriétés (celle-ci et leftView en conséquence) vous permettent de placer des vues/contrôles personnalisés dans UITextField. Vous pouvez contrôler si ces vues sont affichées ou non au moyen de rightViewMode/leftViewMode properties:

textField.rightView = btnColor
textField.rightViewMode = .unlessEditing

par exemple

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

et appeler l'action comme 

@IBAction func refresh(_ sender: Any) {
}
35
Anbu.Karthik

Créez une extension UITextField et ajoutez la méthode ci-dessous et modifiez le code UIButton selon vos besoins.

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
Tejas

vous pouvez assigner un bouton à la vue droite du champ de texte 

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
2
Ram
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
}

Et je l'ai utilisé comme ça :

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

Réponse correcte Swift3 +

Si vous remplacez simplement les méthodes, le texte peut chevaucher la vue de droite. Ce code résout complètement ce problème.

Votre sous-classe 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
}
1
SeRG1k

Pour 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
}

Fonction d'appel comme celle-ci 

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

Vous pouvez réaliser la même chose comme indiqué ci-dessous:

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

Ajouter à textField.

textField.rightView = textFieldBtn
textField.rightViewMode = .always
0
Nahush Sarje