OK, I think it's time to make an official place on the internet for this problem: How to make a
UIScrollView photoviewer with paging and zooming. Welcome my fellow
I have a
UIScrollView with paging enabled, and I'm displaying
UIImageViews like the built-in photos app. (Does this sound familiar yet?)
I found the following project on github:
Which shows how to implement zooming in a scroll view while paging is enabled. If anyone else tries this out, I actually had to remove the
UIScrollView subclass and use the native class otherwise it doesn't work. I think it's because of changes in the 3.0 SDK relating to how the scroll view intercepts touch events.
So the the idea is to remove all the other views when you start zooming, and move the current view to (0, 0) in the
scrollview, updating the
contentsize etc. Then when you zoom back to 1.0f it adds the other views back and puts things all back in order.
Anyway, that project works perfectly in the simulator, but on the device there is some nasty movement of the view you are resizing, which looks like it's caused by the fact we are changing the
offset etc. for the view being resized. You have to do this view moving otherwise you can pan left through the whitespace left by the other views.
I found one interesting note in the "Known Issues" of the 3.0 SDK release notes:
UIScrollView: After zooming, content inset is ignored and content is left in the wrong position.
This kind of sounds like what is happening here. After zooming in, the view will shift offscreen because you have changed the offset etc.
I've spent hours on this already and I'm slowing coming to the sad realization that this just isn't going to work.
Three20's photo viewer is out of the question: it's too heavy weight and there is too much unnecessary UI and other behaviour.
The built in Photo app seems to do some magic. If you zoom in on an image and pan to the far edges, the current photo moves independently of the photo next to it which isn't what you get when trying this with a standard
I've seen discussion about nesting the
UIScrollView's but I really don't want to go there.
Has anybody managed this with the standard
UIScrollView (and works in the 2.2 and 3.0 SDK)? I don't fancy rolling my own zoom + bounce + pan + paging code.
How to do smooth scrolling in UIScrollView?
1:iPhone: Sending large data with Game Kit
- Create an outer UIScrollView and set its pagingEnabled = true. Add it to your main view and set its width and height to your main view's width and height..
- Create as many inner UIScrollViews as you want images. Set their width and height to your main view's width and height. Add them as subviews to your outer UIScrollView, each one next to the other, left to right..
- Set the content size of the outer UIScrollView to the total of the widths of all the inner UIScrollViews side by side (which is equal to [your main view's width]*[number of images])..
- Add your images' UIImageViews to the inner UIScrollViews, one UIImageView to each inner UIScrollView. Set each UIScrollView's content size to each UIImageView's size..
- Set min and max zoom scales for each inner UIScrollView and set each of the inner UIScrollView's delegate to your View Controller. In the delegate's viewForZoomingInScrollView, return the appropriate UIImageView for the UIScrollView this is passed. (To did this, just keep each of the UIImageViews in an NSArray and set the corresponding UIScrollView's tag property to the index of the appropriate UIImageView. You must then read the tag in the UIScrollView passed to viewForZoomingInScrollView and return the appropriate UIImageView from the NSArray)..
- A single UIScrollView and a single UIScrollViewDelegate
- Populate the UIScrollView with UIImageView children
- Listen for
- Do any math and figure out what page you are currently on
- Listen for
- Return a different view depending on the page index
- Listen for
scrollViewDidEndZooming:withView:atScale:and optionally did any anti-aliasing, etc based on the content
I did any playing around with the native Photos app, and I think I must say with confidence they are using a single UIScrollView. The giveaway is this: zoom in on an image, and pull to the left or right. You will see the next or previous photo. If you tug hard enough, it will even page to the next photo at 1.0f zoom. Flip back and the previously zoomed photo will be back to 1.0f zoom as well..This is wrong. I'm using nested scrollviews, and receive ting exactly the same effect. If you're using any memory management scheme (which I had to start using... my page number is fairly high ('bout 50 each in 2 scrollViews)), then you must use a mechanism similar to whatever you have triggering your page loads / unloads to trigger a zoom reset for the pages -1 and +1 from the current page.. I suspect this apple sets this off as soon as the previous pic has disappeared.. What I don't understand is how to achieve smooth scrolling between pages - there's always a very short hang at the moment of transition. Do not receive it. I've gotten pretty deep into fixing it - NSInvocationOperations were my first stop, then I made a reusable views queue for the page views (which retain their image views)... still this durned hang.. I only have one NSOperationQueue running, and I've tried fiddling with the max number of concurrent operations. My thought was this the main thread was receive ting clogged by competing Queues, or maybe even one queue endeavor to did to much... still, the hang.. I even tried creating super low-qual versions of my media, in case this was the problem. With each image weighing in at around 10k (these are jpegs, mind you)... you guessed it. The hang's still there.. I'm pretty enough resolved to did what I've done before and use TTPhotoViewController from Three20. I've spent any hours swimming through this code, and it's always a great education. At this point, though, I would really like to know where the heck this hang comes from, if only so I must spend my can't-sleep hours wondering around any thing less brain boiling..
- load current view scrollview and imageview .. and for the screen next to the current view , only imageview.
- remove all view when current page load to save memory , so good for many photo project .
- use tag to differentiate different scrollview .