0

MY WORK SO FAR:

So I have a Tab bar that looks like this:

enter image description here

When I click on "Canteen" I want to be directed to a Page View Controller where I can swipe between different pages but stay on the same tab.

I have this somewhat working:

I have the Storyboard setup like this:

enter image description here

As you can see that segue above is coming from the Tab Bar Controller.

The third view (Can Page Item Controller, ID: "CanItemController) is used for all pages in the page view.

The second view above (Page View Controller, ID: "CanPageController) is used for controlling the Pages (duh)

The first view (CanteenViewController) contains all the code and makes all the connections. This is where everything goes on. The code inside this class is here:

import UIKit

class CanteenViewController: UIViewController, UIPageViewControllerDataSource {

    // MARK: - Variables
    private var pageViewController: UIPageViewController?

    private let contentImages = ["Radar-512.png",
        "dartp.png",
        "roomp.png",
        "abnews.png",
        "canteenp.png"];

    override func viewDidLoad() {
        super.viewDidLoad()

        createPageViewController()
        setupPageControl()            
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    private func createPageViewController() {

        let pageController = self.storyboard!.instantiateViewControllerWithIdentifier("CanPageController") as! UIPageViewController
        pageController.dataSource = self

        if contentImages.count > 0 {
            let firstController = getItemController(0)!
            let startingViewControllers: NSArray = [firstController]
            pageController.setViewControllers(startingViewControllers as [AnyObject], direction: UIPageViewControllerNavigationDirection.Forward, animated: false, completion: nil)
        }

        pageViewController = pageController
        addChildViewController(pageViewController!)
        self.view.addSubview(pageViewController!.view)
        pageViewController!.didMoveToParentViewController(self)

    }

    private func setupPageControl() {

        let appearance = UIPageControl.appearance()
        appearance.pageIndicatorTintColor = UIColor.grayColor()
        appearance.currentPageIndicatorTintColor = UIColor.whiteColor()
        appearance.backgroundColor = UIColor.darkGrayColor()

    }

    // MARK: - UIPageViewControllerDataSource

    func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {

        let itemController = viewController as! CanPageItemController

        if itemController.itemIndex > 0 {
            return getItemController(itemController.itemIndex-1)
        }
        return nil
    }

    func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {

        let itemController = viewController as! CanPageItemController

        if itemController.itemIndex+1 < contentImages.count {
            return getItemController(itemController.itemIndex+1)
        }
        return nil
    }

    private func getItemController(itemIndex: Int) -> CanPageItemController? {

        if itemIndex < contentImages.count {
            let pageItemController = self.storyboard!.instantiateViewControllerWithIdentifier("CanItemController") as! CanPageItemController
            pageItemController.itemIndex = itemIndex
            pageItemController.imageName = contentImages[itemIndex]
            return pageItemController
        }
        return nil
    }

    // MARK: - Page Indicator

    func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
        return contentImages.count
    }

    func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
        return 0
    }

}

I HAVE 2 PROBLEMS:

  1. I can't see any page indicators at all. This comes from the following code:

    private func setupPageControl() {
    
    let appearance = UIPageControl.appearance()
    appearance.pageIndicatorTintColor = UIColor.grayColor()
    appearance.currentPageIndicatorTintColor = UIColor.whiteColor()
    appearance.backgroundColor = UIColor.darkGrayColor()
    
    }
    

    Is there a way I can add a page indicator in the storyboard and reference that programatically. That way maybe I could add constraints and have more control. I think the page indicator might be hidden behind the Tab Bar. Though constraints are also giving me issues, which leads me to problem 2

  2. As you can see in the Item Controller, I have a UIImageView and the constraints are all set right. But when I run the app the image appears for a second (completely out of proportion) and then disappears. i.e - my constraints simply don't work properly

Question

Is my approach in general just wrong? Or is there a few little changes I can make to fix the above problems. I I've been following a tutorial (on Ray Wenderlich I think), and it all worked fine until I tried to integrate it with my Tab Bar.

Greg Peckory
  • 7,700
  • 21
  • 67
  • 114

1 Answers1

1

Leave all above thing, just do as following.

Edited : As per Swift 5

class CanteenViewController: UIViewController, UIScrollViewDelegate {

@IBOutlet var scrHelp: UIScrollView!
@IBOutlet var pageControl: UIPageControl!

var page = 0

let arrContent: [[String: Any]] = [["name" : "Title1", "icon" : "Radar-512"],
                                   ["name" : "Title2", "icon" : "dartp"],
                                   ["name" : "Title3", "icon" : "roomp"],
                                   ["name" : "Title4", "icon" : "abnews"],
                                   ["name" : "Title5", "icon" : "canteenp"]]

override func viewDidLoad() {
    super.viewDidLoad()
    self.title = "Canteen"
    // Do any additional setup after loading the view, typically from a nib.

    self.createHelpView()

    self.pageControl.backgroundColor = UIColor.clear
    self.pageControl.pageIndicatorTintColor = UIColor.lightGray
    self.pageControl.currentPageIndicatorTintColor = UIColor(red: 251/255, green: 108/255, blue: 108/255, alpha: 1.0)
    self.pageControl.tintAdjustmentMode = UIView.TintAdjustmentMode.dimmed
    self.pageControl.numberOfPages = self.arrContent.count
    self.pageControl.currentPage = 0

}

func createHelpView() {

    var x = 50
    var i = 0
    
    for item in self.arrContent {
        let lblTitle = UILabel(frame: CGRect(origin: CGPoint(x: CGFloat(x), y: 10), size: CGSize(width: CGFloat(self.scrHelp.frame.width-100), height: 25)))
        lblTitle.autoresizingMask = UIView.AutoresizingMask.flexibleBottomMargin
        lblTitle.backgroundColor = UIColor.clear
        lblTitle.font = UIFont.systemFont(ofSize: 17)
        lblTitle.textAlignment = NSTextAlignment.center
        lblTitle.textColor = UIColor.black
        lblTitle.text = item["name"] as? String    //self.arrTitle[i]
        self.scrHelp.addSubview(lblTitle)

        let imgView = UIImageView(frame: CGRect(origin: CGPoint(x: CGFloat(x), y: 50), size: CGSize(width: CGFloat(self.scrHelp.frame.width-100), height: CGFloat(self.scrHelp.frame.height-150))))
        imgView.autoresizingMask = UIView.AutoresizingMask.flexibleBottomMargin
        imgView.backgroundColor = UIColor.clear
        imgView.image = UIImage(named: (item["icon"] as! String))
        imgView.contentMode = UIView.ContentMode.scaleAspectFit
        self.scrHelp.addSubview(imgView)

        x = x + Int(self.scrHelp.frame.width)
        i = i + 1
    }
    self.scrHelp.contentSize = CGSize(width: (CGFloat(self.arrContent.count) * self.view.frame.width), height: 0)
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let pageWidth = CGFloat(self.scrHelp.frame.width)
    let fractionalPage = self.scrHelp.contentOffset.x / pageWidth
    self.page = lround(CDouble(fractionalPage))
    self.pageControl.currentPage = self.page
}
}

At last, add UIScrollView and UIPageControl to you storyboard and set respective outlet and constraint.

VRAwesome
  • 4,721
  • 5
  • 27
  • 52