In this tutorial, we will add some basic elements to our view. We will use :
- UILabel
- UITextfield
- UIButton
At the end, you will be able to change :
- change the background colour of the view
- add labels to view, change font, size, alignment and colour
- add textfield to the view (similar to login and password field)
- add button to the view, change button layout and add event on click button
For this tutorial, we use:
- Xcode 8.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 :
We will use the same project that you can find on the previous tutorial.
Let’s start !
- select ViewController.swift on the project navigation.
- remove comment in viewDidLoad and remove the function didReceiveMemoryWarning. We will do all programming logic in viewDidLoad.
We 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.
- 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
- create a property for the label before the function viewDidLoad(). Note: UILabel is import within UIKit (UIKit.UILabel).
-
let label = UILabel()
- 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
- 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)
- 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)
- we have done. Here is the result and codes.
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 :
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 !
- create a property for the textfield before the function viewDidLoad(). Note: UITextField is import within UIKit (UITextField).
-
let textfield = UITextField()
- 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
- 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)
- 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)
- we have done. Here is the complete code.
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 :
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 !
- create a property for the button before the function viewDidLoad(). Note: UIButton is import within UIKit (UIKit.UIButton).
- 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
- 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)
- 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)
- we have done. Here is the complete code.
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 :
- UILabel that display What’s your name ?
- UITextfield where we can add a name
- UIButton to confirm the name
What we need to do :
- we need to add a second label to display the name after clicking on the button (try to do it yourself)
- add constraints to organise elements on the view
- 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 🙂
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:
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”
- 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
}
- bind the function with the button
self.button.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)
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:
- the easiest is by adding target
- create function to change button background colour
- add target
- use extension UIButton -> see UIButton+extension.swift
- create a new class (call it UIButton+extension.swift)
- implement the class
- use new property for the button
- use property observer with highlighted property
- create a new class (call it UIButton+inheritace.swift)
- implement the class
- create the button with the new class
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
