skip to Main Content
Custom UICollectionViewCell Transition

Create Custom UICollectionviewCell transition

Post Series: Create an iOS app based on UICollectionView

Dribbble.com is full of great UI animations, since Apple introduced iOS 7 and its flat design style, every designer went crazy. Especially when they saw the Custom UIViewController transitions in iOS apps, and what can be achieved instead of a normal push, pop and modal transitions.

Me, personally, I love these custom transitions, might take some time to set it up, and adjust it to your or to your designers’ liking, but once you accomplished it, it looks way better then those default transitions.

Today: Custom UICollectionViewCell transition

Last week we did a tutorial on how to use a UICollectionView and display that 3 column grid layout that for example Instagram is using, check out the tutorial here and come back once you have the project ready.

FYI: In 2015, you really should know how UICollectionView is working.

So we will use that project to go on. Today I’m going to show you how to use that to get this nice animation that became default by now.

Let’s call the transition: ImageOpening Transition. (What an awesome name..)

How this custom transition works?

Basic scenario is: user sees a lot of custom cells, with images in them, tap on one of them, the image gets highlighted by fading out the rest of the UI, move the selected image to the final place in the detail view, and fade in the content. Pretty easy right?

I learnt this technique from Pete Callaway who is a software engineer at Apple, his tutorial on transitions made me understand how it really works. Check it here.

The best live example that I can give you is used in our StoreLocator iOS app template, at the News section of the app. When you open a News object (which contains an image, title and subtitle) it will open that image with a nice transition, see below:

Steps for making this work

Like before every project, I like to write down a plan how to make it happen (at this stage though, I usually have everything in my mind already, don’t need to write it down, but it’s a good practise), and go through that list one by one, to achieve the desired result.

In our example:

  • we want our users to be able to select a cell
  • get the image of the cell
  • move it to its final position in the detail view
  • finish transition

 

As you can see, the steps are quite clear but how the hell can we do this?

We have a series of tutorials based on this topic, to learn the basics, make sure to Check out these tutorials about custom UIViewController transitions.

Setup

First as usual, we need a Transitioning delegate object. This object tells our viewControllers what object is used to present and to dismiss the viewControllers.

Then we need an object (TransitionAnimator) that helps present our UIViewController (a.k.a the detail view) and another one that dismisses the presented view.

Managing presentation

In order to make the UICollectionViewCell transition work, we need to tell our base viewcontroller, that we are going to use a different transition delegate object.

Create a new class, make it a subclass of NSObject and name it: ImageOpeningTransitioningDelegate. 

Import UIKit framework (if you are using Objective-C), and implement the UIViewControllerTransitioningDelegate protocol.

 

Next we need to add those 2 methods that this protocol requires to add to our class.

One is longer than the other.. As you can see it requires an object, that conform to the UIViewControllerAnimatedTransitioning protocol. These objects will handle our presentation and dismissal.

Let’s create 2 new classes:

ImageOpeningPresenter and ImageOpeningDismisser. Than import those objects to our ImageOpeningTransitioningDelegate object’s .m file, and add them as the return values to our methods.

transitioning delegate missing protocol implementation Xcode

As you can see Xcode is crying, cause these objects doesn’t conform yet to the UIViewControllerAnimatedTransitioning protocol. Implement it.

Same goes for the other object. Now we just need to tell our viewController to use this transitioning delegate object, and we are all good to create the animation.

Connect it with your UIViewController

Let’s add it to our UIViewController.

(You always want to implement it to the viewcontroller, where you wish to start the presentation from.)

We need to import this object and add it as a property (make sure it is strong, otherwise we might get some issues), than initialise it when it is needed.

Then we need to assign it to our viewController we wish to present.

What we did here. We added a delegate method of the UICollectionView to get the event, when the user selects a cell, than perform an UIStoryboardSegue with the selected indexPath as the sender object, then get the information from that indexPath and assign our customTransitioningDelegate to the detail viewcontroller.

The Presentation Transition

Let’s add the presentation methods. Go to ImageOpeningPresenter.m and add the following methods:

These two methods will handle our animation. First tells our animator how long the animation should last, the second contains the actual presentation logic.

Let’s get to it.

Get the objects we need:

Then start the transition.

First step: Get the selected indexPath.

First, we need to find out which indexPath was selected. Since we know the sourceViewController and we know its class, we can just ask its collectionView’s selectedIndexPath property and get the cell with that indexPath, and once we  have the cell, we can get the image.

Now we have the image, we can make a snapshot of it, since we want to move it around on our screen.

Steps we did here:

  • get the correct frame of the selected cell.
  • create a wrapper UIView that will hold our UIImageView
  • align it properly so it is placed exactly over our selected cell
  • create an UIImageView that holds the selected image, and place it onto this wrapperView

Next we either need to blur the background to focus on the selected cell, or add a white background. We do the second way. For this we need to add a new UIView with a white background to the containerView, just below the wrapperView.

This is what we have so far, if we start the animation:

custom uicollectionviewcell transition progress

“Progress, I see progress everywhere”

Almost there, what’s left?

  • Grab the image we just added, and move it to the right place
  • animate the rest of the UI once the image is in place
  • animate the whole transition

 

Move the image to the right place

Next up, we need to move this imageView to the right place, otherwise, it would be just a weird transition.

In order to do that, we need to find the final frame of the UIImageView we want to display our image. In this example, we are using a full screen imageView in the detail viewcontroller, so we will use the full screen frame.

Get, the frame of the final UIImageView:

And animate the transition.

For animation, just assign the new frame to the selectedImageWrapperView’s frame in the animation block and finish the transition in the completion:

Your final animation should look like this:

UICollectionViewCell transition presentation animation

Awesome, we have the presentation method, but now if you tap on the close button, the app will crash cause we (or just me), forgot to add the animation methods to the ImageOpeningDismisser class…

Once we fix this issue the app will not crash anymore, but still won’t work as expected.

For dismissing our view, we would like to achieve the same transition. You tap on close, it should transition back to the selected UICollectionViewCell.

 

Dismissing the UICollectionViewCell transition

In order to dismiss, we need to figure out what we want and what we need for that.

“We want it to work.” (period)

Steps to do the transition:

  • get the selected cell (should be still selected)
  • create a snapshot of the imageView we presented
  • get the frame of the cell
  • shrink our snapshot imageView to the size of the cell
  • remove the snapshot

 

We start first with the basics, get the from and toViewControllers, the animation duration and the containerView:

Next, take a snapshot of our UIImageView:

And hide the source imageView.

Obviously we framed it correctly to our viewControllers.

Next, hide the selected cell’s imageView, by setting its alpha value to 0.0. Than we need to do a bit of a trick, otherwise our transition will look like crap.

Check what I mean:

custom uicollectionviewcell transition wrong dismissal

Present your iOS apps’ UI better with our iPhone 6 mockup bundle! Check it here.

Do you see that jump at the end?

That is because we use a snapshot view to move it around the screen, but then we show an UIImageView with the proper image inside it, using a different contentMode.

To avoid this effect, we need to do a bit of a workaround.

Idea

The idea is to make the selected cell’s imageView a bit bigger by using the transform and when we are close to finishing the animation, we just gonna set it back to 1.0, to its original frame with a short duration. This way, we can trick our mind a bit, since the whole animation is only 0.3 seconds long.

Next we do the same thing as we did in the presentation object. Create a wrapper UIView that holds the snapshot of our UIImageView and add a white background behind it.

Let’s animate it

This time we will use keyframe animations, cause we want to divide our animation into two parts: 1st will animate the imageWrapperView into place and set the selectedCell’s imageView’s alpha value to 1.0, to make it visible. 2nd we will have a 0.05 second long animation which will transform the selectedCell’s imageView and hide the snapshot. With this we can achieve this nice transition from our UICollectionViewCell.

The steps of animation:

  • animate the imageWrapperView into place and set the selectedCell’s imageView’s alpha value to 1.0
  • transform the selectedCell’s imageView and hide the snapshot

Code:

That’s it…. Was long.

 

Check out the final UICollectionViewCell transitions:

I hope you enjoyed this tutorial, as usual, feel free to comment or share, like it. If you found a mistake, or a better way to do it, absolutely suggest your idea. We always welcome new, different ideas.

P.S.: make sure to check out this site as well, I like their tutorial about transitions.

You can also use UIPresentationControllers to create custom overlay views with UIViewControllers inside them, check out our tutorial here.

What’s next

In the next tutorial I’m going to show you how to make this animation interactive. Like the usual swipe to go back navigation.