UIViewController Transition Animations

In this lesson, I'll first go over a very simple technique that allows us to animate the tab bar in and out of view using a CGAffineTransform object. Nothing too bad and I find transformations are super useful, so make sure to take advantage of them. Next, we'll create our UITableViewController that contains the details of our App Details in full screen. Enjoy.

iOS 13 Updates

For iOS 13, behavior for the UITabBar has changed for animations. You can no longer use CGAffineTransform and instead you should animate its frame position instead. Make the following changes in the two functions below:

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {     UIView.animate(withDuration: 0.7, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.7, options: .curveEaseOut, animations: {    // ...     // self.tabBarController?.tabBar.transform = CGAffineTransform(translationX: 0, y: 100)     self.tabBarController?.tabBar.frame.origin.y = self.view.frame.size.height   }     }

@objc func handleRemoveRedView() {   // ...     //self.tabBarController?.tabBar.transform = .identity   if let tabBarFrame = self.tabBarController?.tabBar.frame {     self.tabBarController?.tabBar.frame.origin.y = self.view.frame.size.height - tabBarFrame.height   } }

Comments (13)

TWei

4 years ago

Hi Brian, thanks for your effort on this great course. Learned a lot. I have a question about child controller. What's the advantage of using child view controller comparing with adding view of a Controller into parent controller directly like what we did in AppsController for the horizontal scroll cell? Looks like the result is pretty much the same? Thanks

Brian Voong

4 years ago

TWei

4 years ago

Thanks! That's a really fast reply btw : )

Brian Voong

4 years ago

TWei

4 years ago

10:56 a.m. 刚醒？？？

Brian Voong

4 years ago

TWei

4 years ago

hahahaha

Ka-wing Li

4 years ago

想問你怎麼從中國去美國工作的？我是香港的

Brian Voong

4 years ago

ncytimothy

4 years ago

Hello Ka-wing Li! 見到你係香港人，你可以過嚟我哋個Meetup啊！https://www.meetup.com/Learn-Swift-HK/

Brian Voong

4 years ago

ncytimothy

4 years ago

The Swift is smaller compared to Tokyo and Singapore. I was just at try! Swift Tokyo 2 weeks ago and the community was large! We are (I am, to be honest) trying to grow the community in Hong Kong and we meet every weekend to talk all things Swift!

ncytimothy

4 years ago

*The Swift Community

tsangaris

4 years ago

Hi Brian, Any reason why not using a UICollectionView instead?

Jorge Casariego

4 years ago

I also had the same question

tsangaris

4 years ago

Brian, You should add an "Edit" button on the comments! :) Anyhow, do we really have to remove the child VC? From Apple docs it says: "If the new child view controller is already the child of a container view controller, it is removed from that container before being added." Thanks!

ncytimothy

4 years ago

Hi Brian, I have a question. We are trying to remove the child VC from the parent but we are actually removing the out function scope appFullscreenController. Am I correct to say that since the appFullscreenController is being passed as a value type, that is why remove the out function scope appFullscreenController is sufficient to prevent exact child VCs being adding to the stack?

ncytimothy

4 years ago

What I meant is why would we not use addChild(self.appFullscreenController) instead?

Maciek Górecki

4 years ago

classes are passed by reference

ncytimothy

4 years ago

Ah how silly of me! Since the class pass reference, then of course removing the child will remove the exact reference

adam_rich

4 years ago

Hey Brian, I noticed that if I use an image that does not have a white background the corner radius still appears when the image description comes up fullscreen, how do I get rid of the corner radius when it is in the fullscreen state?

Brian Voong

4 years ago

adam_rich

4 years ago

if I do that then the corners will not be rounded at all I was hoping you could help find a way to get rid of the rounded corners as part of the animation.

Brian Voong

4 years ago

waynezong

4 years ago

Hey guys! Instead of setting up the first row as the container of the view of TodayCell and omit the header, you can simply change the table view's style to .grouped in the initializer and the header will be scrolled up along with cells below. Hope it'll help! :)

李承諴

3 years ago

what a nice way to reduce the code

jdhindsa

4 years ago

Hi Brian, could you also use a regular UIViewController instead of a UITableViewController for the app fullscreen view? Wouldn't it be easier to use that to lay out the UI elements on the screen?

stonypig1

4 years ago

hello mr.brian, I try to apply your method in my app, click a cell then transit to a viewcontroller also some data(object) will be passed alone, the first time cell click the transition is fine , data passed perfectly passed to the new view controllerand, then second time I click the old cell , first time clicked cell data stayed there, and not able to change. any idea where I did wrong? thanks

Brian Voong

4 years ago

stonypig1

4 years ago

after hours, I have found the way to pass the data to fullscreen controller, I have to put and declare let appfullscreencontroller = Appfullscreencontroller() inside the didSelectItemAt function, if I put it outside at the global scope (like you did), data will not be passed. very strange, only difference from my app is my full screen controller just a view controller not a tableview controller. very strange. any idea why?

Chad-michael Muirhead

4 years ago

how are u setting a collectionviewcell as the header for a tableviewcell, everytime i try my header is blank and i did the addchild too

MaxApp

4 years ago

Hey Brian, A quick question, if I was using a collection view do I have to use the addChild() function to render it out. Also, If I was using a collection view, do I have to remove it from the parent or no?

Brian Voong

4 years ago

MaxApp

4 years ago

and if I was using I collection view do I have to remove it from the parent? Why are you the table view from the parent?

Brian Voong

4 years ago

hyun kim

3 years ago

Hi.. I just use IOS13.. but it is not work correctly about hiding and show tabbar animation. how can I fix it with IOS 13?

Brian Voong

3 years ago

Eduard Hilgenberg

3 years ago

Could you solve this problem? I'm experiencing the same issue.

chao700716

3 years ago

I also see the issue of hiding the UITabBar. I did a simple fix by replacing "self.tabBarController?.tabBar.transform = CGAffineTransform(translationX: 0, y: 100)" with "self.tabBarController?.tabBar.isHidden = true", and then just changed "self.tabBarController?.tabBar.transform = .identity" to "self.tabBarController?.tabBar.isHidden = false". These changes look working on my side, but I'm not 100% sure my changes are the good solutions to this issue though.

Ra-Fa-L

3 years ago

Instead of using CGAffineTransform try animating frame.oringin.y. In viewDidLoad I assign tabbar.frame to a variable and then calculate tabBar's new origin.y position based on this variable: if let frame = self.startingTabbarFrame { self.tabBarController?.tabBar.frame.origin.y = frame.origin.y + frame.size.height } When hiding assign only startingTabbarFrame.origin.y.

Brian Voong

3 years ago

Brian Voong

3 years ago

Brian Voong

3 years ago

Brian Voong

3 years ago

chao700716

3 years ago

Thanks, Brian. I will try your solution later.

Malikov_Vladimir

3 years ago

it works!) Thank you dude)

Eugene

3 years ago

hey chao700716, using the tabBar.isHidden property, you will not get the animated effect for tab bar appearance

SLEsserman

3 years ago

This does not work, please attach screenshot of the amendment

SLEsserman

3 years ago

These funcs are not spoken about in lesson 30...? are we suppose to guess where?

Brian Voong

3 years ago

matlyles

3 years ago

You can get the same result like this: to hide animate: self.tabBarController?.tabBar.frame..origin.y = self.view.framw.height+100 To bring it back self.tabBarController?.tabBar.frame..origin.y = self.view.framw.height-80 It’s 80 because 80 is the exact height of the tabBar and needs to be fixed to the bottom

matlyles

3 years ago

Obviously I meant frame * whoops

Kritbovorn Taweeyossak

3 years ago

we don't use self.tabBarController?.tabBar.transform = CGAffineTransform(translationX: 0, y: 100)

matlyles

3 years ago

Use whatever works for you. I believe some people who are using latest Xcode 11 and ios13 we’re having a problem with that. So all I know is I got the same result with my listed code

Brian Voong

3 years ago

alireza76

3 years ago

thanks for your answer brian but there is a bug with this answer . hide tabbar -> lock the screen -> unlock again . you see the tabbar . it's like system again layouts it .

Introduction: Setting Up UI

JSON Integration iTunes Search API

Apps

Fetching Data

Snapping Behavior and Header

App Details Page

Today Feed

28.

Today Controller Cells

14:06

29.

Cell Abs Coordinates and Fullscreen Animation