Using Hero Transition Library with Xcode 9.4 and Swift 4.1

You can read this story from my website:

https://devgenes.com/posts/hero-transitions-with-xcode-10-swift-4-2/

“Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit’s cumbersome transition APIs — making custom transitions an easy task for developers.” says Hero’s GitHub library.

I’ve tried searching on Google so many times but couldn’t find any up to date tutorial. I’ve decided to make my own tutorial. So, here we go.

Photo by Radovan on Unsplash

Let’s Start

I am passing the installation stuff because it’s really well explained on the Hero’s documentation pages. Insted we will start with code. I am saying code because I am not using Storyboards for almost a year. (Thanks to @buildthatapp)

Creating Simple UI (Without Storyboard)

After the “pod install” and “open myapp.xcworkspace” first thing we will do is deleting “Main.storyboard” from Targets -> General -> Deployment Info -> Main Interface.

Deleted Main Interface field.

If we run the app, it will show black screen. Because we don’t have UIWindow yet. (Actually it is ‘nil’ now.)

So let’s figure that out.

1. Simply, we created UIWindow and made it main screen.
2. Created viewController’s instance.
3. Created a navigationController because we will need that later.
4. navigationController’s hero is enabled. (I will explain that later.)
5. Last but not least, from now on, our rootViewController is navigationController

Creating First ViewController

We will create a UIView with UIColor.green backgroundColor.

We will enable hero on ViewController():

self.hero.isEnabled = true

Next, give our greenView, hero.id:

greenView.hero.id = "greenView"

Let’s say we want to use UINavigationController. We need to enable hero on navigationController too (did you remember the AppDelegate.swift?):

// AppDelegate.swift
navigationController.hero.isEnabled = true

And lastly, added UITapGestureRecognizer for push’ing UIViewController to UINavigationController.

Currently I am using “SteviaLayout” for AutoLayout. It’s worth checking out.

Our ViewController class looking like this:

Next, we will create SecondViewController very similarly;

1. Create a new greenView
2. Give a hero.id
3. We will enable hero with self.hero.isEnabled = true
4. Add UITapGestureRecognizer for pop’ing UIViewController from UINavigationController

And we’re done.

Let’s Run, Finally

Let’s run the app and see our final result:

Final Result

And we are done.

Please le tme know what you think.

If you want to get in touch, maybe just for saying “Hi”, you can use the links below.

Thanks.

Twitter — Mail