UIScrollView image / photo viewer with enabled and scalable paging

Question

Well, I think it's time to make an official place on the Internet for this problem: How to make UIScrollView photo viewer with paging and scaling. Welcome my colleagues UIScrollView hackers.

I have swap enabled UIScrollView and I display UIImageViews as a built-in photo app. (Does this sound familiar?)

On github, I found the following project:

https://github.com/andreyvit/ScrollingMadness/wiki

Which shows how to implement scaling in scroll mode when swap is enabled. If someone else tries this, I actually had to remove the UIScrollView subclass and use my own class, otherwise it doesn't work. I think this is due to changes in the 3.0 SDK related to the way the scroll view captures touch events.

So the idea is to remove all other views when you start scaling, and move the current view to (0, 0) in scrollview by updating contentsize , etc. Then, when you get back to 1.0f, other views will be added and come back in order.

In any case, this project works fine in the simulator, but there are some unpleasant movements on the device of the kind whose size you are resizing, and it seems that this is due to the fact that we are changing contentsize / offset , etc. For a view. to be resized You must make this view moving, otherwise you can move left through the space left by other views.

I found one interesting note in the Known Issues section of the 3.0 SDK Release Notes:

UIScrollView: after scaling, the content insertion is ignored, and the content remains in the wrong position.

This view sounds like what's happening here. After zooming in, the image will move off the screen because you changed the offset, etc.

I’ve been doing this for hours, and I slowly come to the sad realization that it just won’t work.

Three20 photo viewer excluded: too much weight, too much unnecessary interface and other behavior.

The built-in Photo app seems to be doing something magical. If you enlarge the image and move to the far edges, the current photo moves regardless of the photo next to it, and this is not what you get when you try to do this with the standard UIScrollView .

I saw a discussion about embedding UIScrollView , but I really don't want to go there.

Has anyone dealt with this with the UIScrollView standard (and works in 2.2 and 3.0 SDKs)? I don’t like it when I use my own zoom + bounce + pan + pager code.

Answer 1

UPDATE

I deleted my previous answer due to the news below ...

Great news for those who have not heard. Apple has released videos of the 2010 WWDC session to all iphone development program participants. One of the topics discussed is how they created the photo app !!! They create a very similar application step by step and make all the code available for free.

It also does not use private api. Here is a link to download the sample code. You will probably need to be logged in to access.

Mark it

And here is the link to the iTunes WWDC page:

Check it out

Answer 2

I wrote a simple and easy-to-use MWPhotoBrowser photo browser . I decided to create it, as Three20 was too heavy / bloated, since all I needed was viewing photos.

MWPhotoBrowser can display one or more images by providing UIImage objects or URLs for files, web images, or library resources. The photoserver handles downloading and caching photos from the Internet. Photos can be scaled and panned, and optional (customizable) captions can also be displayed. The browser can also be used to allow the user to select one or more photographs using either the grid or the main view of the image.

Answer 3

You say you saw discussions about nesting UIScrollViews, but don't want to go there - but that's the way to go! It works easily and well.

This, in essence, is what Apple does in its PhotScroller example (and in the 2010 WWDC conversation related to John's answer). Only in these examples did they add a whole bunch of complex shingles and other memory management. If you don’t need tiles, etc., and if you don’t want to wade through these examples and try to remove bits associated with it, the basic principle of nesting of UIScrollViews is actually quite simple:

• Create an external UIScrollView and set it pagingEnabled = true. Add it to your main view and set its width and height to match the width and height of your main view.

• Create as many internal UIScrollView as you want. Set the width and height of their width and height. Add them as subviews to your external UIScrollView, each one next to the other, from left to right.

• Set the content size of the external UIScrollView to the total width of all internal UIScrollViews nearby (which is [your main width] * [number of images]).

• Add UIImageView images to internal UIScrollViews, one UIImageView for each internal UIScrollView. Set each size of UIScrollView content for each size of UIImageView.

• Set the minimum and maximum scale scales for each internal UIScrollView and set each of the internal UIScrollView delegates to your view controller. In the forZoomingInScrollView delegate view, return the corresponding UIImageView for the passed UIScrollView. (To do this, simply save each of the UIImageViews in an NSArray and set the corresponding UIScrollView tag property to the index of the corresponding UIImageView. Then you can read the tag in the UIScrollView passed to viewForZoomingInScrollView and return the corresponding UIImageView from the NSArray).

What is it. It works the same as the photo app.

If you have many photos to save memory, you can only have two internal UIScrollViews and two UIImagesViews. Then you dynamically switch between them, moving them around the external UIScrollView and changing their images when the user scrolls the external UIScrollView. This is a little more complicated, but the same principle.

Answer 4

I played a little with the application for native photos, and I think I can say with confidence that they use one UIScrollView. The sacrifice is as follows: zoom in and drag left or right. You will see the next or previous photo. If you tow strong enough, it will even show the next photo when scaling 1.0f. Lean back and the previously enlarged image will return to 1.0f scaling.

It's a shame I did not write Photos.app, but I will study how they did it:

• One UIScrollView and one UIScrollViewDelegate
• Populating a UIScrollView with UIImageView Child Elements
• Listen to scrollViewDidScroll:
• Do some math and find out which page you are currently on.
• Listen to viewForZoomingInScrollView:
• Returns a different view depending on the page index
• Listen to scrollViewDidEndZooming:withView:atScale: and randomly perform anti-aliasing, etc. based on content

If you decide to give it a try, let me know how it works for you. I would be interested to know how you finally end up making it work. Better yet, post it to github.

Answer 5

I played a little with the application for native photos, and I think I can confidently say that they use the only UIScrollView. Giveaway is: Zoom in and drag left or right. You will see the next or previous photo. If you are towing hard enough, he even has the next photo when scaling 1.0f. Lean back and the previously enlarged image will be back to zoom 1.0f.

It is not right. I use nested scrollviews and get exactly the same effect. If you use a memory management scheme (which I had to start using ... my page number is quite high ("bit 50 each in 2 scrollViews)), then you can use a mechanism similar to what you run on your page loads / unloads, to trigger a reset reset for pages -1 and +1 on the current page.

I suspect that the apple cancels this as soon as the previous shot disappeared.

I don’t understand how to achieve smooth scrolling between pages - at the moment of transition there is always a very short hang. I do not understand. I got a pretty deep commit - NSInvocationOperations was my first stop, and then I made a repeatedly scanned queue for pageviews (which save their images) ... yet this durned hangs.

I have only one NSOperationQueue, and I tried to use the maximum number of simultaneous operations. I thought that the main thread is clogged with competing queues, or maybe even one queue is trying to do a lot ... still, hang.

I even tried to create super low-quality versions of my media, in case it was a problem. With each image weighing about 10 thousand (these are jpegs, mind you) ... you guessed it. There are still there.

I pretty much decided to do what I did before and use the TTPhotoViewController from Three20. I spent several hours swimming through this code, and this is always a great education. At the moment, however, I would really like to know where this hanger came from, if only because I can spend my hours without sleep thinking of something less than boiling the brain.

Answer 6

Of course, it would be nice if the apple built an image viewer, such as a photo application, in the SDK for us. I am currently using three20 and it works great. But there are many extra things that you need to wear when all you really need is a photo viewer.

Answer 7

I am writing code for this and can be a link

• Download the current scroll and image view. and for the screen next to the current view, only the image is displayed

• delete all views at the current page load to save memory, which is good for many photo projects

• use tag to distinguish between different scrolls

_xxxx xxx

download link click here

Answer 8

Take a look at https://github.com/facebook/three20/blob/master/src/Three20UI/Headers/TTPhotoViewController.h Not sure what you are looking for