TextField 图标前的填充

Question

I got the way to apply an icon just before the textfield starts programmatically but the main concern was that to apply padding just before the icon.

As it is just touching the border of the textfield.

I program it like below:

override func viewWillAppear(animated: Bool) {

    // Email Icon on left of email Text Field
    let imageView1 = UIImageView()
    let image1 = UIImage(named: "Message.png")
    imageView1.image = image1
    imageView1.frame = CGRectMake(100, 0, 10, 10)
    emailTextField.leftView = imageView1
    emailTextField.leftViewMode = UITextFieldViewMode.Always

    // Password Icon on left of pass Text Field
    let imageView2 = UIImageView()
    let image2 = UIImage(named: "Lock.png")
    imageView2.image = image2
    imageView2.frame = CGRectMake(100, 0, 10, 10)
    passwordTextField.leftView = imageView2
    passwordTextField.leftViewMode = UITextFieldViewMode.Always

}

But all the way space between the border and the icon is very less.

Is there any way to make a padding between them?

Please let me know if there is any way.

Answer 1

1. Try creating a UIView(say contentView ) and a UIImageView(say leftImage )

2. Set leftImage frame as it is aligned 10 points away from contenView 's x (ie) if contentView 's frame is (0, 0, 25, 20) then set leftImage 's frame as (10, 0, 15, 20)

3. Then add leftImage as subview to contentView

4. Now it's simple add contentView as leftView of textfield.

    let leftImage = UIImageView() let image1 = UIImage(named: "Key") leftImage.image = image1 let contentView = UIView() contentView.addSubview(leftImage) contentView.frame = CGRectMake(0, 0, 25, 20) leftImage.frame = CGRectMake(10, 0, 25, 20) passwordTextField.leftView = contentView passwordTextField.leftViewMode = UITextFieldViewMode.Always 

   Previops output:

   

   Final Output:

   

Answer 2

You can take one UIView of width 20 and you can add leftVeiw to this view. Now set this view as leftView .

Answer 3

you can easy to adjust the space by inherit the UITextField

class field: UITextField {

override func leftViewRectForBounds(bounds: CGRect) -> CGRect {
    var rect = bounds
    rect.origin.x -= 10
    return rect
}

override func textRectForBounds(bounds: CGRect) -> CGRect {
    var rect = bounds
    rect.origin.x -= 10
    return rect
}

}

Answer 4

您只需在一行中执行此操作即可

textfield.layer.sublayerTransform = CATransform3DMakeTranslation(10.0f, 0.0f, 0.0f);

Answer 5

class ViewController: UIViewController {

@IBOutlet weak var passTextfield: UITextField!
@IBOutlet weak var emailTextfield: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let emailImage = UIImage(named:"email")
    addLeftImageTo(txtfield: emailTextfield, andImage:emailImage!)
    
    let passwordImage = UIImage(named:"password")
    addLeftImageTo(txtfield: passTextfield, andImage:passwordImage!)
}

func addLeftImageTo(txtfield:UITextField,andImage img:UIImage) {
    let leftImageView=UIImageView(frame:CGRect(x:10, y: 0, width: 25, height: 20))
    leftImageView.image=img
    
    let view = UIView(frame: CGRect(x: 0, y: 0, width: 35, height: 20))
   view.addSubview(leftImageView)
    
    txtfield.leftView=view
    txtfield.leftViewMode = .always