UIButtons in Swift
Tags: swift, ios, apple, iosdevelopment
Published: 2020-09-28 11:12:57

#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`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/477iv9guujfmey7p24e1.png)

#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?
1. Open your Xcode project.
2. Go to **main.storyboard**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l4zpvk5wip4ha3xg0sgx.png)
3. and press `CMD+Shift+L` or click on + button in top right corner, this will open object library.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zzh4dhuyewjikfy97bpe.png)
4. Serch for **button** and drag it onto **View Contoller**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jvbqltllrbf860mo1nhy.png)
**Note : View Controller is one responsible to show our content on Apple Device.**
5. Your now have a button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5eh7zcdkv4ulv3ed8qs.png)

# How to edit you **UIButton**
1. 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**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19n3omwvv8b8hjbh3b63.png)
2. Now you can tinker with different properties of **UIButton** using Attributes Inspector.
3. For changing title change the text in field under title input label.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m5sjdq30kbi7x23wneaz.png)

#How to change properties with code?
1. 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m5sjdq30kbi7x23wneaz.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mltd5avkoaphkvex7rkv.png)
2. Now, our storyboard's view controller is connected to ViewController class.
3. 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f4baqx01u8uhy0nnghbi.png)
4. Now click on button and drag to ViewController.swift file under `class ViewController : UIViewController` and `override func viewDidLoad()` and create **IBOutlet** means a reference of that button and name it and press Connect.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rrxnt76mb7pe0zwypug0.png)
5. Now, we have refernce of that button.
6. viewDidLoad is like main function which first intializes when our app start.
7. So we are going to put our code here.
8. Here i am showing how to change title of button using code.
9.  ```swift
    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)
      }
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tgxlyft85a0dop88rr5z.png)

10. Now, click on Play button to run the app.
**Note : In my case i used iPhone 11 so change x, y, width, height accordingly.**
11. Output should look like this 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jdm5bvhuow1rqj8u62kr.png)

#How to make button do actions?
1. Create a **IBAction** same as we created IBOutlet by selecting button and pressing **Control** key and dragging onto storyboard.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m0hh5pab11jheqz5mm2s.png)
**Note : Change Type to UIButton**
2. After connecting it should look like
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s7ypl5us2fzk2cgjcsow.png)
3. Everything we write in IBAction will be run on clicking button connected.
4. Like if we want to change color on tapping button we can use 
```swift
 @IBAction func changeColor(_ sender: UIButton) {
        self.view.backgroundColor = .red
    }
```
**Note: instead of red you can choose any color**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hb3k50ncrpf3p0jsgiu5.png)
5. Now,run and tap on button to see the effect.
6. Output will look like
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nne7lfo9s5j6gqbsdlig.png)

# How to search if you get stuck on any step?
[Stackoverflow](stackoverflow.com) -- This is must use site for developers, one can just search their queries related to coding here.

[Apple developer](developer.apple.com) -- Official documentation by Apple, you can search for classes and objects about here.

Good Bye Folks see you soon in next blog.