{"id":2219,"date":"2018-02-08T02:13:12","date_gmt":"2018-02-08T07:13:12","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=2219"},"modified":"2018-02-08T02:13:12","modified_gmt":"2018-02-08T07:13:12","slug":"how-to-use-child-view-controllers-in-swift-4-0-programmatically","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2018\/02\/how-to-use-child-view-controllers-in-swift-4-0-programmatically\/","title":{"rendered":"How to use child View Controllers in Swift 4.0 programmatically"},"content":{"rendered":"

I’ve just released my Learn to read Korean app for iPhone<\/a>. It uses a number of child View Controllers in the home screen. While child View Controllers are not a new thing, it was a new experience for me, and I greatly recommend them to reduce the clutter of your View Controllers.<\/p>\n

Here’s a photo of my home screen:<\/p>\n

\"\"<\/p>\n

The main view controller consists of a vertical\u00a0UIScrollView<\/a> and multiple horizontal scrolling UICollectionViews<\/a> below. While it’s possible to do it all in one massive View Controller, it’s much better to delegate\u00a0UICollectionView events to their individual child View Controllers.<\/p>\n

The good news is that using child UIViewControllers is super easy. You can use your Storyboard or do it\u00a0programmatically in your\u00a0UIViewController files. I opted for the latter as I find it easier to reproduce across Xcode projects.<\/p>\n

All you need to do to add a child View Controller is below. I included an optional\u00a0constraints<\/a> section.<\/p>\n

\/\/ Create child VC\r\nlet childVC = UIViewController()\r\n\r\n\/\/ Set child VC\r\nself.addChildViewController(childVC)\r\n\r\n\/\/ Add child VC's view to parent\r\nself.view.addSubview(childVC.view)\r\n\r\n\/\/ Register child VC\r\nchildVC.didMove(toParentViewController: self)\r\n\r\n\/\/ Setup constraints for layout\r\nchildVC.view.translatesAutoresizingMaskIntoConstraints = false\r\nchildVC.view.topAnchor.constraint(equalTo: heroView.bottomAnchor).isActive = true\r\nchildVC.view.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true\r\nchildVC.view.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true\r\nchildVC.view.heightAnchor.constraint(equalToConstant: height).isActive = true\r\n<\/pre>\n
With multiple child VCs (each handling their own\u00a0UICollectionView events), the code base becomes manageable. In each child View Controller, you can handle customization, such as background color, UILabels, UIButtons, etc.<\/p>\n
Another tip I have is to use the UIView’s convert(_:to:)<\/a> method as necessary. You may need to get the child subview’s position relative to your parent View Controller’s view (such as for an UIViewControllerTransitioningDelegate). The code for that is simple too:<\/p>\n
\/\/ contrived example label in Child VC to get parent frame\r\nlet label = UILabel()\r\nlet childViewFrame = label.frame\r\nlet frameInParent = label.convert(childViewFrame, to: parentVC.view)\r\n<\/pre>\n
That’s all I wanted to share for today. Don’t be afraid of using child View Controllers to break up your massive View Controllers!<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve just released my Learn to read Korean app for iPhone. It uses a number of child View Controllers in the home screen. While child View Controllers are not a new thing, it was a new experience for me, and I greatly recommend them to reduce the clutter of your View Controllers. Here’s a photo […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1374,966,471,1375,1174,1193,1376,1086],"class_list":["post-2219","post","type-post","status-publish","format-standard","hentry","category-programming","tag-childviewcontroller","tag-ios","tag-iphone","tag-parentviewcontroller","tag-swift","tag-uikit","tag-uiviewcontroller","tag-xcode"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=2219"}],"version-history":[{"count":8,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2219\/revisions"}],"predecessor-version":[{"id":2228,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2219\/revisions\/2228"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=2219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=2219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=2219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}