Displaying Two View Controllers Vertically on the Same Screen in iOS

In iOS development, when you want to display two view controllers (VCs) vertically on the same screen, you don't work directly with VCs. Instead, you work with views (UIView). You can have as many views as you want, and control their positions using Auto Layout constraints. The view controllers are used mainly to manage the logic and behavior of these views.

Using Views Directly

Suppose you want to create a vertical layout with two views, where the first view takes up the top half of the screen and the second view takes up the bottom half. Here's how you can achieve this using a `UIViewController`:

Create a `UIViewController` subclass (`ScreenViewController` for example). Create two `UIView` instances (`firstView` and `secondView`). Configure the frames or constraints for these views to ensure they are placed and sized correctly. Add these views as subviews of `ScreenViewController`.

Here is an example in code:

// ScreenViewController.swift
class ScreenViewController: UIViewController {
toverride func viewDidLoad() {
()
ttscreenDidLoad() // Custom method to set up views
t}
tfunc screenDidLoad() {
tt// Create the first view with width equal to main view and height from top to halfway
ttlet firstView  UIView(frame: CGRect(x: 0, y: 0, width: , height:  / 2))
(firstView)
tt
tt// Create the second view with width equal to main view and height from halfway to bottom
ttlet secondView  UIView(frame: CGRect(x: 0, y:  / 2, width: , height:  / 2))
(secondView)
t}
}

Note that Auto Layout is more powerful and recommended for dynamic layouts. To use Auto Layout:

Set constraints for `firstView` to pin its leading, trailing, top, and height. Set constraints for `secondView` to pin its leading, trailing, bottom, and top (equal to firstView's bottom).

Using Container Views

If you need more advanced functionality or if you're working with existing view controllers, you can use a Container View. A container view has a child view controller and allows you to embed VCs within another VC. Here's how to use container views to display two VCs vertically in the same screen:

Create a base `UIViewController` (root VC). Add two `UIContainerView` instances to the root VC's view. Embed each container view with a corresponding child VC. Pin the container views to the top and bottom edges of the root VC's view.

Refer to the tutorial on Container View Controllers for specific steps on adding and configuring container views. Here is a brief example:

// RootViewController.swift
class RootViewController: UIViewController {
 weak var containerOne: UIContainerView!
 weak var containerTwo: UIContainerView!
t
toverride func viewDidLoad() {
()
ttonDidLoad() // Custom method to set up container views
t}
tfunc viewDidLoad() {
ttlet vc1  AViewController()
  
()
()
tt
ttlet vc2  BViewController()
  
()
()
t}
}

Here’s what each step does:

Create `containerOne` and `containerTwo` outlets in `RootViewController`. In `viewDidLoad`, create instances of `AViewController` and `BViewController`, and configure their views. Add the views of `AViewController` and `BViewController` as subviews of `containerOne` and `containerTwo`, respectively.

Remember that both container views should be properly constrained to the top and bottom edges of the root view to ensure they are positioned vertically.

Conclusion

While both methods allow you to display two views or VCs vertically, using views directly gives you more fine-grained control over their appearance and behavior. Using container views is often simpler and more flexible, especially when you need to manage the life cycle and navigation logic of embedded VCs.

To summarize:

For simple layouts, use views and Auto Layout. For more complex scenarios, use container views to manage VCs.

Whether you use views directly or container views, remember that the key is to understand and make effective use of Auto Layout to ensure your views fit together seamlessly on the screen.