1

00:00:08,100 --> 00:00:13,460

Hey everybody welcome to the last video in the firebase section.



2

00:00:13,470 --> 00:00:17,480

Amazing work so far building this app we just have one last video to go.



3

00:00:17,580 --> 00:00:23,760

And in this one we're basically just going to do a quick view controller extension that's going to change



4

00:00:23,760 --> 00:00:26,250

the way that view controllers present.



5

00:00:26,310 --> 00:00:31,740

If you choose to use this function from the extension and it's going to simulate the same kind of transition



6

00:00:32,520 --> 00:00:38,460

as a navigation controller where it will animate from left to right and right to left instead of popping



7

00:00:38,460 --> 00:00:40,370

up straight over the front that's pretty cool.



8

00:00:40,410 --> 00:00:42,950

Very efficient and we're going to go ahead and build it now.



9

00:00:42,960 --> 00:00:51,170

So open up your X code project right click on extensions and click new file swift file is fine and we're



10

00:00:51,170 --> 00:00:59,160

going to call this UI View Controller XTi for extension click Create and we're going to go ahead and



11

00:00:59,220 --> 00:01:03,940

we need to import you kit because this actually has to do with you Ibut controller which is part if



12

00:01:03,940 --> 00:01:04,840

you like it.



13

00:01:05,190 --> 00:01:08,970

Next go ahead and type extension you view controller.



14

00:01:09,570 --> 00:01:12,430

And we're going to write two functions.



15

00:01:12,630 --> 00:01:19,440

Function one is going to be called phunk present detail meaning like present a detailed controller and



16

00:01:19,440 --> 00:01:26,850

we're going to basically pass in a view controller to present of Type II controller.



17

00:01:26,850 --> 00:01:32,670

Now if this looks familiar to you that's because this comes from Normally in you view controller you



18

00:01:32,670 --> 00:01:37,280

can call present and you can present another view controller on top of it.



19

00:01:37,320 --> 00:01:44,040

We're going to use the same parameter as present does but this is this is going to be for present detail.



20

00:01:44,040 --> 00:01:51,180

Now we need to make a custom transition of type C-A transition and C.A. comes from Core Animation.



21

00:01:51,210 --> 00:01:55,210

So let's go ahead and let's create a constant that's going to hold this animation.



22

00:01:56,310 --> 00:01:57,260

Go ahead and type let.



23

00:01:57,270 --> 00:01:58,610

Transition.



24

00:01:59,060 --> 00:02:01,080

Equal equals.



25

00:02:01,110 --> 00:02:03,130

See a transition.



26

00:02:03,210 --> 00:02:04,290

Go ahead and instantiate it.



27

00:02:04,290 --> 00:02:08,990

And now we need to set up the settings we want this transition to take 0.3 seconds.



28

00:02:09,000 --> 00:02:11,340

Just like a UI navigation controller.



29

00:02:11,370 --> 00:02:14,160

So go ahead and type transition.



30

00:02:14,160 --> 00:02:17,920

Duration equals zero point three.



31

00:02:17,940 --> 00:02:21,180

Next we're going to ask it to set its type.



32

00:02:21,180 --> 00:02:28,830

So we're going to type transition type and it's going to be equal to KCA K meaning it's coming from



33

00:02:29,700 --> 00:02:34,500

Core Animation transition and you can see there's a ton of different ones you can do a lot of really



34

00:02:34,500 --> 00:02:38,250

cool transitions with this and you can play around with it if you want but I'm just going to go with



35

00:02:38,250 --> 00:02:43,050

push because that's going to push the controller from a certain direction.



36

00:02:43,050 --> 00:02:44,420

Now we need to tell it what direction.



37

00:02:44,430 --> 00:02:52,650

So we're going to call it transition subtype and the subtype is KCA transition from a right OK because



38

00:02:52,650 --> 00:02:57,420

when we present it we wanted it to present from the right side and slide over to the left side.



39

00:02:57,570 --> 00:02:58,160

OK.



40

00:02:58,380 --> 00:02:59,790

Very cool.



41

00:02:59,790 --> 00:03:05,400

And then we're going to go ahead and add this transition to the layer of The View Controller window.



42

00:03:05,400 --> 00:03:07,880

So go ahead and call self view.



43

00:03:07,910 --> 00:03:17,010

Meaning the view of The View Controller window to the UI window layer add and you'll see there you can



44

00:03:17,040 --> 00:03:21,430

add an animation that animation is transition.



45

00:03:21,520 --> 00:03:24,950

It's a type of C-A animation if you look closely.



46

00:03:25,020 --> 00:03:28,920

So the key this is just from deep within Iowa.



47

00:03:28,950 --> 00:03:36,960

We can call k see a transition and that tells it that this is a transition of type C.A. transition.



48

00:03:36,990 --> 00:03:40,070

So now we have successfully added the transition.



49

00:03:40,080 --> 00:03:47,460

Now we're just going to go ahead and call the default present controller from Iowa s and the view controller



50

00:03:47,460 --> 00:03:49,260

to present will be the one we pass in.



51

00:03:49,260 --> 00:03:51,620

So go ahead and give it a controller to present.



52

00:03:51,960 --> 00:03:53,580

We want it to be animated.



53

00:03:53,580 --> 00:03:59,310

But the interesting thing is we've already set up the animation so we're going to dismiss or we're going



54

00:03:59,310 --> 00:04:06,300

to not include the default iOS animation and we're just going to go ahead and call false to completion.



55

00:04:06,300 --> 00:04:08,070

We don't care we're not going to use it.



56

00:04:08,460 --> 00:04:12,960

So that is how we're going to present our detailed controller and I'm so excited I want to go try it



57

00:04:12,960 --> 00:04:18,270

right now let's go into groups AVC and where we called present.



58

00:04:18,330 --> 00:04:24,150

We're going to check now we should have the ability to call present detail the view controller to present



59

00:04:24,220 --> 00:04:27,200

will just be group feed visi.



60

00:04:27,390 --> 00:04:33,540

So let's try that with our new extension Let's see how it works and let's build and run and try it out



61

00:04:33,870 --> 00:04:36,080

in our simulator.



62

00:04:36,090 --> 00:04:37,740

Here we go.



63

00:04:40,170 --> 00:04:42,810

Sweet it's installing OK it's opening.



64

00:04:42,810 --> 00:04:49,590

Now when I select my table you sell here you should see it slide over instead of sliding up.



65

00:04:49,590 --> 00:04:51,390

Let's try it.



66

00:04:51,390 --> 00:04:51,820

Look at that.



67

00:04:51,820 --> 00:04:54,330

That's just like a UI navigation controller.



68

00:04:54,330 --> 00:05:00,180

Now of course if I click this it's still going to dismiss it like it used to but we get a cool UI navigation



69

00:05:00,180 --> 00:05:01,910

controller styled animation.



70

00:05:02,010 --> 00:05:03,480

Very very cool.



71

00:05:03,480 --> 00:05:07,840

Now we're going to go set up the other function which is going to allow us to dismiss it to the left.



72

00:05:07,960 --> 00:05:08,470

OK.



73

00:05:08,610 --> 00:05:13,490

So go back to you you controller extension and we're going to go ahead and write another function called



74

00:05:13,490 --> 00:05:14,990

dismiss detail.



75

00:05:15,030 --> 00:05:19,290

Go ahead and type phunk dismiss detail.



76

00:05:19,290 --> 00:05:24,840

And inside this function we're basically going to do the exact same thing except we're going to dismiss



77

00:05:24,900 --> 00:05:26,790

the view controller instead of presenting it.



78

00:05:26,790 --> 00:05:33,330

So I'm actually just going to copy this and paste it and then I'm going to change from right to from



79

00:05:33,660 --> 00:05:37,770

left because that's basically what we're doing is the same thing just from the left.



80

00:05:37,860 --> 00:05:44,370

Now instead of calling present we're instead going to call dismiss and just like before we're going



81

00:05:44,370 --> 00:05:49,500

to override default transition style so we're just going to call false because otherwise it will try



82

00:05:49,500 --> 00:05:51,560

to present it like Iowa does.



83

00:05:51,560 --> 00:05:54,810

And for the completion we don't care we're going to say nil.



84

00:05:54,840 --> 00:06:00,810

Now we can dismiss any view controller just like a UI navigation controller so to do this we have to



85

00:06:00,810 --> 00:06:07,550

go to group feed Visi and we need to look to see where our cancel button or our back button goes.



86

00:06:07,550 --> 00:06:08,150

OK.



87

00:06:08,580 --> 00:06:15,770

Earlier we called just a regular iOS standard dismiss but now we can call dismiss.



88

00:06:16,200 --> 00:06:16,770

Oh you know what.



89

00:06:16,770 --> 00:06:20,280

Looks like we might need to build this to show for it to show up.



90

00:06:20,280 --> 00:06:21,980

Looks like it's not yet there.



91

00:06:22,260 --> 00:06:22,720

OK good.



92

00:06:22,710 --> 00:06:23,110

There it is.



93

00:06:23,130 --> 00:06:25,310

Dismiss detail that's all.



94

00:06:25,320 --> 00:06:26,070

Let's build and run it.



95

00:06:26,070 --> 00:06:27,420

Let's see how it works.



96

00:06:27,540 --> 00:06:31,140

And guys after that we can call this app finished.



97

00:06:31,140 --> 00:06:36,860

Totally done for the most part with exception of what I will challenge you to do in the next video.



98

00:06:36,870 --> 00:06:38,670

But let's go into groups.



99

00:06:38,760 --> 00:06:44,330

Click on nerd herd and when I click this button it should transition back to the left like we want.



100

00:06:44,470 --> 00:06:45,860

Oh look at that.



101

00:06:46,140 --> 00:06:48,390

So cool.



102

00:06:48,390 --> 00:06:49,620

So it looks like it works.



103

00:06:49,620 --> 00:06:51,330

We can open our groups.



104

00:06:51,480 --> 00:06:55,070

We can load our feed we can make a post from our account.



105

00:06:55,170 --> 00:06:58,230

We have a profile page with an unfinished table view.



106

00:06:58,230 --> 00:06:59,310

Wink wink.



107

00:06:59,370 --> 00:07:04,800

In the next video I'm going to give you a challenge to see how you can extend this app and make it even



108

00:07:04,800 --> 00:07:06,160

more incredible.



109

00:07:06,330 --> 00:07:09,150

Thank you guys so much for going through this section of the course.



110

00:07:09,150 --> 00:07:14,820

Amazing work this app would be an amazing portfolio piece by the way to show a potential employer so



111

00:07:15,090 --> 00:07:16,980

I would highly recommend that you do that.



112

00:07:16,980 --> 00:07:19,310

Let's head over to the next video for your challenge.