iOS 11 Swift 4 iPhone X Safe Area Support of full screen ScrollView

Question

I currently have my layout design setup as a fullscreen scrollview on one view controller in which I add other view controllers as sub views to create a paged effect. On normal iphone screens it works beautifully. However when running on iPhone X, things seem to appear off centered, and I can page in multiple times in one page.

Here is my code for setup of the scrollview

self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: self.view.frame.size.height * 3)
        if #available(iOS 11.0, *) {
            self.scrollView.contentInsetAdjustmentBehavior = .never
        } else {
            // Fallback on earlier versions
        }


        let V1 = self.storyboard?.instantiateViewController(withIdentifier: "S1") as! UINavigationController!
        self.addChildViewController(V1!)
        self.scrollView.addSubview(V1!.view)
        V1?.didMove(toParentViewController: self)
        V1?.view.frame = scrollView.bounds
        myViewsArray.append(V1!)

        let V2 = self.storyboard?.instantiateViewController(withIdentifier: "S2") as UIViewController!
        self.addChildViewController(V2!)
        self.scrollView.addSubview(V2!.view)
        V2?.didMove(toParentViewController: self)
        V2?.view.frame = scrollView.bounds
        myViewsArray.append(V2!)

        var V1Frame: CGRect = V1!.view.frame
        V1Frame.origin.y = 2*self.view.frame.height
        V1?.view.frame = V1Frame

        var V2Frame: CGRect = V2!.view.frame
        V2Frame.origin.y = (self.view.frame.height)
        V2?.view.frame = V2Frame

        V2!.view.alpha = 1

I have safe area on in story board.

Jogendar Choudhary · Accepted Answer · 2018-05-09T18:58:49.187

You can do this using safe area layout guide and get more info using the link:

https://medium.com/rosberryapps/ios-safe-area-ca10e919526f

You can also do this without safe area: I have prepared a demo for you and in this demo, we have three view controllers added on scroll view and scroll view is added on another view controller(ContainerViewController)

ContainerViewController:

import UIKit

class ContainerViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        let V1 = self.storyboard?.instantiateViewController(withIdentifier: "first")
        self.addChildViewController(V1!)
        self.scrollView.addSubview(V1!.view)
        V1?.didMove(toParentViewController: self)
        V1?.view.frame = scrollView.bounds

        let V2 = self.storyboard?.instantiateViewController(withIdentifier: "second")
        self.addChildViewController(V2!)
        self.scrollView.addSubview(V2!.view)
        V2?.didMove(toParentViewController: self)
        V2?.view.frame = scrollView.bounds

        let V3 = self.storyboard?.instantiateViewController(withIdentifier: "third")
        self.addChildViewController(V3!)
        self.scrollView.addSubview(V3!.view)
        V3?.didMove(toParentViewController: self)
        V3?.view.frame = scrollView.bounds

        var V1Frame: CGRect = V1!.view.frame
        V1Frame.origin.y = 0
        V1?.view.frame = V1Frame

        var V2Frame: CGRect = V2!.view.frame
        V2Frame.origin.y = (self.view.frame.height)
        V2?.view.frame = V2Frame

        var V3Frame: CGRect = V3!.view.frame
        V3Frame.origin.y = (self.view.frame.height)*2
        V3?.view.frame = V3Frame
    }
    override func viewDidLayoutSubviews() {
        scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height*3)
    }
}

Note: Remove top and bottom constraint from the safe area and add them from SuperView(for Scroll view, InnerView(FirstVC, SecondVC, ThirdVC))`

You can check all the functionality and constraints of the demo project. Download URL: https://www.dropbox.com/s/4ovfqmrtwt2i8yi/StackOverflow.zip?dl=0

I have tested the demo in iPhoneX and iPhone6 and iPhone8+

Screenshots are below:

score 3 · Answer 2 · answered Apr 13 '18 at 20:39

3

You can solve this easily.

1

2.

answered Apr 13 '18 at 20:39

Kamani Jasmin

575
6
10

do i do this for the scroll view or for the individual views or for all – user6520705 Apr 13 '18 at 21:28
Yes this method work for any object like, scrollview, tableview, imageview, button, etc. – Kamani Jasmin Apr 13 '18 at 21:40
I believe it is working, I think the issue that I have now is that self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: self.view.frame.size.height * 3) and the placement of the views need to be adjusted for the top and bottom safe area heights – user6520705 Apr 13 '18 at 22:11
Do you know what the combined heights is ? – user6520705 Apr 13 '18 at 22:12
This answer valid for the set frame of UIKit object. if you want to set inside scrollview data then you need user contentInset in scrollview. – Kamani Jasmin May 10 '18 at 11:22
Can you please exlpain – user6520705 May 10 '18 at 20:27
what are you use? Auto layout or auto resizing – Kamani Jasmin May 11 '18 at 11:12

MAhipal Singh · Answer 3 · 2018-05-03T05:16:52.133

3

set your constraint with Safe Area Here you can checkout ...

https://stackoverflow.com/a/45334411/6898523

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Once you set your scrollview constraint to safe area..select your viewController scene and uncheck the Adjust scroll view insets property.

Updated

if #available(iOS 11.0, *) {
   fullScreenScrollView?.contentInsetAdjustmentBehavior = .always
 }

edited May 03 '18 at 05:16

answered May 02 '18 at 05:31

MAhipal Singh

4,220
35
53

is the issue being cause by the setting of the content size and y placement of the views on the scrollview in the code ? – user6520705 May 02 '18 at 14:46
Maybe due to content size... But are you confirm the safe area of top and bottom of scroll view. – MAhipal Singh May 02 '18 at 15:21
I have confirmed, I do believe the issue is the scrollview content size and the y placement of the views onto the scrollview. Any ideas how to correct those to account for the safe area – user6520705 May 03 '18 at 05:11
@user6520705 i updated my answer (added piece of code at bottom ) pls try that. – MAhipal Singh May 03 '18 at 05:17

iOS 11 Swift 4 iPhone X Safe Area Support of full screen ScrollView

3 Answers3