Quick Guide for iOS Development (Objective-C & Swift)

Container View in iOS using Xcode 8

In this tutorial blog, I am going to discuss about use of Container View in iOS application using Xcode 8.

Container View is used to manage multiple View Controllers into one View Controller. It is also referred as an approach to handle the multiple view controller’s content into single one.

While implementing Container View in a View Controller its child view controller automatically resizes according the container view size taken.

In below example, Page View Controller is implemented in a particular region of view controller and a child view controller i.e. page view controller automatically resized after making ‘embed’ segue from container view to child view controller as seen in screenshot.

Lets get started

Following are the steps to make use of Container View:

Step 1: Open Xcode -> click on Create new Xcode project then choose Single View Application template under iOS tab as shown in below image and click Next button.

Step 2: Enter the product name as ContainerViewDemo, select the Language as Objective-C and again click Next button as shown in below image. Later click Create button to create project appear on the next window.

Step 3: Adding Container View into the View Controller.

On your project, click on main.storyboard file available in the project navigator, and then select the Container View from object library, drag into the superview of View Controller, it will look like below.

Select View of View Controller and change its background colour from Attribute Inspector. Place two button named ‘Log In’ & ‘Sign Up’ as mentioned below screenshot to look UI better. (Optional)

Step 4: Delete Child View Controller to place Page View Controller

Select the child View Controller & hit delete button. Now, search Page View Controller from Object Library and drag & drop it to the storyboard. Thereafter, create ‘embed’ segue connection b/w Container View & Page View Controller by pressing Ctrl button & drag-drop method. It will look like below.

And also place another View Controller for showing the content of Page View Controller and that will be instantiated via Page View Controller.

Step 5: Create new class for Page View Controller & associate it

To create new class, press Cmd+N and select Cocoa Touch Class then click Next, give name of class as PageViewController & its superclass should be UIPageViewController, click Next.

After creating class, select controller & associate the class with it from Identity Inspector & type its class name in the field of Class.

In the same manner, create class for another View Controller where content of Page View will be shown, name it as ContentViewController & then associate the class as well.

Step 6: Adding Image View to Content View Controller

Search Image View from Object Library and drag-drop to Content View Controller then place it all over the view. Also define its property of IBOutlet using drag-drop method to class.

Step 7: Approach Page View Controller Blog Post or download Xcode Project.

In this step, copy the code of PageViewController class from Page View Controller blog post (link mentioned below) and paste it to its corresponding class in this project.

Similarly, copy the code of ContentViewController class and paste it to its corresponding class in this project as well.

Blog: https://mukeshkrm89.blogspot.in/2017/03/how-to-create-page-view-controller-in.html

Download Xcode project of Page View Controller

NOTE: Don't forget to import images in Assets folder of xcode project.

Download Images

Step 8: At last, run your simulator to test your app.