UITextField左侧添加图片

UITextField 是处理文本输入和实现的控件，在我们实现登录功能时经常可以使用到。我们要实现在UITextField左侧添加图片，系统没有直接提供给开发者直接添加图片的方法，跳转到头文件也没有，但是我们可以看到有个 leftView 属性 ，我们可以尝试设置此属性来添加图片，如下图：

   open var leftView: UIView? // e.g. magnifying glass

以及修改 leftView 位置的方法

  - (CGRect)leftViewRectForBounds:(CGRect)bounds;

• 首先，我们在 sb 中添加 UITextField 控件

• 其次，创建一个继承自 UITextField 的自定义类，在此类中实现自定义的代码，代码如下：

@IBDesignable
class CustomeUITextField: UITextField {
    // Provides left padding for images
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += leftPadding
        
        return textRect
    }
    
    @IBInspectable var leftImage : UIImage? {
        didSet {
            modifyView()
        }
    }
    
    @IBInspectable var leftPadding : CGFloat = 0
    @IBInspectable var color : UIColor = UIColor.lightGray {
        didSet {
            modifyView()
        }
    }
    
    func modifyView() {
        if let image = leftImage {
            leftViewMode = UITextFieldViewMode.always
            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
            imageView.image = image
            imageView.tintColor = color
            leftView = imageView
        } else {
            leftViewMode = UITextFieldViewMode.never
            leftView = nil
        }
        
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes: [NSAttributedStringKey.foregroundColor : color])
    }

}

注意： imageView.tintColor = color，这行代码是想让图片跟着当前 Tint Color 颜色而改变，所以需要在 Assets.xcassets 把图片的渲染模式修改为 Template Image模式。

• 最后，运行如下图展示：

  
  
  

  屏幕快照 2017-12-16 下午7.08.58.png

demo链接→：https://github.com/linan08104/CustomTextField