在开发过程中,有时候我们需要在UITextField左边放置一个图片,例如想得到下面的效果:
想要得到上面的效果,我们需要完成三个任务: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
}
到此就大功告成了。
金无足赤,人无完人。如果文中有错误,请指出!我们共同学习,共同进步。谢谢!