make image view full screen in view controller/page view controller (swift)

haitham picture haitham · Jun 17, 2015 · Viewed 9.5k times · Source

I am using UIPageViewController to show images full screen. Issue is the images are not showing full screen. Instead there is a gap on the bottom between the image and the page control view dots and on the top. I have a UIViewController which is added to UIPageController as a sub view / child and that ViewController has the images being showed using ImageView. I am trying to do this in swift/storyboard.

I changing the top bar and bottom bar option to "none" in storyboard, but it didn't work.

Image Preview:

enter image description here

The ChildViewControllerCode:

class BoatContentViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!


var pageIndex: Int!
var titleText: String!
var imageFile: String!


override func viewDidLoad() {
    super.viewDidLoad()

    self.imageView.image = UIImage(named: self.imageFile)
    self.titleLabel.text = self.titleText


    // Do any additional setup after loading the view.
}

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

The mainViewControllerCode:

class BoatViewController: UIViewController, UIPageViewControllerDataSource {
@IBOutlet weak var loginButton: UIButton!
@IBOutlet weak var skipButton: UIButton!

var pageViewController: UIPageViewController!
var pageTitles: NSArray!
var pageImages: NSArray!

override func viewDidLoad() {
    super.viewDidLoad()

    loginButton.backgroundColor = UIColor.clearColor()
    loginButton.layer.cornerRadius = 5
    loginButton.layer.borderWidth = 1
    loginButton.layer.borderColor = UIColor.purpleColor().CGColor


    skipButton.backgroundColor = UIColor.whiteColor()
    skipButton.layer.cornerRadius = 5
    skipButton.layer.borderWidth = 1
    skipButton.layer.borderColor = UIColor.whiteColor().CGColor


    self.pageTitles = NSArray(objects: "", "", "", "", "")
    self.pageImages = NSArray(objects: "onboarding1", "onboarding2", "onboarding3", "onboarding4", "onboarding5")
    self.pageViewController = self.storyboard?.instantiateViewControllerWithIdentifier("BoatPageViewController") as! UIPageViewController
    self.pageViewController.dataSource = self
    var startVC = self.viewControllerAtIndex(0) as BoatContentViewController
    var viewControllers = NSArray(object: startVC)
    self.pageViewController.setViewControllers(viewControllers as [AnyObject], direction: .Forward, animated: true, completion: nil)
    self.pageViewController.view.frame = CGRectMake(0, 30, self.view.frame.width, self.view.frame.size.height - 60)
    self.addChildViewController(self.pageViewController)
    self.view.addSubview(self.pageViewController.view)
    self.pageViewController.didMoveToParentViewController(self)

    // Do any additional setup after loading the view.
}

func viewControllerAtIndex(index: Int) -> BoatContentViewController {

    if ((self.pageTitles.count == 0) || (index >= self.pageTitles.count)) {

        return BoatContentViewController()

    }


    var vc: BoatContentViewController = self.storyboard?.instantiateViewControllerWithIdentifier("BoatContentViewController") as! BoatContentViewController

    vc.imageFile = self.pageImages[index] as! String

    vc.titleText = self.pageTitles[index]as! String

    vc.pageIndex = index

    return vc
}

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

{

    var vc = viewController as! BoatContentViewController

    var index = vc.pageIndex as Int

    if (index == 0 || index == NSNotFound)

    {
        return nil

    }

    index--

    return self.viewControllerAtIndex(index)

}



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

    var vc = viewController as! BoatContentViewController

    var index = vc.pageIndex as Int

    if (index == NSNotFound) {
        return nil
    }

    index++

    if (index == self.pageTitles.count) {
        return nil
    }

    return self.viewControllerAtIndex(index)

}

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


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

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

App Delegate:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.



    var pageControl = UIPageControl.appearance()

    pageControl.pageIndicatorTintColor = UIColor.lightGrayColor()

    pageControl.currentPageIndicatorTintColor = UIColor.blackColor()

    pageControl.backgroundColor = UIColor.clearColor()



    return true
}

Answer

matt picture matt · Jun 17, 2015

The UIPageViewController has a view, in which its pages will appear. Those pages cannot be bigger than that view - in other words, they are inside the page view controller.

Your UIPageViewController's view is smaller than the screen - it allows room at the bottom for the page control and the button, and at the top for the nav bar. You yourself are causing this to be true:

self.pageViewController.view.frame = 
    CGRectMake(0, 30, self.view.frame.width, self.view.frame.size.height - 60)

You have allowed 30 points gap at the top and 30 points gap at the bottom. Thus, the images it displays can never be bigger than that. They can never be "full screen".