UIView Basics with Examples
UIView is an object that manages the content for a rectangular area on the screen. Views are the fundamental building blocks of your apps user interface, and the UIView class defines the behaviours that are common to all views. In translation, if we want to create a custom view, we always need to inherit UIView and override some of their methods. It can have other subviews like label, button, images etc.
The frame and bounds properties define the geometry of each view. UIView and UIViewController have strong connection but still there is a distinct difference between them.
UIView has something called AutoLayout pass which manages the lifecycle but in this article i will not go too much into details. Will focus on practical lifecycle methods. For now enough is to know mostly this happens automatically, but sometimes we need to trigger it manually.
E.g.: we show some dynamic view to the user and add shadow to it.
Image is downloaded async from the internet and now we know its size and want to refresh the view.
UIView init with custom initializers
Lifecycle Methods
init()
Custom init with or without parameters.
init(frame:)
Initialises and returns a newly allocated view object with the specified frame rectangle. The origin of the frame is relative to the superview. It is the default initialiser. You must call it only after initialising your instance variables.
init(coder:)
Implement this method if you load your view from storyboards or nib files and your view requires custom initialisation.
updateConstraints()
Updates constraints for the view. Apple actually suggests against overriding updateConstraints. Do it just if you need some performance optimisation by some constraint calculation.
layoutSubviews()
System traverses views from super to subviews and calls layoutSubviews for each. It is the most common overridden method.
Can be triggered by setNeedsLayout on force or if you want to update the layout of your views immediately layoutIfNeeded, if the layout was previously invalidated.
remove FromSuperview()
Remove the view from its parent.
Calling this method removes all constraints in the view and in its subtrees.
Less used Lifecycle Methods
didAddSubview(_:)
Tells the view that a subview was added.
will RemoveSubview(_:)
Tells the view that a subview is about to be removed.
will Move(toWindow:)
Tells the view that its window object is about to change.
did AddSubview(_:)
Tells the view that a subview was added.
did MoveToSuperview(_:)
Tells the view that its superview changed.
And now some examples in what order are the methods triggered for some use cases.
Now with adding, inserting, removing views there are infinite possibilities, I’m just presenting an idea. You can play with the code for your cases.
If you go a bit deeper, then UIView passes all the work to a backing CALayer that contains a pixel bitmap of the current view state. The method for this step is drawRect().
Use case 👉 Solution
If you don’t know the size of the view as multiple subview “blocks” can be added in runtime, then solution could be to add UIScrollView and inside scroll view add UIStackView and insert your custom UIView into stack view as they are ready.
It will make sure that if the view is bigger than the screen, then it will be scrollable and also it will automatically fit content in the stack view.
As a bonus stack view can give you free animation of layout.
Outro
Now that we have learned the lifecycle of UIView. The next thing will be to introduce you to the Child ViewController to have some separation for complex screens.
If you got to this point, thanks for reading. 🙂 If you like the content please 👏, share, subscribe, buy a coffee it means to me. If you have some suggestions or questions please feel free to comment.