CODEWITHSUNDEEP
iosfacebookuiviewcontrollercore-animation
CCSab
CCSab

Reputation: 1475

Implementing the iOS Facebook App photo viewer

In the iOS Facebook app, when you tap on a photo, the photo takes up the entire screen and you can then pull up or down on the photo to dismiss the view. Pulling on the photo allows you to see the screen underneath.

I'm curious as to the best way to implement this, since I'm not entirely sure if this is an actual transition between view controllers, or just some fancy animations with presenting a subview in the current view controller.

The former would be interesting, in order to maintain the view controller paradigm and keep everything compartmentalized. If the latter, what would be the best approach to encapsulation?

Upvotes: 4

Views: 5045

Answers (3)

zquintana
zquintana

Reputation: 363

I needed something similar, additionally I wanted something to work with CocoaPods. I eventually found UIPhotoGallery (https://github.com/ethan605/UIPhotoGallery). It's in the CocoaPods repo, it has multiple implementation types, and, best of all, the documentation is understandable. Only thing you may need to add is the down swipe gesture to dismiss, but that shouldn't be too hard to add with this library.

As a side note I tried the ios-KRImageViewer, but dismissed it because I found it to be buggy and it wasn't in the Pods repo.

Upvotes: 0

JoeyJAL
JoeyJAL

Reputation: 194

I've found some familiar, you can learn how to implement from here

https://github.com/Kalvar/ios-KRImageViewer

Upvotes: 1

Matt Long
Matt Long

Reputation: 24476

It looks to me like you could really do it either way, but I think you should probably pursue doing it as a custom modal transition. While tapping the image causes it to transition to the image view (which I presume to be a modal view controller), it appears to me that when you are viewing the image, a swipe up or down within a certain threshold on the y axis the image just moves, but once you've crossed a certain point above or below center it has told the view controller to dismiss once the user releases from dragging assuming the drag has finished above or below that threshold from center. The dragging gesture is also causing the opacity of the modal view controller itself to fade depending on the distance of the drag from center. When the user does release the drag outside the threshold, the custom transition resizes the image and animates it back to the position it came from in the main view controller. I think this can also be done within a custom transition, however, I haven't personally tried it.

Upvotes: 4

Related Questions