Make transition between two Menus with UIScrollView - ios

Question

I want to have 2 menus (the other one will be the same as the one shown in the screenshot, but it will contain other items).
Each menu is in its own UIStackView.
I've decided to rule out the UIPageViewController and instead use UIScrollView because it's the behaviour I want.
How can I put both menus inside of UIScrollView and make a nice animation?

Answer 1

Are you avoiding UIPageViewController because of the complexity? Because if you are there is a much easier way to accomplish the same gesture controlled transition using UIScrollView's pagingEnabled property
Based on what I see in the screenshots...
var size = CGSize()
size.height = self.view.frame.height
size.width = self.view.frame.width * 2
let scrollView = UIScrollView()
scrollView.frame = self.view.frame
scrollView.contentSize = size
scrollView.pagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
nav.center.y = scrollView.frame.height / 2
nav.center.x = scrollView.frame.width / 2
nav2.center.y = scrollView.frame.height / 2
nav2.center.x = nav.center.x + scrollView.frame.width
scrollView.addSubview(nav1)
scrollView.addSubview(nav2)
self.view.addSubview(scrollView)

Answer 2

#dsieczko did fantastic job answering my question. I'm not experienced with AutoLayout, so that was the problem. My final code looks something like this:
import UIKit
class MainMenuViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet var scrollView: UIScrollView!
#IBOutlet var nav2: UIStackView!
#IBOutlet var nav: UIStackView!
#IBOutlet var pageControl: UIPageControl!
override func viewDidLoad() {
super.viewDidLoad()
/* MAIN MENUS */
var size = CGSize()
size.height = self.nav.frame.height
size.width = self.view.frame.width * 2
scrollView.frame = self.view.frame
scrollView.contentSize = size
scrollView.pagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
nav.center.y = scrollView.frame.height / 2
nav.center.x = self.view.frame.width * 1.5
nav2.center.y = scrollView.frame.height / 2
nav2.center.x = nav.center.x + scrollView.frame.width + 400
scrollView.addSubview(nav)
scrollView.addSubview(nav2)
self.view.addSubview(scrollView)
/* MAIN MENUS */
// Change the Navigation Bar Color to Red
navigationController!.navigationBar.barTintColor = UIColor(red: 0.79, green: 0.19, blue: 0.19, alpha: 1)
// Change the Navigation Bar Font to Lato
self.navigationController?.navigationBar.titleTextAttributes =
[NSForegroundColorAttributeName: UIColor.whiteColor(),
NSFontAttributeName: UIFont(name: "Lato-Semibold", size: 20)!]
}
}
And my layout something like this:
If anyone encounters a problem like this, I will gladly help with my exp with this.