One of the more impressive iOS app that I've come across is Jetsetter's due to its great design, incredible interface, and creative uses of animation. One of my favorite components of the app is the teaser photo interface they have for the hotels/venues. They provide a minimized photo slideshow, but if you want the full view you can click it and it expands to expose a larger version of the image. You can see a blurry video of this in action here.
I'm interested in recreating something similar. I'm well aware of the paged galleries like MHPagingScrollview (which is how the larger photo viewer functions), yet what I'm trying to figure out is the proper way to handle the transition. I've also seen libraries that handle the Ken Burns effect for images. However what is not clear is whether or not there are separate view controllers.
Is this a transition between two separate view controllers? Or would the minimized and maximized photo viewer be part of the same controller? How would you most efficiently replicate something similar? I've embedded a screen shot below to illustrate the before and after. The video linked above however most effectively illustrates this transition.
Mobile engineer from Jetsetter here. They are two separate controllers, but the transition animation occurs in the first. Here's the flow:
A user taps the smaller photo.
A transition view containing the full size image is placed directly on top of the smaller image.
The transition view animates to the bounds of the screen.
The photo viewer controller is presented as a modal without animation, completing the effect in one seamless animation.
The effect is reversed when the modal controller is dismissed.
The trick lies in your transition view. We created a UIView subclass (with clipsToBounds enabled) that contains an imageView. The bounds of the transition view expands to reveal the imageView, resulting in no distortion of the final image during the animation.
Related
I have a page view controller embedded inside a container view in order to swipe between images. But now I am trying to add a touch that will make the image go full screen "lightbox" with zoom available and also swipe through the images while in full screen mode.
I can get it to work, and messing around with auto layout seems to be much work consider I have a lot of other stuff in that VC.
So does anyone know a good image slider from github written in swift? - without the need of cocopods.
thanks!
It's easy enough to write one yourself. In full-screen mode, use another UIPageViewController, because it already has the swipe left & right support built in.
I use an UIPageViewController to pan between three views.
I want to blur the background of the third view when I pan from the second to the third view (and vice versa).
Therefore I have attached an additional UIPanGestureRecognizer to the second view.
This UIPanGestureRecognizer animates the alpha-property of an image view which contains a blurred representation of the background image from 0.0 to 1.0 as soon as the right border of the second view has passed the middle of the screen. An additional UIPanGestureRecognizer of the third view does the opposite when I pan from the third to the second view.
Unfortunately this behavior is static. The panning of the UIPageViewController is interactive.
When I want to pan from the second to the third view and the right border of the second view passes the middle of the screen, the burred image view gets visible while I'm panning. But while I'm panning I can change my mind and cancel the transition when I pan back to the original position. The blurred view stays visible although the second (and not the third) view is on screen.
Similar problems occur when I pan very fast a too short distance. The UIPageViewController will move to the third view but the blurred image view stays invisible.
Is there any way to synchronize the transition of the views with the visiblity/invisibility of the burred image view?
The UIPageViewController delegate protocol has two interesting methods:
pageViewController:willTransitionToViewControllers:
pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted:
Unfortunately both methods doesn't work for my purposes.
The UIViewControllerAnimatedTransitioning feature of the iOS 7 SDK also seems not to work with the UIPageViewController.
Has anyone an idea?
Sounds like iOS7 feature UIViewControllerInteractiveTransitioning (which also encompasses the associated non-interactive animated transitioning) is indeed what you need. You might consider replacing your UIPageViewController with some other mechanism that can make use of this approach, such as UINavigationController.
I am creating a grid of icons in Objective C / Xcode.
Is there anyway to re-create the iPad Home screen, the one filled with a grid of icons for each App you have on your iPad.
What I am most interested in is reproducing the effect on the icons when the device is rotated. On rotation, a new grid icons (which matches the new orientation) swings around to the right orientation, and the icons themselves transform (I'm guessing its an alpha fade from one icon to the other) into the new icon that would appear at that position.
Ive looked at this SO question, and also at this blog. But I am wondering if there is a class (hopefully one developed by Apple, but third party solutions will do) which recreates this effect?
If there isn't such a class, can anyone suggest to me how I would do the icon transformation effect whilst the screen is swinging around to the correct orientation?
iOS 6 offers a class called UICollectionView that handles the creation of these grids for you. The API is fairly similar to that of UITableView and allows you lots of control for customization.
Check out the UICollectionView class reference, as well as this introductory tutorial.
Here's my user's iPad requirement. Two users are sitting down at a table with an iPad between them. Each user needs the ability to "take control" of the app by doing a gesture to rotate the screen towards him. This would be equivalent to picking up the iPad and changing its rotation to face the user. A few questions about this:
1) Is there any default behavior within iOS to to be able to do this?
2) Do you know of any apps where this is done so I can see it in action?
3) Lastly, how do I go about enabling this functionality for my app? This functionality should be available for all UIViewControllers within my app.
I'm no expert on the topic, but here are my thoughts:
If you want to also have the app respond to device rotations, the proposal is a bit more complicated. However, if you want to eliminate physical device rotation reactions in favor of rotating the app yourself, there are only a few steps necessary:
Stop the views from auto-rotating. In iOS 6, this is as simple as implementing the shouldAutorotate: method and returning NO and the supportedInterfaceOrientations method to only return the one orientation you want to allow in the view controller at the root of your controller hierarchy. In iOS 5 and earlier, you want to implement the shouldAutorotateToInterfaceOrientation: to only return YES for one orientation in the view controller that is at the top of the view controller hierarchy.
Add code that reacts to the gesture you want to use to rotate the screen (maybe a gesture recognizer).
When the gesture is performed by the user, rotate whichever view is at the bottom of the view hierarchy in your app. Likely, you will rotate the view managed by the rootViewController. Remember that you will need to deal with the new size of this view, not just the orientation. To affect the rotation, I think the best route is to apply an affine transform to the view's layer. This is pretty helpful if you are not familiar with affine transforms.
I'm developing an iPad app for use in-house. It's basically a SplitView based app, with a list of items. The details view contains a navigation controller. When the user selects an item in the rootview, it displays the definition of that item in the details view.
I want them to be able to drill-down into a gallery of images for that item, and be presented with a UI similar to the iPad photos app. Basically thumbnails with the ability to view it at original size and then go back to the thumbnails.
I was looking at using the UIImagePickerController but it looks like you need to use that in a Popover control, is that the case? It also looks like you can also only use it with pictures stored in the photo area on the iPad.
The images I use are downloaded to the iPad at startup, if it makes the whole thing do-able, can I save them into the users photo's area? As an album for each item?
Failing all of that, is there a nice clean, simple solution that would meet my requirements? I've tried using the Three20 solution but couldn't get it to work with my SplitView. Can the OOTB UIImagePickerController do what I need?
Three20 right now is not iPad ready, for your requirement, you can fine-tune Three20 and use it to display the original size images, and then pop-back to view controller which shows the thumbnail images.
I suggest using Three20 in a modal view controller with a pagesheet or formsheet preeentation style.