Hello x Cool Swift 3 Transition Framework
Hello World…
Today marks the first post from our new Medium publication The Code Community. I want to keep articles simple and intuitive…So let’s get into a little intro of the publication!
Brief:
We are a South African based (Cape Town) software development and technology based publication. Our plan is simple, provide regular articles containing:
- Tips&Tricks
- Tutorials
- Reviews
- Anything else our readers can suggest?
So that Framework:
Oh yes, let’s jump straight into it…
I don’t know if many of you are aware, but there is this really cool and reasonably documented transition “library” or framework called Hero founded by Luke Zhao. It supports both iOS and tvOS and has the following capabilities:
I used it for my app called Number Format Translator and I thought, hmmm why not share what I learnt with others…Nothing fancy but still cool?
Here are some gifs to show what Hero can do:
Let’s code…
Wait, I lied…Sorry…We need to do the good old environment setup and since this is our first post, I’d like to make it somewhat detailed so that we all learn something along the way. So first, start a new Xcode project:
Second, let’s install the framework to use inside our Xcode project. To do this, Hero uses Carthage and CocoaPods. I prefer CocoaPods…
I will do a quick step by step for CocoaPods then ;)
Let’s start by opening up your terminal and navigating it to the project folder like such:
Next you type the pod init command which should create a file called Podfile which is the bare template of what a Podfile should contain:
Next you can just open the Podfile using whatever Text Editor you prefer. I use Atom. The Podfile should look like this inside:
Now we had the pod to the file by inserting pod ‘Hero’ right underneath use_frameworks! like so:
This is where the magic happens. I suggest closing your Xcode project first, because after installing your initial pods, a .xcworkspace package is created. This package contains the frameworks you asked your Podfile to install ;)
So let’s install the pods by running the command pod install in your terminal and the output should look like so:
Now we can go ahead and open the .xcworkspace package instead of the .xcodeproj package originally created by Xcode. You will see the workspace now contains two “projects”. The one is your actual app project and the other is the project that contains the framework files etc. If you have something similar to this, you are on the right track:
Now I need you to navigate to Main.storyboard and let’s add a new View Controller because today we are going to show how Hero is used when transitioning between View Controllers. Go ahead and also give each View Controller a unique Storyboard ID (VC1 & VC2 accordingly) in the Identity inspector:
To distinguish between the two visually, let’s go ahead and change their background colours to say red and green (But this is totally up to you). To do this, select the View Controller and choose the Attributes inspector and then change the background colour:
Now we can go ahead and add a button to each View Controller to transition us between the two View Controllers:
Interface Builder Constraints…Don’t be scared, they are actually pretty simple. Especially for what we need them for. Let’s go ahead and implement some simple constraints to ensure that the buttons’ edges are say 20 points from either side of the View Controller and that the button is always centred in the View Controller too.
To achieve this, we will use the Alignment Constraints and the Spacing Constraints like so:
Just do the same for the Green View Controller.
Before we start coding though. We need to make sure that both View Controllers make use of the “Custom Class” called ViewController which is found in the ViewController.swift file. We can do that like this:
OK, Now let’s really code…
Ok now we get to the coding part. First thing is first. We have to link the code to the interface builder for the each button. To do that, we are going to create IBActions for each button by means of the Assistant Editor. So let’s go ahead and do that right now. If you managed to load the Custom Classes for each View Controller correctly, then the Assistant Editor should load the correct .swift file containing the class automatically…Cool hey?
Let’s see how that looks with this other cool little gif I created ;)
P.S. Hold down the ctrl button while you click the button and drag over to inside the ViewController class to tell Interface Builder to create a IBAction function.
Make sure you do this for both buttons, we will just put both IBAction functions inside the same ViewController class for this application. Once you have done both, your ViewController.swift should contain the following:
Inside the goGreenPressed and goRedPressed IBAction functions is where we will implement in code (Without segues) the changing between our two View Controllers using the Hero Framework.
To use the Hero Framework, we must first tell this swift file that it exists. To do this, simply put import Hero right underneath the import UIKit line of code.
Inside each of the IBAction functions, we can code so that they look like this:
@IBAction func goGreenPressed(_ sender: UIButton) {let greenVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "VC2") as! ViewControllergreenVC.isHeroEnabled = truegreenVC.heroModalAnimationType = .zoomSlide(direction: HeroDefaultAnimationType.Direction.left)self.hero_replaceViewController(with: greenVC)}@IBAction func goRedPressed(_ sender: UIButton) {let redVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "VC1") as! ViewControllerredVC.isHeroEnabled = trueredVC.heroModalAnimationType = .zoomSlide(direction: HeroDefaultAnimationType.Direction.right)self.hero_replaceViewController(with: redVC)}
Let’s take a look at what each line does:
The first line “fetches” the ViewController that we want to go to. We do this by first choosing our UIStoryBoard (In this can Main.storyboard) and then we instantiate the right View Controller inside that storyboard and downcast it to type ViewController.
isHeroEnabled is a property given by the Hero Framework of this View Controller that tells the system that this View Controller has the Hero Framework enabled.
heroModalAnimationType defines the animation type that we want to use. I chose .zoomSlide animation with a direction that I specified using the HeroDefaultAnimationType.Direction. See the Hero Documentation for what other animation types you have access to:
self.hero_replaceViewController(with: UIViewController) uses Hero’s own implementation of a method to present or show the new ViewController using the defined transition animation :)
Note: You may find that in a iPhone 7 Plus Simulator, the animation causes a “white flashing”. Don’t worry, this is due to a bug on Apple’s side. Just run it on another device variant or run it on a physical device and it will work. I used iPhone 5 variant and this is how it came out:
Very Cool Hey?
Final Remarks
This is my first Medium post. If there is anything about it you don’t like or any tips you have for me, please feel free to leave some comments. I am up to adaption and change, especially learning :)
If you like what you read, please heart the article, share and/or follow the publication. Also, if you have any suggestions on what you would like to see next, please let us know in the comments below.
The Hero Framework is very powerful. We only touched the surface here. But as you saw in the beginning of this article, it can be used to create really cool animations for your views that you place inside your View Controller too. This gives your app a “fun” and “modern” feel while still maintaining a good user flow.
Checkout my latest update to my app for engineers here:
