Best approach: Swipe between scrollable views or view controllers - ios

Question

I have a few screens in my app that look like this (not from my app, found it online):
One of them is an actual intro screen, like the one above and the other will display some data and an "I AGREE" button on the last view.
In all cases the user will have to swipe between the views / view controllers.
I know I can swipe between view controllers like this: Setting up UIScrollView to swipe between 3 view controllers and I can also swipe between views using this:
func respondToSwipeGesture(_ gesture: UIGestureRecognizer)
{
print("respondToSwipeGesture")
if let swipeGesture = gesture as? UISwipeGestureRecognizer
{
switch swipeGesture.direction
{
case UISwipeGestureRecognizerDirection.right:
if(isLeftToRightActive == true)
{
print("Swiped right")
moveTheMainView()
}
case UISwipeGestureRecognizerDirection.left:
if(isLeftToRightActive == false)
{
print("Swiped left")
moveTheMainView()
}
default:
break
}
}
}
func moveTheMainView()
{
print("moveTheMainView")
let mainViewContainerHeight = self.vMainViewContainer.frame.height
let mainViewContainerWidth = self.vMainViewContainer.frame.width
let mainViewContainerModifiedLeft : CGFloat = mainViewContainerWidth / 2
if(isLeftToRightActive == false)
{
print("Move the main view to the right")
let urlCRTable = Bundle.main.url(forResource: "CRCharts", withExtension: "html")
let crTableRequestObj = URLRequest(url: urlCRTable!)
self.wvCRTable.loadRequest(crTableRequestObj)
ivIndicator.image = UIImage(named: "SecondOn")
isLeftToRightActive = true
}
else
{
print("Move the main view to the left")
let urlCRTable = Bundle.main.url(forResource: "CRTable", withExtension: "html")
let crTableRequestObj = URLRequest(url: urlCRTable!)
self.wvCRTable.loadRequest(crTableRequestObj)
ivIndicator.image = UIImage(named: "FirstOn")
isLeftToRightActive = false
}
}
So I was wondering what would be the best / correct approach to do this: to use multiple view controllers or to use multiple views in the same view controller? Or is there any other way that is considered corect?

Answer 1

I usually do walkthroughs like this, using PageViewController. You should create scenes like this on screenshots. And classes:
class WalkthroughContentViewController: UIViewController {
#IBOutlet var headingLabel: UILabel!
#IBOutlet var contentLabel: UILabel!
#IBOutlet var contentImageView: UIImageView!
#IBOutlet var pageControl: UIPageControl!
#IBOutlet var forwardButton: UIButton!
var index = 0
var heading = ""
var imageFile = ""
var content = ""
override func viewDidLoad() {
super.viewDidLoad()
headingLabel.text = heading
contentLabel.text = content
contentImageView.image = UIImage(named: imageFile)
pageControl.currentPage = index
switch index {
case 0...1: forwardButton.setTitle("NEXT", for: .normal)
case 2: forwardButton.setTitle("DONE", for: .normal)
default: break
}
}
#IBAction func nextButtonTapped(sender: UIButton) {
switch index {
case 0...1: // Next Button
let pageViewController = parent as! WalkthroughPageViewController
pageViewController.forward(index: index)
case 2: // Done Button
UserDefaults.standard.set(true, forKey: "hasViewedWalkthrough")
// Add Quick Actions
if traitCollection.forceTouchCapability == UIForceTouchCapability.available {
let bundleIdentifier = Bundle.main.bundleIdentifier
let shortcutItem1 = UIApplicationShortcutItem(type: "\(bundleIdentifier).OpenFavorites", localizedTitle: "Show Favorites", localizedSubtitle: nil, icon: UIApplicationShortcutIcon(templateImageName: "favorite-shortcut"), userInfo: nil)
let shortcutItem2 = UIApplicationShortcutItem(type: "\(bundleIdentifier).OpenDiscover", localizedTitle: "Discover Restaurants", localizedSubtitle: nil, icon: UIApplicationShortcutIcon(templateImageName: "discover-shortcut"), userInfo: nil)
let shortcutItem3 = UIApplicationShortcutItem(type: "\(bundleIdentifier).NewRestaurant", localizedTitle: "New Restaurant", localizedSubtitle: nil, icon: UIApplicationShortcutIcon(type: .add), userInfo: nil)
UIApplication.shared.shortcutItems = [shortcutItem1, shortcutItem2, shortcutItem3]
}
dismiss(animated: true, completion: nil)
default: break
}
}
}
class WalkthroughPageViewController: UIPageViewController, UIPageViewControllerDataSource {
var pageHeadings = ["Personalize", "Locate", "Discover"]
var pageImages = ["foodpin-intro-1", "foodpin-intro-2", "foodpin-intro-3"]
var pageContent = ["Pin your favorite restaurants and create your own food guide",
"Search and locate your favourite restaurant on Maps",
"Find restaurants pinned by your friends and other foodies around the world"]
override func viewDidLoad() {
super.viewDidLoad()
// Set the data source to itself
dataSource = self
// Create the first walkthrough screen
if let startingViewController = contentViewController(at: 0) {
setViewControllers([startingViewController], direction: .forward, animated: true, completion: nil)
}
}
// MARK: - UIPageViewControllerDataSource Methods
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
var index = (viewController as! WalkthroughContentViewController).index
index -= 1
return contentViewController(at: index)
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
var index = (viewController as! WalkthroughContentViewController).index
index += 1
return contentViewController(at: index)
}
// MARK: - Helper Methods
func contentViewController(at index: Int) -> WalkthroughContentViewController? {
if index < 0 || index >= pageHeadings.count {
return nil
}
// Create a new view controller and pass suitable data.
if let pageContentViewController = storyboard?.instantiateViewController(withIdentifier: "WalkthroughContentViewController") as? WalkthroughContentViewController {
pageContentViewController.imageFile = pageImages[index]
pageContentViewController.heading = pageHeadings[index]
pageContentViewController.content = pageContent[index]
pageContentViewController.index = index
return pageContentViewController
}
return nil
}
func forward(index: Int) {
if let nextViewController = contentViewController(at: index + 1) {
setViewControllers([nextViewController], direction: .forward, animated: true, completion: nil)
}
}
}

Answer 2

If you have more items, you should use UICollectionView, each item (with red background in your image) will be a cell.
This way the views will be reused, better performance.

Answer 3

You should use UIPageViewController for this approach .
How to use check : https://stackoverflow.com/a/25416608/3901620
Third Library for this