Xcode XIB: how to implement ScrollView or PageControl to scroll through subviews?

Question

I am creating a typical iOS Xcode 6 application.

My goal:

• A screen that has a subzone that can be resized to change content.

• For example, on the main screen there is an image of the logo, the middle area that I want to draw with swipeable, and the bottom button.

• When a user views the middle area, the area displays the next (or previous) information, which is a typical UIImage and UILabel header.

• The rest of the screen remains unchanged, i.e. no navigation changes.

The code is here . It uses the recommendations from the StackOverflow post here .

My question is: how can I better implement the code below while still using XIB?

My current implementation really works and takes this approach ...

A typical Swift file is Demo.swift , which is a UIViewController that has:

• page index, min and max
• for PageControl, UIImageView and UILabel
• actions to change page control, and swipe the screen or tap

A typical Demo.xib file that has:

• typical UIViewController for the whole screen
• UIImageView and UILabel for plugin and caption text
• a PageControl to indicate which page of the tutorial the user is viewing.

I am looking for better ways to do this; I have read many Xcode tutorials, and so far none of them are final for Xcode 6, XIB, and Swift.

Here are some implementations I researched that seem promising ...

Is there a way to implement a subview scope in XIB?

• For example, is it possible for Xocde to show an XIB with a rectangular area for removable content?

Is there an idiomatic way to write code for pluggable content?

• For example, using ScrollView, possibly contains a UIPageViewController?

Is there a way to make the XCML XControl object large enough to cover all UIImageView and UILabel, so I can skip the UIImageView to respond to gestures.

• In my Xcode, the PageControl parameter has an immutable height, which is always 37.

The reward will be for expert advice.

Answer 1

To make UIPageViewController available, you must implement the UIPageViewControllerDataSource protocol and provide a view controller for the pageViewController(pageViewController:viewControllerBeforeViewController) -> UIViewController? methods pageViewController(pageViewController:viewControllerBeforeViewController) -> UIViewController? and ...viewControllerAfterViewController) .

Provide a custom view controller for each page that displays the image and label, and accept them as properties so you can provide them from PageViewController.

My trick is to create a method that creates a new view controller in these methods:

 // MARK:- UIPageViewControllerDataSource extension MyPageViewController: UIPageViewControllerDataSource { func viewControllerWithIndex(var index: Int) -> UIViewController! { let viewController = storyboard?.instantiateViewControllerWithIdentifier("MyViewController") as! MyViewController // This VC has to be in the storyboard, otherwise just use MyVC() // Adjust the index to be cyclical, not required if let count = data?.endIndex { if count == 1 && index != 0 { return nil } if index < 0 { index += count } index %= count } viewController.view.tag = index viewController.record = data?[index] return viewController } func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? { let index = viewController.view?.tag ?? 0 return viewControllerWithIndex(index + 1) } func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? { let index = viewController.view?.tag ?? 0 return viewControllerWithIndex(index - 1) } func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int { return countAndSetupPageControl() } func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int { return viewController?.view.tag ?? 0 } } 

Now for the "subzone" you will need to implement a ChildViewController . If you are using storyboards, you can simply drag and drop the Container View and place the PageViewController in the built-in view controller, otherwise you need to add PageViewController.view as a PageViewController.view and set the frame in the middle.

More information can be found in the documentation for Apple , but basically you MUST call these methods:

 addChildViewController(pageViewController) view.addSubView(pageViewController.view) pageViewController.view.frame = ... // This is your "sub-area" pageViewController.didMoveToParentViewController(self) 

Answer 2

If you add a height limit to the PageControl, you can set its height as you wish.

I do not see a problem with your current implementation. Changing it to use PageViewController would be much more useful.

If I were you, I would add animation to the pageUpdate function so that the image disappears or starts ...

It would be prudent to use PageViewController if you want to be able to scroll to the next page (the same as when moving content at the same time that your finger moves around the screen). And you can use PageViewController or CollectionView with paging enabled.