【iOS开发】在textField左边设置图片以及图片与text

在开发过程中，有时候我们需要在UITextField左边放置一个图片，例如想得到下面的效果：

textField

想要得到上面的效果，我们需要完成三个任务：1）设置图片；2）改变图片与textField最左边的距离；3）改变图片与textField文字的距离。

设置图片

仔细看UITextField的API我们可以知道，UITextField有两个属性，leftView和rightView，这两个属性可以分别用来设置textField内部左边和右边的视图。这里只演示leftView，rightView也是一样的，只是显示在右边而已，代码如下：

titleTextField.leftView = UIImageView(image: UIImage(named: "title_image"))
titleTextField.leftViewMode = .always // 必须设置leftViewMode属性，不然leftView不会显示出来

其中leftViewMode是一个UITextFieldMode的枚举类型，它的值如下：

public enum UITextFieldViewMode : Int {    
    case never // 从不显示

    case whileEditing // 当编辑的时候显示

    case unlessEditing // 正在编辑的时候不显示，其他情况都显示

    case always // 无论什么情况，一直显示
}

改变图片与textField最左边的距离

当设置好leftView之后，我们发现leftView和左屏幕边缘靠的太近，这时我们可以写一个子类，继承于UITextField，然后重写父类的leftViewRect(forBounds bounds: CGRect) -> CGRect方法。因为textField在显示的时候，会调用这个方法，我们可以利用这个方法来改变leftView在textField的位置，让leftView往右偏一点。不要忘记把上面的titleTextField改为我们写的子类。

override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.leftViewRect(forBounds: bounds)
    rect.origin.x = 16 // 要往右偏多少根据自己需求，改变这个数字就好
    return rect
}

改变图片与textField文字的距离

我们再次运行之后，发现leftView和左屏幕边缘间距可以了，但是leftView和textField显示的文字靠的太近，这时我们会想到改变textField显示的文字的位置，然后去UITextField的API找到一个方法：textRect(forBounds bounds: CGRect) -> CGRect，没错，就是它，它可以改变文本的位置。

override func textRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.textRect(forBounds: bounds)
    rect.origin.x = 50 // 要往右偏多少根据自己需求，改变这个数字就好
    return rect
}

当所有人都以为这样完美解决问题了，但是当在我们textField输入文字的时候，文本和leftView又黏在一起了，我们还得重写一个方法来改变正在编辑时候的rect。

override func editingRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.editingRect(forBounds: bounds)
    rect.origin.x = 50 // 这个数字与textRect相同
    return rect
}

到此就大功告成了。

金无足赤,人无完人。如果文中有错误，请指出！我们共同学习，共同进步。谢谢！