在Swift 4的左侧/右侧的UITextField中添加图标或图像 [英] Add icon or image in UITextField on left / right in Swift 4

问题描述

我已经在UITextField中设置了左侧图标.设置文字时，它位于左侧的图标上方.我想在UITextField中的图标之后设置文本.我已经使用了下面的代码.

I have set up the left icon in UITextField. When I set text, it is over the left icon. I want to set text after the icon in the UITextField. I have used below code.

    let imageView = UIImageView(image: UIImage(named: strImgname))
    imageView.frame = CGRect(x: 0, y: 0, width: imageView.image!.size.width , height: imageView.image!.size.height)
    let paddingView: UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: 50, height: 30))        
    paddingView.addSubview(imageView)
    txtField.leftViewMode = .always
    txtField.leftView = paddingView

推荐答案

您可以使用@IBDesignable来制作具有这些功能甚至更多功能的可设计UITextField，并在整个项目中使用它.

You can use @IBDesignable to make a designable UITextField with these capabilities and even more and use it through out your project.

具有Delegate方法的DesignableTextField:

import Foundation
import UIKit

protocol DesignableTextFieldDelegate: UITextFieldDelegate {
    func textFieldIconClicked(btn:UIButton)
}

@IBDesignable
class DesignableTextField: UITextField {

    //Delegate when image/icon is tapped.
    private var myDelegate: DesignableTextFieldDelegate? {
        get { return delegate as? DesignableTextFieldDelegate }
    }

    @objc func buttonClicked(btn: UIButton){
        self.myDelegate?.textFieldIconClicked(btn: btn)
    }

    //Padding images on left
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += padding
        return textRect
    }

    //Padding images on Right
    override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.rightViewRect(forBounds: bounds)
        textRect.origin.x -= padding
        return textRect
    }

    @IBInspectable var padding: CGFloat = 0
    @IBInspectable var leadingImage: UIImage? { didSet { updateView() }}
    @IBInspectable var color: UIColor = UIColor.lightGray { didSet { updateView() }}
    @IBInspectable var imageColor: UIColor = UIColor.init(hex: "3EB2FF") { didSet { updateView() }}
    @IBInspectable var rtl: Bool = false { didSet { updateView() }}

    func updateView() {
        rightViewMode = UITextFieldViewMode.never
        rightView = nil
        leftViewMode = UITextFieldViewMode.never
        leftView = nil

        if let image = leadingImage {
            let button = UIButton(type: .custom)
            button.frame = CGRect(x: 0, y: 0, width: 20, height: 20)

            let tintedImage = image.withRenderingMode(.alwaysTemplate)
            button.setImage(tintedImage, for: .normal)
            button.tintColor = imageColor

            button.setTitleColor(UIColor.clear, for: .normal)
            button.addTarget(self, action: #selector(buttonClicked(btn:)), for: UIControlEvents.touchDown)
            button.isUserInteractionEnabled = true

            if rtl {
                rightViewMode = UITextFieldViewMode.always
                rightView = button
            } else {
                leftViewMode = UITextFieldViewMode.always
                leftView = button
            }
        }

        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: color])
    }
}

现在可以在情节提要中按如下所示对其进行设计:

注意::Rtl设置为Off时，图标将移到UITextField

NOTE: Rtl when set to Off icon will move to left of UITextField

在所需的ViewController中符合委托.

class MyViewController: UIViewController, DesignableTextFieldDelegate {
    @IBOutlet weak var txtFieldSomeSearch: DesignableTextField!
    txtFieldSomeSearch.delegate = self // can be done in storyboard as well
    ... // other codes
    func textFieldIconClicked(btn: UIButton) {
        print("MyViewController : textFieldIconClicked")
    }
    ... // other codes
}

最终输出:

这篇关于在Swift 4的左侧/右侧的UITextField中添加图标或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！