How to create login screen with alert view Controller using UIAlertController in SWIFT
Alert views can also be used with text field. You can use it to quickly get some input text to image or table.How to take text input with alert view.
1. First lets set up the x code project as usual. Create new single view application X code project. Set the values as follows and save it on your desktop.
2. Go to main storyboard and select view controller. Set its size iPhone 4-inch in attribute section.
3. Add button to main storyboard & rename it to Log In
4. Connect button to view controller swift file
5. Create a function/method as following just below view did load
|
1 2 3 4 5 6 7 8 9 |
func printText(username:String, password:String) { print(username) print(password) } |
This will just print username & password collected from log in screen.
6. Now add following code in Log In button we just created.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
@IBAction func logInPressed(sender: UIButton) { // 1 let loginController = UIAlertController(title: "Please Sign In", message: "Fill in the following", preferredStyle: UIAlertControllerStyle.Alert) // 2 let loginAction = UIAlertAction(title: "Log In", style: UIAlertActionStyle.Default) { (action:UIAlertAction) -> Void in let loginTextField = loginController.textFields![0] as! UITextField let passwordTextField = loginController.textFields![1] as! UITextField self.printText(loginTextField.text, password: passwordTextField.text) } loginAction.enabled = false // 3 let signupAction = UIAlertAction(title: "Sign Up", style: UIAlertActionStyle.Default, handler: nil) let forgotPasswordAction = UIAlertAction(title: "Forgot Password", style: UIAlertActionStyle.Destructive, handler: nil) var cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil) // 4 loginController.addTextFieldWithConfigurationHandler { (textField:UITextField!) -> Void in textField.placeholder = "Username or Email" textField.keyboardType = UIKeyboardType.EmailAddress NSNotificationCenter.defaultCenter().addObserverForName(UITextFieldTextDidChangeNotification, object: textField, queue: NSOperationQueue.mainQueue(), usingBlock: { (notification:NSNotification!) -> Void in let textField = notification.object as! UITextField loginAction.enabled = !textField.text.isEmpty }) } // 5 loginController.addTextFieldWithConfigurationHandler { (textField:UITextField!) -> Void in textField.placeholder = "Password" textField.secureTextEntry = true } // 6 loginController.addAction(loginAction) loginController.addAction(signupAction) loginController.addAction(forgotPasswordAction) loginController.addAction(cancelAction) // 7 presentViewController(loginController, animated: true, completion: nil) } |
Here login control is created with alert view style.
Login action is created with two text fields. One for username & another for password. Then input text is printed with printText method. But login action is disabled here at the end.
Here sign up action, forgot password action & cancel action is created.
First text fields placeholder & keyboard type is set. Login action is enabled only if first text field is not empty.
Second text Fields place holder is set. And input is hidden like password.
All actions are added to login control
Login control is presented with animation.
7. Now build and run the app on iPhone 5s And click on Log In button.