Customise UITextField in SWIFT

Question

How to achieve below screen using UITextField in swift 3 IOS.

Answer 1

Do like this ...

• Add UIImageView for the left side icon image, set required image and background color
• Add UITextField beside the imageview and set border style to 'no border style' in interface builder (storyboard)
• Set the required background color
• Do the same for password field also, and for the eye icon view have a look at this https://github.com/Sahilberi/ImageTextField

Answer 2

1. Add UITextField

2. Add subview as imageView

3. set Alpha of UITextField

Below sample code for that:

func addTextField() {
        let txtUserName = UITextField(frame: CGRect(x: 30, y: 70, width: 320, height: 45))
        let txtPassword = UITextField(frame: CGRect(x: 30, y: 140, width: 320, height: 45))
        txtUserName.backgroundColor = UIColor.black
        txtPassword.backgroundColor = UIColor.black

        txtUserName.alpha = 0.35
        txtPassword.alpha = 0.35

        let imgUser = UIImageView(frame: CGRect(x: 5, y: 5, width: 35, height: 35))
        let imgKey = UIImageView(frame: CGRect(x: 5, y: 5, width: 35, height: 35))
        let imgEye = UIImageView(frame: CGRect(x: txtPassword.frame.size.width - 40, y: 5, width: 35, height: 35))
        imgUser.image = UIImage(named: "user")
        imgKey.image = UIImage(named: "key")
        imgEye.image = UIImage(named: "eye")
        txtUserName.addSubview(imgUser)
        txtPassword.addSubview(imgKey)
        txtPassword.addSubview(imgEye)
        view.addSubview(txtUserName)
        view.addSubview(txtPassword)
}

Answer 3

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var txtpassword: UITextField!
@IBOutlet weak var txtUserName: UITextField!
@IBOutlet weak var txtView: UITextView! //your textView


override func viewDidLoad() {

    super.viewDidLoad()
    //navigationBarColor()
    setTextFieldSpace( textField :txtUserName)
    setTextFieldSpace( textField :txtpassword)
    //textField border
    txtpassword.borderStyle = .none
    txtUserName.borderStyle = .none

}

//MARK: - Button Action
// password show hide
@IBAction func btnShowPasswordClick(_ sender: UIButton) {
    if txtpassword.isSecureTextEntry{
        txtpassword.isSecureTextEntry = false
    }else{
        txtpassword.isSecureTextEntry = true
    }
}

//for set space in left side of textField
func setTextFieldSpace( textField :UITextField){
    let lblSpace = UILabel()
    lblSpace.frame = CGRect.init(x: 0, y: 0, width: 5, height: 5)
    lblSpace.backgroundColor = .clear
    textField.leftView = lblSpace

    textField.leftViewMode = .always
    textField.contentVerticalAlignment =  .center
}

}

//Check out this Out put