Search code examples
iosswiftautolayoutinterface-builderbwwalkthrough

PageViewController with full Image Background overflows

I am currently using BWWalkthrough to create an onboarding experience and each slide has a different background. Normally, setting the ImageView's constraint to 0 and its Content Mode to Aspect Fill is enough to have a full screen background:

enter image description here

This post and others in SO confirms that How do you make a background image scale to screen size in swift?

but with a PageViewController, my image overflows to the next page PageViewController.

See the following to understand the problem:

enter image description here

Keep in mind that is how you see it before swiping, which means that it is wrong at the moment

I also tried setting the width of my imageView equal width to my container view but that does not change anything:

enter image description here

Also, I did an onboarding programmatically before using BWWalkthrough and I was experiencing the exact same problem... What am I missing here?

Solution

  • I haven't used BWWalkthrough, but it seems like you have two problems:

    1. Your UIImageView is not clipped. You should set firstPageController.view.clipsToBounds = YES; for all of your pages. This makes sure content outside of your view's bounds will be clipped. It's NO by default.
    2. Your UIImageView needs clipping because its content is bigger than UIImageView's size. This might be the behaviour you wanted. But if it's not, you might want to try setting your image view's content mode something like aspect fit.