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

2

6

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
}
Steer answered 17/6, 2015 at 15:40 Comment(2)
check this out #21046130Mg
This one was helpful for me UIPageViewController UIImage not showing full screenEureetloir
S
2

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".

Slider answered 17/6, 2015 at 15:46 Comment(6)
Can't do something like this? s-media-cache-ak0.pinimg.com/736x/a3/84/cd/…Steer
Obviously yes, you can. But that is not what you asked. You asked why you were not doing that. And I told you why. - Added a little more info to my answer, showing you how you yourself are making the images views smaller than the screen.Slider
Also, although I'm just guessing, I would say that the Telegram interface you showed is not a UIPageViewController - it's probably just a paging horizontal UIScrollView. With only 6 "pages" that are just images, that's how I would do it, anyway.Slider
Thank you! didn't catch that. Fixed the bottom gap. Changed values to 0,0,width,height. For some reason the top gap is still showingSteer
Okay, but the point is, I believe I've answered the question. Your question was not "how do I achieve the Telegram interface"? Your question was "why don't the images in my interface occupy the whole screen"? And I explained that.Slider
Did you manage to fix the top gap?I am also facing the same problem. @Matt Can you help?Brentonbrentt
A
0

Swift 3 version, when subclassing UIPageViewController:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let subViews: NSArray = view.subviews as NSArray
    var scrollView: UIScrollView? = nil
    var pageControl: UIPageControl? = nil

    for view in subViews {
        if view is UIScrollView {
          scrollView = view as? UIScrollView
        } else if view is UIPageControl {
            pageControl = view as? UIPageControl
        }
    }

    if (scrollView != nil && pageControl != nil) {
        scrollView?.frame = view.bounds
        view.bringSubview(toFront: pageControl!)
    }
}
Argolis answered 6/1, 2017 at 18:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.