Show Menu

Looking for an iOS Developer?

Submit your 30 day Job Listing for FREE

In this tutorial I am going to show you how to create an Editable UITextField inside a UIAlertController. I will do this by guiding you through the process of creating an UIAlertController with editable text fields for the user to enter a username and pasword and then display that in the console log.

Create the app

The first thing we need to do is create a new Single View Application:

uialertcontroller project setup

Enter these values into the dialogue that opens up:

  • Prodact Name: UIAlertController Tutorial
  • Organization Name: < Your Org > (We used iOS-Blog here but you can use home)
  • Organization Identifier: < com.yoursite > (We used .co.uk.ios-blog)

And then you need to click next.

Next, On the left hand side panel (Your Project Navigation) Click Storyboard. Once that has loaded your View Controller drag and drop a UIButton from the Object Library (Which is found bottom right)

UIButton object library

Double Click the UIButton so that you can edit the text. Change the text to Log In

Now your Storyboard should like a little like this:

uiview controller

Next you need to Select the Assistant Editor and make sure the ViewController.swift is still visible. Ctrl + drag from the UIButton to the ViewController to link it up. This will pop up a new window, fill it out like this:

xcode action dialogue

This will automatically create some code for an @IBAction in your ViewController.swift file:


@IBAction func login(sender: AnyObject) { }

Now, inside this @IBAction is where we are going to place our code. Right in between the two curly brackets { .. code here ..}. We are going to start by creating two optional variables that will represent the UITextFields where the user will enter their name and password.


var usernameTextField: UITextField?
var passwordTextField: UITextField?

The next step in creating editable UITextFields in an AlertViewController is to create an instance of the UIAlertController and set the title and message:


let alertController = UIAlertController(
   title: "Log in",
   message: "Please enter your credentials",
   preferredStyle: UIAlertControllerStyle.Alert)

We now need to create an UIAlertAction to handle getting the inputted data and outputting it to the console log. We do this by assigning the values of the UITextField. We also do not want our app to crash so we need to make sure that we perform a check that the data is actually there. We do this by using the if else function, which allows us to perform an action on both outcomes; if the user has entered data or if the user hasn’t we will use print() to display a message in the console.

This is how we do that:


let loginAction = UIAlertAction(
      title: "Log in", style: UIAlertActionStyle.Default) {
        (action) -> Void in
        
          if let username = usernameTextField?.text {
            print(" Username = \(username)")
          } else {
            print("No Username entered")
          }
        
          if let password = passwordTextField?.text {
            print("Password = \(password)")
          } else {
            print("No password entered")
          }
}

We now use the addTextFieldWithConfigurationHandler method which adds the text input field by, taking the Text Field as a parameter inside the closure.


alertController.addTextFieldWithConfigurationHandler {
    (txtUsername) -> Void in
        usernameTextField = txtUsername
        usernameTextField!.placeholder = ""
}
    
alertController.addTextFieldWithConfigurationHandler {
    (txtPassword) -> Void in
        passwordTextField = txtPassword
        passwordTextField!.secureTextEntry = true
        passwordTextField!.placeholder = ""
}

Finally, we need to add loginAction to the alertController and use presentViewController to display it.


alertController.addAction(loginAction)
self.presentViewController(alertController, animated: true, completion: nil)

That’s it, Build and Run your app. Here is the result:

Swift UIAlertController

So, to recap. In this Editable UITextFields inside a UIAlertController Tutorial I have shown you how to create a new Single View Application, Add Objects from the Object library like UIButton which created an @IBAction and How to use UIAlertController to display an alert to the user that will allow them to add their credentials into UITextfields.

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


Written by:

I work in the shadows. You can thank me by being a good soul.

Comments

comments