Using UIScrollView to cycle through images - ios

Question

I have an imageView inside of a scrollView, and I want to be able to upload up to 3 images and have the user swipe between them. I have accomplished this simply by replacing the contents of the view with the information I want, but it doesn't look or feel as good as a scroll view with pagination would.
I have all of the code to make each image appear when I want it, but my problem is with the scrollview constraints and how to add more content to a scrollview with fixed width. No matter what I do, I can't seem to extend the scroll range when I add an image to the view.
here is what I'm trying now:
let newImageView:UIImageView = UIImageView()
self.imageScrollView.contentSize = CGSize(width: self.imageView.frame.size.width * 3, height: self.imageView.frame.size.height)
self.imageScrollView.pagingEnabled = true
for i = 0; i < 3; ++i {
var xOrigin:CGFloat = CGFloat(i) * self.view.frame.size.width
newImageView.frame = CGRectMake(self.imageView.image!.size.width * i, 0, self.imageView.image!.size.width, self.imageScrollView.frame.size.height)
newImageView.image = images[i]
newImageView.contentMode = UIViewContentMode.ScaleAspectFit
self.imageScrollView.addSubview(newImageView)
}
With this code I am able to add the images, but I cannot scroll to them. In my storyboard, the scrollview constraints look like this:
I'm sure some of these constraints are redundant, but I can't figure out why the content width won't extend and allow me to scroll through all of the images in the scrollview.
EDIT
I have made changes by using the textbook examples from #matt. I made a new view controller and put it inside a view in my other view controller (the same one as I had originally). It displays the first one no problem, but it doesn't seem to call teh UIPageViewControllerDataSource functions when I swipe left or right. I'm not sure why this is the case.
Here's what it looks like in the original view controller (UploadPhotoViewController)
func setUpPageViewController() {
sharedIm.images.append(UIImage(named: "placeholder")!)
sharedIm.images.append(UIImage(named: "TestProfile")!)
sharedIm.images.append(UIImage(named: "button")!)
let pvc = UIPageViewController(transitionStyle: .Scroll, navigationOrientation: .Horizontal, options: nil)
let page:ImagePage = ImagePage()
pvc.dataSource = self
pvc.setViewControllers([page], direction: .Forward, animated: false, completion: nil)
pvc.view.frame = self.imageContainer.bounds
self.imageContainer.addSubview(pvc.view)
pvc.didMoveToParentViewController(self)
}
//this is placed at the end of the class
extension UploadPhotoViewController : UIPageViewControllerDataSource {
func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
let image = (viewController as! ImagePage).image
let ix = find(sharedIm.images, image)! + 1
println(ix)
if ix >= sharedIm.images.count {
println("no next page")
return nil
}
sharedIm.currentIndex = ix
let page = ImagePage()
return page
}
func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
let image = (viewController as! ImagePage).image
let ix = find(sharedIm.images, image)! - 1
println(ix)
if ix < 0 {
println("no previous page")
return nil
}
sharedIm.currentIndex = ix
let page = ImagePage()
return page
}
And here is what is in my new view controller that is being added to a view of the other one:
class ImagePage: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
var image : UIImage?
var imagePicker: UIImagePickerController!
#IBOutlet var imageView : UIImageView!
#IBOutlet var forwardButton: UIButton!
#IBOutlet var backButton: UIButton!
#IBOutlet var closeButton: UIButton!
#IBOutlet var pictureButton: UIButton!
#IBOutlet var cameraButton: UIButton!
init() {
self.image = sharedIm.images[sharedIm.currentIndex]
super.init(nibName: "ImagePage", bundle: nil)
}
required init(coder: NSCoder) {
fatalError("NSCoding not supported")
}
override func viewDidLoad() {
super.viewDidLoad()
self.imageView.image = self.image
}
//bunch of other code for buttons and uploading pictures
}

Answer 1

What you're trying to do would be a lot easier with a UIPageViewController (with a scrolling style). I would suggest that you switch to a UIPageViewController implementation instead.
The reason is that you only supply one "page" (in your case, an image) at a time. You can decide in real time whether there is another "page" in either direction, and how many "pages" you want to pretend there "really" are. The bookkeeping work happens in your model (the data behind the scenes), rather than your having to configure the entire view to handle all pages at once, as UIScrollView makes you do.

Answer 2

When working with autolayout and uiscrollview, the trick is to know when to load your content. Since you are working in a hybrid mode (frames and autolayout) you need to make sure the constraints have had time to load and then AFTER they have loaded, you can add your subviews and adjust the constraints. If you try to load your content on viewDidLoad, it will be too early and your constraints may not have been set yet. If you load your content on viewWillAppear, then it's too late and the constraints have already been locked in for presenting the view to the user.
So, I have found the best place to load content is on the viewDidLayoutSubviews At this point autolayout has applied the constraints to your scrollView and you are now safe to make changes. Add a call here to run your code that populates the scrollView and you should be fine. Also, you will need to set a flag to only make the call once as viewDidLayoutSubviews can get called several times during view creation. You should also call setNeedsUpdateConstraints on your scrollView to make sure its constraints are updated as you add your subviews.