web-dev-qa-db-ja.com

テキストがボタンと重ならないように、UItextfieldの右側のビューにボタンを追加します

右側のビューを使用して、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)

テキストの正しいビューからパディングを与える方法を教えてください。

23
Saty

uITextFieldのrightViewプロパティを使用します。基本的に、UITextField内にカスタムビュー/コントロールを配置できるようにする2つのプロパティ(この1つと、それに応じてleftView)があります。 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) {
}
50
Anbu.Karthik

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
}
5
Tejas

テキストフィールドの右側のビューでボタンを割り当てることができます

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
}

そして、私はこのようにそれを使用しました

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

以下に示すものと同じことが実現できます。

@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に追加します。

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

正解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
}
1
SeRG1k

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()
    }
0
Hardik Thakkar