Best approach: Swipe between scrollable views or view controllers

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?

I'd recommend to check [UIPageViewController](https://developer.apple.com/reference/uikit/uipageviewcontroller) — Ahmad F, May 08 '17 at 07:19

score 1 · Answer 1 · answered May 08 '17 at 07:22

1

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.

answered May 08 '17 at 07:22

Luan Lai

473
2
10

Thanks for the suggestion, this is an interesting approach. – daydr3am3r May 08 '17 at 07:30

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

You should use UIPageViewController for this approach .

How to use check : https://stackoverflow.com/a/25416608/3901620

Third Library for this

edited May 23 '17 at 12:34

Community

1
1

answered May 08 '17 at 07:23

KKRocks

8,222
1
18
84

Thanks, I will give it a try. I never used it before so I didn't even knew it was an actual controller for this. – daydr3am3r May 08 '17 at 07:31

score 1 · Accepted Answer · answered May 08 '17 at 07:26

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)
    }
}

}

Thanks, I'll take a look at PageViewController ASAP. – daydr3am3r May 08 '17 at 07:33 — daydr3am3r, May 08 '17 at 07:33

Best approach: Swipe between scrollable views or view controllers

3 Answers3