Facebook-style image enlargement from UITableView / Feed

Question

In the Facebook application, when you are in the feed and you click on a photo to view it, several things happen:

• The image animates / moves to the center of the screen, regardless of where its current position is in the table view (middle, partially from the screen to the bottom, top, regardless)

• When the image moves to the center of the screen, the rest of the table view disappears (alpha = 0)

• When you drag the image up or down, the alpha of the table view is restored proportionally (I think) to the image offset from the center of the screen.

• At this point you will notice that in the feed where the image used to be, it is now empty (it seems that you “brought” this image in front). You see this by dragging the image up / down, and you can see the Feed / table view behind the image.

• After # 2, if the image is already proportional (ie, the preview image in the "Feed / table" view was proportionally scaled without cropping), it simply moves to the center. If the image was cropped at all (because it was too tall, etc., to fit correctly in the Feed), then the rest of the image is displayed at the same time as moving to the center of the screen.

• As soon as the image moves to the center of the screen, the elements of the gallery controller will appear (the "Finish" button, the "Image / Comment" buttons, etc.)

• After # 4, if you swipe across another image (swipe left / right in full-screen view to another image in the same album), and then try to drag up / down to # 3, you will see that the first image returns to where it was in Feed.

• Finally, if you drag the image up / down beyond a certain threshold, it will be rejected and the channel will be shown again.

This is what I think is happening conceptually, and I would like some confirmation if this is the right approach (these cartridges below do not apply to the above brands):

• When the user clicks on an image, add this image as a sub-view in the container view of the table view, but add it to the same position so that the image is not moving from the cell to the main view.

• Then animate the movement of this image to the center of the screen. At the same time, reduce the alpha of the table view so that it reaches 0 while the View image reaches the center of the screen.

• Once the image reaches the center of the screen, click on the modal view controller without animating it and add imageView as a subview of the view of the modal view (effect # 6 above)

• Any drag and drop of the image reduces the alpha of the modal view controller and increases the alpha of the feed table (effect # 3 above) and dragging above a certain threshold causes an animation to hide the gallery and shows Retry (effect # 8 above)

Questions:

• Am I on the right track? If so, how can I bring the View image from the cell to the front view and keep it in the same position?

• When scrolling to another image, the original image is "restored" to its original location in the table cell. Is it just moving one image from one look to another? How do you go back to the original cell - hold the pointer to that cell when the user clicks on the image and then does something like customCell.imageViewContainerView addSubview:originalImageView ? Is it necessary to change if the user returns to the original image?

This whole thing seems to me a non-trivial implementation, but I think the effect is amazing, and I'm also curious how to do it. Am I overdoing it, and is there really a simple way to do this, or am I right to give the details to the person who wrote the FB application?

Answer 1

Am I on the right track? If so, how can I bring the View image from the cell to the front view and keep it in the same position?

I think you are right on the conceptual steps. It's not difficult to get a View image from a cell and add it to the controller view. You can use methods like

 - (CGRect)convertRect:(CGRect)rect toView:(UIView *)view 

to get the correct position for the image.

When scrolling to another image, the original image is “restored” to its original location in the table cell. Is it just moving one image from one look to another? How the hell are you sending it back to the original cell - keep the pointer to that cell when the user clicks on the image, and then do something like customCell.imageViewContainerView addSubview: originalImageView? Is it necessary to change if the user returns to the original image?

I think this is done using some kind of protocol between the gallery and the table view controllers. Perhaps it is just to hide / show the image, and the images in the gallery are actually another object. In any case, if you want to use the same image, you can send an object with a protocol between two controllers.

Hope this helps a bit;) I think the key is in the convertRect methods.