UIButtons in Swift
Neeraj Gupta
Posted on September 28, 2020
Overview
A control that executes your custom code in response to user interactions. In simple language it means that it is a controller that gets in action when user interact with it using code.
Heirarchy of UIButton
class UIButton : UIControl
class UIControl : UIView
class UIView : UIResponder
class UIResponder : NSObject
class NSObject
UIButton Class Heirarchy
A little introduction to each class on which UIButton is made.
1. NSObject
This class is the one which was previously used back when all code was written in Objective-C.It is a group of methods that are fundamental to all Objective-C objects means UIButton is made on top of NSObject block on our storyboard or we can say every button will be contained in this Object.
2. UIResponder
An abstract interface for responding to and handling events means this class is responsible for handling all code when we click on button.
3. UIView
An object that manages the content for a rectangular area on the screen means it is responsible for showing us content on our screen.
4. UIControl
The base class for controls, which are visual elements that convey a specific action or intention in response to user interactions. This conveys about what type of interaction and where user has clicked on screen and pass that to code.
Why we need to inherit/use these classes ?
So, consider the scenario in which we had to create everything from scratch and we don't have Apple's object library. How hard and time consuming that task will be?. So, what Apple did was made their own UIKit in which all these reusable objects are already made by developers at Apple and are free to use by us.
These objects are made by inheriting from different classes and combining all the functionalities of different classes to make a final object.
If, this was not present then every time we will have to make a empty object make controller for it and make it responsive to user interactions and have to view that and then finally our button would have been possible. But, thanks to Apple's UIKit, this is all inbuilt and we just had to drag that into our storyboard and we are good to use it.
What is inheriting?
Word 'Inherit' might prick you is you are new to programming. Inheriting is a part of Object Oriented Programming and it means the same as title suggests us that is inherit which means getting features/properties of another class. Let's say a parent taught his/her chld to walk and talk that is what child is inheriting and let's say child learn swimming and that is now his/her own trait and not the one inherited from parent.There are lot of examples but for now this is out of scope for this blog. You can search more on google about inheritance.
How to create a button using Interface Builder?
- Open your Xcode project.
- Go to main.storyboard.
- and press
CMD+Shift+L
or click on + button in top right corner, this will open object library. - Serch for button and drag it onto View Contoller. Note : View Controller is one responsible to show our content on Apple Device.
- Your now have a button.
How to edit you UIButton
- Now, once your button is placed on view controller you can chnage it's attributes/properties by pressing
CMD+Option+0
this will open left sidepan and then navigate to Attributes Inspector. - Now you can tinker with different properties of UIButton using Attributes Inspector.
- For changing title change the text in field under title input label.
How to change properties with code?
- Go to Identity Inspector in right side pane and check if your view controller is connected to ViewController.swift class and if not click on drop down arrow and select one.
- Now, our storyboard's view controller is connected to ViewController class.
- Press
Control+Option+CMD+Enter/return
or you can go to Editor in top bar and select Assistant under it to open Assistant editor, this will open your storyboard and ViewController.swift side by side. - Now click on button and drag to ViewController.swift file under
class ViewController : UIViewController
andoverride func viewDidLoad()
and create IBOutlet means a reference of that button and name it and press Connect. - Now, we have refernce of that button.
- viewDidLoad is like main function which first intializes when our app start.
- So we are going to put our code here.
-
Here i am showing how to change title of button using code.
9.
import UIKit class ViewController: UIViewController { @IBOutlet weak var button1: UIButton! override func viewDidLoad() { super.viewDidLoad() button1.setTitle("Press Me", for: .normal) button1.frame = CGRect(x: 184, y: 453, width: 200, height: 200) } }
- Now, click on Play button to run the app. Note : In my case i used iPhone 11 so change x, y, width, height accordingly.
- Output should look like this
How to make button do actions?
- Create a IBAction same as we created IBOutlet by selecting button and pressing Control key and dragging onto storyboard. Note : Change Type to UIButton
- After connecting it should look like
- Everything we write in IBAction will be run on clicking button connected.
- Like if we want to change color on tapping button we can use
@IBAction func changeColor(_ sender: UIButton) {
self.view.backgroundColor = .red
}
Note: instead of red you can choose any color
- Now,run and tap on button to see the effect.
- Output will look like
How to search if you get stuck on any step?
Stackoverflow -- This is must use site for developers, one can just search their queries related to coding here.
Apple developer -- Official documentation by Apple, you can search for classes and objects about here.
Good Bye Folks see you soon in next blog.
Posted on September 28, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.