IOS APP PROGRAMMATICALLY: UILabel, UITextField and UIButton

In this tutorial, we will add some basic elements to our view. We will use :

Capture d_écran 2017-04-09 à 16.50.11

  1. UILabel
  2. UITextfield
  3. UIButton

At the end, you will be able to change :

  1. change the background colour of the view
  2. add labels to view, change font, size, alignment and colour
  3. add textfield to the view (similar to login and password field)
  4. add button to the view, change button layout and add event on click button

For this tutorial, we use:

  1. Xcode 8.2
  2. Swift 3

Previous Tutorial:

UILabel

UILabel it’s a view that display read-only text (i.e: title, description, label, …). More information in Apple API Reference.

At the end of this section, we will have something like this :

Capture d_écran 2017-04-09 à 17.09.15We will use the same project that you can find on the previous tutorial.

Let’s start !

  1. select ViewController.swift on the project navigation.
    1.png
  2. remove comment in viewDidLoad and remove the function didReceiveMemoryWarning. We will do all programming logic in viewDidLoad. Capture d’écran 2017-04-09 à 17.18.27.pngWe will explain in another article the life cycle of the ViewController. For now, we didn’t need. However you can find information in Apple API Reference UIControllerView.
  3. change the colour background by adding in viewDidLoad:
    • let blueColor = UIColor(red: 0.0/255.0, green: 118.0/255.0, blue: 255.0/255.0, alpha: 1.0)

    • self.view.backgroundColor = blueColor

    • you can also use other default colour: self.view.backgroundColor = UIColor.red
      Capture d’écran 2017-04-09 à 17.30.00.png
  4. create a property for the label before the function viewDidLoad(). Note: UILabel is import within UIKit (UIKit.UILabel).
    • let label = UILabel()

    • Capture d’écran 2017-04-09 à 17.40.03.png
  5. add text to the label and customise it 
    • add text to the label

      self.label.text = “My first UILabel !”

    • change color text label

      self.label.textColor = UIColor.white

    • text alignment to center

      self.label.textAlignment = .center

    • change font to bold and change size to 20

      self.label.font = UIFont(name: “HelveticaNeue-Bold”, size: 20)

    • you can have more property by pressing cmd + click on the UILabel
  6. then add the label to the view
    • !!! we will add manually the constraint so we have to put autoresizingMaskIntoConstraints to false !!!

      self.label.translatesAutoresizingMaskIntoConstraints = false

    • add label to the view

      self.view.addSubview(self.label)

  7. the label didn’t show yet, we have to add where to display on the view. So for now, we will just put in the center of the view by adding some constraints. (we will explain constraints in another tutorial)
    • keep constraints in variable

      var constraints = [NSLayoutConstraint]()

    • center label from horizontal view

      constraints.append(NSLayoutConstraint(item: self.label, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1.0, constant: 0.0))

    • center label from vertical view

      constraints.append(NSLayoutConstraint(item: self.label, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0.0))

    • active constraints

      NSLayoutConstraint.activate(constraints)

  8. we have done. Here is the result and codes.
    Capture d_écran 2017-04-09 à 17.09.15Capture d’écran 2017-04-09 à 18.04.48.png

UITextField

UITextField it’s a view that display an editable text area (i.e: login, password, email, …). More information in Apple API Reference UITextField.

At the end of this section, we will have something like this :Capture d_écran 2017-04-09 à 18.19.36

For this section of tutorial, you can use the empty project that you can find on the previous tutorial and do the point 1 & 2 of the previous section (UILabel). Or you can continue what was done in the previous section (UILabel). Just hide the label by adding

self.label.isHidden = true

Let’s start !

  1. create a property for the textfield before the function viewDidLoad(). Note: UITextField is import within UIKit (UITextField).
    • let textfield = UITextField()

  2. add more information in the textfield
    • background text in the textfield

      self.textfield.placeholder = “information text”

    • if it’s a password field or sensitive field, add isSecureTextEntry = true otherwise it is false by default

      self.textfield.isSecureTextEntry = false

    • change the enter text colour to blue

      self.textfield.textColor = UIColor.blue

    • change the enter text alignment to center

      self.textfield.textAlignment = .center

    • change the background field to white

      self.textfield.backgroundColor = UIColor.white

    • change the border to line

      self.textfield.borderStyle = .line

    • we remove the autocorrectionType (important when using for sensitive field as login and password)

      self.textfield.autocorrectionType = .no

    • display the clean field when we have something in the textfield

      self.textfield.clearButtonMode = .whileEditing

    • you can have more property by pressing cmd + click on the UITextField
  3. then add the textfield to the view
    • !!! we will add manually the constraint so we have to put autoresizingMaskIntoConstraints to false !!!

      self.textfield.translatesAutoresizingMaskIntoConstraints = false

    • add textfield to the view

      self.view.addSubview(self.textfield)

  4. add constraints [center to the screen with width=150 and high=50]
    (we will explain constraints in another tutorial)

    • keep constraints in variable (if not create yet)

      var constraints = [NSLayoutConstraint]()

    • variable metrics and views for width and high constraint

      let views = [“textfield”: self.textfield]
      let metrics = [“width150”: 150, “high50”: 50]

    • center textfield from horizontal view

      constraints.append(NSLayoutConstraint(item: self.textfield, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1.0, constant: 0.0))

    • center textfield from vertical view

      constraints.append(NSLayoutConstraint(item: self.textfield, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0.0))

    • width of the textfield

      constraints += NSLayoutConstraint.constraints(withVisualFormat: “H:[textfield(width150)]”, options: [], metrics: metrics, views: views)

    • high of the textfield

      constraints += NSLayoutConstraint.constraints(withVisualFormat: “V:[textfield(high50)]”, options: [], metrics: metrics, views: views)

    • active constraints

      NSLayoutConstraint.activate(constraints)

  5. we have done. Here is the complete code.
    Capture d’écran 2017-04-09 à 18.56.42.png

UIButton

UIButton it’s a view that executes your custom code in response to user interactions. More information in Apple API Reference UIButton.

At the end of this section, we will have something like this :

Capture d_écran 2017-04-09 à 19.02.17

For this section of tutorial, you can use the empty project that you can find on the previous tutorial and do the point 1 & 2 of the previous section (UILabel). Or you can continue what was done in the previous section (UITextField). Just hide the textfield by adding

self.textfield.isHidden = true

Let’s start !

  1. create a property for the button before the function viewDidLoad(). Note: UIButton is import within UIKit (UIKit.UIButton).
    • let button = UIButton()

  2. add information for the button and customise it
    • button text

      self.button.setTitle(“confirm”, for: .normal)

    • change the colour of the text button (ie.: if you want to modify the text colour of the button when highlight, just add self.button.setTitleColor(UIColor.red, for: .highlight) )

      self.button.setTitleColor(UIColor.blue, for: .normal)

    • change the background of the button

      self.button.backgroundColor = UIColor.orange

    • we put the border edge colour of the button to black

      self.button.layer.borderColor = UIColor.black.cgColor

    • change the border size to 2

      self.button.layer.borderWidth = 2

    • round the corner of the button

      self.button.layer.cornerRadius = 3

    • you can have more property by pressing cmd + right click on the UIButton
  3. then add the button to the view
    • !!! we will add manually the constraint so we have to put autoresizingMaskIntoConstraints to false !!!

      self.button.translatesAutoresizingMaskIntoConstraints = false

    • add button to the view

      self.view.addSubview(self.button)

  4. add constraints [center to the screen with width=150 and high=50]
    (we will explain constraints in another tutorial)

    • keep constraints in variable (if not create yet)

      var constraints = [NSLayoutConstraint]()

    • variable metrics and views for width and high constraint

      let views = [“button”: self.button]
      let metrics = [“width150”: 150, “high50”: 50]

    • center button from horizontal view

      constraints.append(NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1.0, constant: 0.0))

    • center button from vertical view

      constraints.append(NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0.0))

    • width of the button

      constraints += NSLayoutConstraint.constraints(withVisualFormat: “H:[button(width150)]”, options: [], metrics: metrics, views: views)

    • high of the button

      constraints += NSLayoutConstraint.constraints(withVisualFormat: “V:[button(high50)]”, options: [], metrics: metrics, views: views)

    • active constraints

      NSLayoutConstraint.activate(constraints)

  5. we have done. Here is the complete code.
    Capture d’écran 2017-04-09 à 19.24.26.png

Put all together (UILabel, UITextField, UIButton)

So now, we know how to add and display UILabel, UITextField and UIButton. We have all elements to do the interface :Capture d_écran 2017-04-09 à 16.50.11

  • UILabel that display What’s your name ?
  • UITextfield where we can add a name
  • UIButton to confirm the name

What we need to do :

  1. we need to add a second label to display the name after clicking on the button (try to do it yourself)
  2. add constraints to organise elements on the view
  3. add action on click button

 

 

1. we need to add a second label to display the name after clicking on the button

here is the code to the second label 🙂

Capture d_écran 2017-04-09 à 19.33.54

2. add constraints to organise elements on the view

So now, we just need to play with the constraint to display as we want. (we will explain constraints in another tutorial). Here is the code:

Capture d’écran 2017-04-09 à 19.40.06.png

Now if we launch the application, the display is as we want. However the button is not active. Nothing happen when we click on the button and the button doesn’t change colour for informing of the touch.

So let’s do it.

3. add action on click button

When we click on the button, we want to display our second label with the text “Your name is Toto”

  1. create a function with the wanted action (outside of the viewDidLoad function)

    func buttonAction(sender: UIButton) {
    self.label2.text = self.textfield.text
    }

    func : declaration of the function
    sender: UIButton : reference of the button that use this function
    self.label2.text = self.textfield.text : get the text of the textfield and copy to the label2 text

    here we will display only the name. we want to add “Your name is …”

    func buttonAction(sender: UIButton) {
    guard let name = self.textfield.text else {
    self.label2.text = “”
    }
    self.label2.text = “Your name is ” + name
    }

    We use a guard let because self.textfield.text is optional. Another way to do this:

    func buttonAction(sender: UIButton) {
    let name = self.textfield.text else {
    self.label2.text = “”
    return
    }
    self.label2.text = “Your name is ” + name
    }

    • Capture d’écran 2017-04-09 à 20.11.59.png
  2. bind the function with the button

    self.button.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)

Capture d’écran 2017-04-09 à 20.10.47.png
So now when we click on the button, it will show above the button confirm : “Your name is …”

4. Change colour of the button for informing of the touch

to change background color while highlighted we have 3 ways to this:

  1. the easiest is by adding target
    • create function to change button background colour
      Capture d’écran 2017-04-09 à 20.32.07.png
    • add target
      Capture d’écran 2017-04-09 à 20.32.19.png
  2. use extension UIButton -> see UIButton+extension.swift
    • create a new class (call it UIButton+extension.swift)
      Capture d’écran 2017-04-09 à 20.34.27.png
    • implement the class
      Capture d’écran 2017-04-09 à 20.34.36.png
    • use new property for the button
      Capture d’écran 2017-04-09 à 20.35.17.png
  3. use property observer with highlighted property
    • create a new class (call it UIButton+inheritace.swift)
      Capture d’écran 2017-04-09 à 20.37.40.png
    • implement the class
      Capture d’écran 2017-04-09 à 20.37.49.png
    • create the button with the new class
      Capture d’écran 2017-04-09 à 20.38.18.png

 

CONGRATULATION

You have create your first application programmatically.

You can download the tutorial project:
https://github.com/ndtran/ToMyLab/tree/master/Tutorial2

NEXT STEP

The next step will be to understand NSConstraint and UIViewController

Advertisements
IOS APP PROGRAMMATICALLY: UILabel, UITextField and UIButton

One thought on “IOS APP PROGRAMMATICALLY: UILabel, UITextField and UIButton

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s