When I first study iOS, I wonder which tool should I use between storyboard, programmatic UI, and SwiftUI.
Because I am looking for work, I did not choose swiftUI. Because swiftUI do not available below iOS 12, most of company feel difficulty to adapt it now.
So, I used to develope by storyboard at first. However, when I want to initiate ViewController from coordinator, it is too complex to get reference IBOutlet from storyboard.
This moment is the time I feel the limitation of storyboard.
From now on, I will make UIButton programmatically.
After following up example, it is important to make your own code repeatedly without referencing the example.
Additionally, fully understanding the parameters on methods are necessary as well.
UIButton Example
Create UIButton and set the frame size
All code references are written from donggeun’s blog. (Some of codes are modified)
class ViewController:UIViewController {
let myButton = UIButton()
override func viewDidLoad(){
super.viewDidLoad()
myButton.setTitle("This is Button", for: .normal)
myButton.setTitleColor(.white, for: .normal)
myButton.backgroundColor = .darkGray
myButton.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
self.view.addSubview(myButton)
}
}
- Internal setting : Set the button title, title color, background color.
- Size setting : Set frame size with CGRect
- Add in View setting : Add button as a subview on superview.
Above settings are set in order. Especially, setting frame size means absolute size.
However, for devices optimizing, it is good to make the size relatively.
Set constraints for UIButton
As we do on storyboard, we can set the constraint on ViewController.
It is important to set UIView.translatesAutoresizingMaskIntoConstraints = false for using constraints.
UIButton anchors should be active to set constraints.
class ViewController:UIViewController {
let myButton = UIButton()
override func viewDidLoad(){
super.viewDidLoad()
myButton.setTitle("This is Button", for: .normal)
myButton.setTitleColor(.white, for: .normal)
myButton.backgroundColor = .darkGray
self.view.addSubview(myButton)
myButton.translatesAutoresizingMaskIntoConstraints = false
myButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
myButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
myButton.widthAnchor.constraint(equalToConstant: view.bounds.width*0.5).isActive = true
myButton.heightAnchor.constraint(equalToConstant: view.bounds.height*0.5).isActive = true
}
}
- Internal setting : Set the button title, title color, background color.
- Size setting : Set frame size with CGRect
- AutoresizingMask setting: for preventing collision between storyboard ui and code ui.
- Constraint setting: Set constraints X,Y, width, height by using Anchors.
X, Y, width, height is set following percentage from superview.
Add action to UIButton
class ViewController:UIViewController{
/*
code
*/
override func viewDidLoad(){
super.viewDidLoad()
/*
code
*/
myButton.addTarget(self, action: #selector(btnClicked),
for: .touchUpInside)
}
@objc func btnClicked(){
let alert = UIAlertController(title: "Click!"
, message: "You clicked that button"
, preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "Confirm"
, style: .default , handler: nil))
present(alert, animated: true, completion: nil)
}
}
- Add target on button :
#selectorsupports method excution. - Write btnClicked() method : make obj-c method for selector, set UIAlertController, and UIAlertAction
- Present AlertController : present alert
Conclusion
We studied to develop code based Autolayout UI.
It is important to fully understand detail methods from apple documentation. Those methods like UIControl which is super class of UIButton and UILabel, AutiresuzingMask, CGRect is difficult to fully explain here.
My following article should be about that.
Thank you for your reading :)