iOS Animation with Swift IV - Custom Animated Transition | Sandra L | Skillshare

iOS Animation with Swift IV - Custom Animated Transition

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (1h 3m)
    • 1. Intro

      0:25
    • 2. What You Need

      0:34
    • 3. What You Should Know

      0:51
    • 4. Custom Segue

      3:43
    • 5. Overview

      0:42
    • 6. Creating a Segue Class

      5:24
    • 7. Perform & Animate Segue

      2:31
    • 8. Transition Manager

      3:18
    • 9. DismissViewController

      1:42
    • 10. ProjectFiles & Overview

      2:07
    • 11. Image Categories

      3:27
    • 12. Adding Photos to Library

      2:45
    • 13. Collection DataSource

      6:43
    • 14. Adding TapGestureRecognizer

      3:58
    • 15. Pictures Gallery

      3:51
    • 16. Picture Gallery Data Source

      2:08
    • 17. Push Segue

      4:41
    • 18. Animator Class

      1:55
    • 19. Container & Transition Context

      3:46
    • 20. Scale Transform

      6:18
    • 21. Dismiss PhotoViewController

      1:44

About This Class

 

Welcome to the 3rd Part of this 5-part serie of iOS Animation with Swift.

In this lesson, you will learn to create your own custom view controller transitions.

What you will learn

  • implement UIViewTransitioningDelegate
  • create a custom segue
  • create a higher level of user interaction with custom transition, spring, easing animation, and scale transform to animate the transition to full screen

     

What you will build

+ Download starter project (this is a heavy file. may take a few minutes to download)

+ Final Project

+ First Part of the tutorial : find the project files of the bottom section

768a4a20

 

Other Topics in this Series



Transcripts

1. Intro: welcome to part four of the IOS animations with Swift Siris. In this lesson, you're gonna learn to create your own custom view controller transitions. We're gonna use collection views to create a picture gallery with an advanced user. Interactions design every type you top on his cell. You'll get this great special visual effects when you're transitions to full screen. This lesson is part of the five part series IOS Animations with Swifts. 2. What You Need: And what do you need for the class? The first important thing is that you need a very innovex code installed on your machine at the time of recording were at version 7.3. To download a copy of X Code, you can go to the developer Apple Page and head over to the Mac APP store. You need a Mac operating system for this course. You cannot use windows. You need to work on the Mac. Also, an iPhone device can be used to run your up. But this is optional because you can use the simulator that comes built in with X code. An apple developer account is not required for this class, but if you consider publishing your work, this is highly recommended that you get on account. 3. What You Should Know: So what? You should know for this class. For the best learning experience, you should have a working knowledge of X Code Swift and the Iowa, says Dickey. Projects and demonstrations will include a complete walk through a particulate animations with swift. But keep in mind that I will not be teaching swift. This class is more intended for students already familiar with programming and swift and using X coat. So you should know about variables, Constant's data, types, classes and properties, dictionaries, arrays, loops, functions and also closures. These also best if you know how to start and run a project with ex coat. Create a class file with an ex code also creates a graze on the interface builder and create outlets. And I be actions. If you haven't said yes to all of the above, you're good to go. We can then get started, and I will show you next in the next video. What we'll be doing in this class 4. Custom Segue: Now let's begin with the demonstrations. So we have to view controllers on the storyboards of the 1st 1 with the whites background color. We have this error right here to indicate that this is the entry point of the app. We have a button reveal and we're gonna use this one as an action in order to trigger the customs. Say quit. So every time you press on the reveal button, it's going to transition into the new view controller right here with the blue background. And here is, well, you have a hide button in order to dismiss the present view controller. So we're gonna go to the assistant editor. We're gonna have the storyboard and the view controller opened side by side, and here we're gonna create an action. So you're gonna go select the reveal button, And while the button is still selected, you're going to keep your finger down on the control button on the keyboard, and then you're gonna control and drag and then release. And here you're gonna have this window, which is gonna prompted to do, creates your connection. So that's gonna be action, then. The name of this one will be performed sick wit. The type is your white butter. And then we're gonna connect. That's it. So we're gonna go back to this one. So for now, which is gonna leave it blank. We're gonna close the assistant editor when I want to do now is creating the customs. Syquest. So we're gonna go to the view controller, selected this yellow circle right here at the top we're going to select and then keep our finger down on the control button and then drag and release. So once you are so when you see these the view controller, which is classing up like that. So this is to indicate that you are now on the view controller other off your destination. We're going to release right here, and we're gonna select the sick way that we want to create. So that's not gonna be pushed. That's not gonna be model either. We're gonna select custom. Then you're gonna click. That's it. And here we're going to select the customs Segway again. We're gonna open the right side panel. So here you have all the attributes for the storyboard Segway. So that is the attribute, Inspector. So once you're here, we can then at an identity fire for the custom. Syquest. So I'm gonna call this one custom cigarette, and I'm gonna go highlight this one again and then copy it by doing commence, See. And I'm gonna go back to view controller. So here, I'm gonna finish completing, creating my I'd be action. So what we want, basically is every time we press on the reveal button is performing a sick quit. So we're going to write set itself, perform Segway with identify rare. So that's this function with two parameters. First and identify here, which is a string, and that's gonna be the custom Segway. So the item to fire that we have just specified in the actual inspector and for the sender it's gonna be itself. And so we're gonna build and run just to see how this is before me. So I'm gonna click on the reveal button and hear my app is crashing. So I've got this error. Let's read what it is. So we have a reason right here that says could not perform Segway with identify where custom Segway and Segway Miss Me either have must even have a perform handler or it must override perform. So it looks like when it's a great a custom class for the customs cigarette, which is gonna be uptight US storyboards. I quit. Gonna need to create a custom class. 5. Overview: little guys eso In this part of the lesson, we're gonna create together a custom sick ways. So you will see that when we transition to the other view controller, it will grow from the center to fill up the entire screen. So in the following videos, you're gonna learn to create a custom Segway we're gonna create also a transition manager we're gonna apply. Also thing that we've learned, like an image with duration delay. So I'm gonna show you what I'm talking about, and I'm gonna run one example. So I'm gonna click on that button, reveal and then I'm gonna hide the present view controller. So to get started, you're gonna go to your start of project as usual, we're gonna go to custom transition. And, of course, you're gonna begin with the starter project 6. Creating a Segue Class : So we're going to continue. And what we want is to allow the view controller to rely on the custom Segway. And for that, we're gonna need to create a new class off the class. You I storyboards cigarettes. I'm gonna show you that we're gonna go to custom transition and go to New Fall. We're gonna create Akaka touch class. So you're gonna go under IOS in source, then select Group A Touch class, and we're gonna click on next and here You're going to select their importance. The SIPC last year, we're gonna indicate that this is gonna be a subclass off us storyboards say quick. And here we're gonna create an A class subclass custom Say, quick. And now you can click next, we're gonna add this one to the project. There you go. We have our new set Close, Perfect. So inside What we need to do first is overriding the function perform that's gonna be override funk before, and we're gonna add some code. First, we're gonna assign their source your controller and the destination Pew controller to Constant. So I'm gonna write, let source this sea, and then we're gonna sign self source of your controller. We're going to do the same for the destination of you Control. So that's gonna be dust V. C. So destination of your controller. Ok, that's the first step. Next, what I want to do is to add the destination control of you as a sub you to the view of the source of your control. So that's gonna make more sense by just typing. It soars your controller view, add some few, and then for the murder, that's gonna be destination. You control destiny. See you. So basically, what we want is to add the view of the destination, be controller to the stores, you controller. We're gonna allow it to scale up. So we're going to animate the transformation. So we're going to see the destination of your controller. And he made it growing up skilling up until it fills up the screen and then we're gonna present the actual destination view control so below we're gonna add destination view controller and we're gonna write to view transform. So this is where we're going to begin the animation. So we're gonna begin by writing C g. A faint transfer makes scale. That's gonna be two parameters and that's gonna be just zero X floats the reserves, so we're gonna begin with their Oh, so that's not going to be visible at first. It's only after we start the animation that we're gonna allow this destination to control to transform and scale up. So we're going to write you eye view, honey maid with duration. So you are family with this one already gonna use the outer complete and select. So this one right here with options, So we're gonna start with the duration, so that's gonna be fairly quick. We're gonna use super 0.6. That's gonna be 60 million seconds, then for the delay. So we want the animations to start immediately for the options we're gonna use actually occur is in out like so. And finally we gonna add our animation closure. So I'm gonna just keep the curly braces like so completion. So we're gonna keep it as Neil her now groups. So whenever you click on it, it's gonna prompt you to create your closure. So I'm just gonna type Neil and hopefully it's not gonna go to complete some time. It's a little bit first see or to complete his convenience but not all the time. Here you go. So basically what you want is to have the animation closure right here and then for the completion. We're just gonna leave it as now, we'll add some code later. So let's just focus on the animation for now. So what we want is to create the transformation of the destination view control. So that's gonna be the first step off the animation. So we're gonna take this line of go. So just when we're lazy, we can just Compean paste, we're gonna need to just change the values here. So we're gonna change from 0 to 1 and one right here. Here you go. So let me walk here through again this coat So we have a sign. So the sword, your controller and the destination control two constants. We're gonna be eating this one introduced to add the destination control review to as a sub you to the source of your controller to the view of the service. Your controller so internet to picture. What it does is that we want to see the destination you control invisible on the sores, your controllers. So for that, we need to add it as a sub you and finally, we're gonna create a transformation. So we begin by specifying the transformation values, which are 00 for the skill and inside the block of animates with duration, we're going to allow the destination of your controller to transform and to scale up completely until it fills up the screen the entire screen until it covers up the source of your control. And what we're going to see next is we're gonna present finally, the destination view controller, and we're going to see that next, and that's gonna be in the completion perimeter. 7. Perform & Animate Segue: Okay, so this time, so what we're gonna do? So let's go back to custom Sick Way. We're gonna continue and this time allow the actual present a few controller to be performed. So we're gonna go to the completion experiment. So we're gonna replace nil with curly braces in order to start the completion, so specifying a completion. So once the animation ends and we're gonna allow so the source of the sea present view controller So that's gonna be this one and for the view control. So that's gonna be the destination of your controller for the animation. So we're gonna set it to false, because we are actually creating our own animation. And for the completion, it's gonna be Neil, and that's it for now we're going to say this. Let's build and run just to see how it looks. We're gonna prison reveal and it crushes. Let's see why. So, so far we have creating our we have created our custom cigarette class. What it says is that could not perform cigarette with identify custom cigarette, identify your custom cigarette. A cigarette must either have a perform handler or it must have a right perform so we just did that. So by creating this glass right here, So we're gonna walk you through again. So we have this class, we have this class custom, Segway inside, we override the perform function, so it's not enough. So what we need to do is go back to the story board is gonna make some space, so it's better. It's clear we're going to select the customs Segway again. And what we need to do is always assign a specific class. So that's gonna be the one that we just created custom say quick. And then it's it's aware off the functions and methods for it is that we have specified for this custom say quit. So let's give it a spin again. We're gonna run, And this time you're gonna be able to see that when you click on reveal, we have these view controller riches scaling up and present it to the user. So we're gonna need to also update this one this button in order to dismiss the present view control, I want to show you as well how to create a transitions manager with the protocol which is associated with it. So which is you I've you control animated transitioning because we're going to use this one as well in the next Imo. I'll show you that next. 8. Transition Manager: So now we have a 90 maybe transition, which is up and running. So a few things that we need to do left, including a transition manager. And also we're gonna add the dismiss for the second. So the destination view controller and something haven't showed yet. So in the pickets folder, So you have the untold er in the in the case, you want to skip the entire thing and just look at the final results. You have the start, obviously, and also the meat of one. So just in case you don't want to do all the typing, for example, here we already have available a custom cigarette fall, so you don't need to create this one. And then also in the storyboards you already have the custom Segway, which is added with all information in the attribute Inspector. And finally, we're gonna look at transition manager. So we're going to do that in our I'm gonna close this fall because it's actually the start . But I'm gonna be using in that instance. So I'm going to create a fellow transition manager that's gonna be cook with such class, and this one is gonna be a subclass cough any subject. So that's gonna be transition. Met Magic. Go. We're gonna click next. We're gonna add this one to the project. Here you go. So now we have in this subject and what we're gonna do right away is conformed to the U I V . Control, animated can transition. Here you go. And we also have the same, but which is delegate transitioning delegates right here. And so x code is already complaining because you have a message that aren't required in order to confirm to that critical and the 1st 1 will be Adami transition. So we're going to write this one right here, mate transition and we're just gonna leave it blank. So this is where you'd have your coat. So we're just gonna leave, you think for now, And you have another one, which is transitions, duration, and this one, Richards, and returns it in its time interval. And that is gonna be afloat. So that's gonna be transitions duration. And here we're going to return 0.5, and you also need to add other code, which is animation controller for presented controller. First this one and we're going to return. So and we're gonna do the same for the dismissed control. Here you go. And we're going to return here as well itself. So all of that, it's gonna be useful for the next demonstration that we're going to do. We're gonna be also creating custom transition in order to create a nice effect off an image presented full screen whenever you click on the cell on a thumbnail. And we're gonna that we're gonna do that together in the next lesson. The other thing that I want to show you is how you actually dismiss So this do you control we want This is presented. I'm going to show you that very quickly in the next lesson, and then we're gonna be able to pass to go to the next video devil. 9. DismissViewController: So now we can complete the D move by revealing and then hiding the controller. You see that we have this high button right here. So we're gonna connect this one too. The corresponding view controller and which is new you control. So we're gonna have the two side by side. So we're gonna open the assistant editor and we want to open, So we're gonna keep this one open. So we're going to click on options in order to be able to open another foul. So on the next on the right panel. Sorry. So I lost the main storyboards. I'm gonna click again and main storyboard. And then you control your prescription, and then you click on you view controller. Here you go. So now we're we want to be, so we're gonna select this hide button, and then you're gonna keep your finger down on behind on the control button from your keyboard, and then you're gonna control drag like the stew creates, then election, and we're gonna call this one height simple as that for the object that's gonna be you. I button, that's it. We're gonna connect. So now we have our new I be action. And basically, what we want to do here is very simple. We want to allow this new view controller to be dismissed when you click on height. So we're going to right itself. Dismiss you, controller, and it's gonna be a bull. True. We wanted to be true. The completion. It's gonna be very simple. Gonna be no for the completion. I'm going to save these sunrun. What up? And this time we're gonna be able to perform the customs Segway by clicking, reveal and then dismiss when we click height. 10. ProjectFiles & Overview: So let's begin with another view of the projects fall so you can start with the starter project and select the folders starts. So I like to keep things well organized. So a credit groups some first for the pictures, and this is also categorized. So we have category freshen, and we have 10 pictures for each of them with food, like so then we have cell, so we're gonna have to custom cells. Then the controllers. We're gonna start with the master view controllers where we're going to display the different Get Diggory's and one you select one category, you're gonna be able to see a collection of pictures for that particular category. And that's gonna be the collection view control right here. We're going to see a collection of pictures, and then you have followed the controller, and that's gonna be for the full screen presentation off one picture. Then you have the model. So that's gonna be get Diggory. We're gonna have category objects for every category in that sound demo. So we have two priorities for that category. We have the name of the category and that corresponds to this category right here. So we're gonna have category freshen get to your food and also the array. So that's gonna be a Honoria photos and we're gonna use during objects. And that's gonna go response to the name off those pictures that we have right here. So we have flashing zero freshen one, So that's gonna go in sequence, and that's gonna be more convenience. So next we're gonna go to the main story board. So we have three view controllers and we have a navigation controller in order to be able to navigates between the three. So first we have the master view controller, So that's gonna be a collection of you. We're gonna use thes collections, so view to display the different categories. And then every time you select one category, you gonna be able to Segway to the next collection of your controller to display a collection of pictures. So that's gonna be that still example, And we have a u. I image you as an outlet for that cell and finally, So once you top on one cell, you're gonna be able to also display full screen that image, and that's gonna be the foot of your controller right here. So we're gonna begin with the master View Control and see how we can display categories for each cell. We're gonna start with that in the next video. 11. Image Categories: So we're gonna start to work with the Muster view controller because this is where everything begins. So we have this array right here that we declare so variable categories, and it's gonna take category objects. So category is a model that we saw earlier. So it's declared with ju properties a name as a string and photos, so that's gonna be an array of string objects. And we have this custom initialized right here. So every time you create and you get to Guerry object, you're gonna be prompted to created with the name and gunnery, So that's gonna be photos. So back to master, you can draw, or we're gonna go inside If you did load. And we have these lines of codes that we used to customize the NFR. So it's just for styling purposes. Then we have these local array that we declare so with six strings in order to name to provide names for the categories, as you may guess. So we're going to go next to the load categories function, So this is the most important part. We're going to use this function Internet, Tikrit. Then you can take a real objects, and we have this function with two parameters. So that's gonna take an array and a completion handler that we're going to run after performing a task. Actually, the purpose of a completion handler is to perform a new task once one task is finished. So this first tasks will be to actually iterated through each item that we haven't underrate. We're gonna create a new category object for each item that we have in that. All right, so what we want is to create a new category right here. So we have our custom initialize er so that's gonna be a name with the category and for the photos were gonna leave it blank for now, So that's gonna be a second step. So we use the square brackets because we got to leave it empty, so we're gonna create our category within you name, so that's gonna be fashion, food and so forth. And after that, we're going to append in your category to self categories, which is theory that we have declared right here. So we're going to do that. We're gonna call this function impeded load, and we're gonna pass array that we have right here as the parents because we won't treat to right through each string that we have in that area and then create a new category object from battery and for the completion handler. So that's gonna be another step. We're gonna just leave it empty. Or or we could actually prince the number off category object that we have in that new. And that's, um, variable array. Just to show you the counts of object that we finally have after running this load categories function. So we're gonna save and then run. You're gonna be able to see the number of large object that we have in categories now. So that is six. And now we have six categories, so we don't see anything for now because we still have to also update the data source off the collection view. You're not gonna be able to see that without updating this part. So if you go to master view controller, the main story board, what we want is to creates a label, and it's are you. I image you for each of the category. So that was the first step to know the categories. What we're gonna do next is also loading pictures for this part. So we're going to do that with that function, and we're also gonna need to update the U Y. Collection view data source in order to be able to display to have a visual for the collection of you. So we're gonna do that in the next couple of lessons. 12. Adding Photos to Library: So we're still working on the master view controller. We have completed the first task, which was to load the categories. So now we have six objects in the categories. Variable categories. Very so next. What we want is to complete the photos information for each off the category object. You see that here we had left this one empty. I'm gonna use this function right here in order to complete this desk. So what it does is iterating through each object that we have in the self categories array . And then we're gonna run another 10 times in order to create a string, objects and finally upend this one in the photos property off each category object. So for the string of J, that's gonna be the category name, followed by another piece of information. So here, you see that we have declared this counter variable, and that's gonna be an integer initialized at zero, and that's gonna be incriminated by one each time that we go through the So that's gonna be a little which is gonna run 10 times. So we're gonna create 10 times a category name, followed by a number, and then we're going to append this one to the photos party off each category. So that's gonna filter. Actually, this pattern. So we're gonna be able to refer to each fall name right here. Fashion zero, fashion one. So that's just the first example. And that's gonna be added to these photos. Poverty. So that is the purpose right here. So what we're gonna do is actually called this function. So once we're done loading the category, So in the completion handler right here, you see it? So you understand that the purpose is here, too. Perform another test once one is finished because you're not gonna be able to actually depends anything to an object that doesn't exist. So that's why Reverend First Load categories and then we have a completion closure inside of this one. We're gonna Then Caulfield lode photos like this and energy in order to see how it works, were put a brick points because the break point is gonna allow to interrupt the code and to inspect how the code is performing. So basically, we could put the break point right here. We got to see how this works. I'm gonna put another one right here just in case, So we have a first. So I think it worked well. So once we've loaded the categories, so now we have six value. So that's gonna be the six the six category objects and for each of them. Now we have a name and also 10 values with that corresponds to the photo, you see. So first we have the category, so that's six of them. So that starts for every array we started zero. So the last one will be five than the last category. Will be technology and the photos, and it has a number for each of them. 13. Collection DataSource: So we've done most of the work with the master view controller with created the logic in order to load the data. What we wanted you next is to display this data. And part of this is to also indicate how we want the collection view to look. So we have this data source methods right here without we're gonna need to update. And those methods are records. You need to implement them in order to indicate how you want the collection of yourselves to to look, that's always required. We're gonna go to the main story board. You're going to see the master view controller, and we have ourselves so part of the collection view and on that. So we have an image and a label right here. So that is a custom self. So here we have specified Katica review cell for this collection view. So we have two outlets, an image and a category label. So we're gonna configure those ones in order to have a visual for the cells. We're gonna do that. Next. Let's go back to the rest of your controller where we're gonna implement the data source methods first, the number of sections so that's gonna be one. So it always defaults to one, then the number of items in section and that's gonna be the number of category objects that we have in our race. So that's gonna be categories count. And that's gonna be which of a number that you have in an object. So you could decide to add more objects in that race. So if you have seven or eight, that's gonna be then an integer eight, which is gonna be returned in that function. Next, we're going to configure this cell. So first we start by declaring this constant, which is gonna be so and that's gonna be cast as a category view cell, just like our custom cell right here. Okay. And we use also a reasonable identify air. So that's always record also in the main storyboard. So we're gonna go back to the main story board where you must specify unidentified air like this using the view hierarchy, you can go to the cell inside collection view and then check in the attribute instructor, the collection reusable view, which is gonna be sell. So we're gonna use the exact same strain right here, and it could also put this one in a constant. So here, in that example, will be also, we could also use this one. So that's really up to you. So I'm going to replace this one with the constant that we have at the top, like so next we're gonna then create a category objects. We're going to start configuring some sell for each of the category, and that's gonna be which ever category at which ever route that we are. So we're gonna Cole the categories array. Then we have the index path, which is a perimeter in that function. So Ennis index path that has two properties, row or item and section. So that's gonna be role. And this function works as a loop. So it's gonna look through each item, each object that we have in an array and return the corresponding object that we have a specific in exposition. Then we're gonna have an index, so that's gonna be another constant. And we're gonna use this function, which is gonna take a permit, er as an integer permitted as an argument, and that's going to return a random integer. So we have this function right here, so gonna have into dripper Mitter than re German integer. Then we're gonna pass this numb perimeter to this function. Witches aren't for random uniforms. In order to generate a random number between zero and the value that we passed us, prepare a minute. In that case, it's gonna be 10. So we're gonna see how we can use that In an instance. In a moment said we're gonna have cell. We're going to start configuring. So the outlet that we have on the custom cell so that's gonna be category label. Then we're gonna update the text priority, and that's gonna be the category name. So the category constant that we have just created and that's gonna be the name. So remember that we have this name priority on the category object. So we're gonna sign this to the Gatica relabel. Then we have the image that's another outlet on the custom cell, and we're gonna update the image pretty full. That's you. I image you and we're gonna create an image. So that's gonna be the you I image function. And for the name which is gonna be a string, that's gonna be the cover that which is created although is gonna be something I'm gonna need to create right here. My mistakes. I'm gonna create cover. That's that's gonna be another constants. And that's gonna be category photo. So we're gonna refer to the photos array that we have on each category objects, and then we're gonna have a random index position for Discover. So we're going to generate a random number assigning to index. So that's gonna be an integer, then passed this integer to this photos in order to return a string and then assign it to cover. And then we're gonna pass this string as a name for the image. So we're gonna have for every category, a random image, so that's gonna be very random. And because we need to specify that this is a foul name with an extension chip bag, we're gonna need to use the interpolation in order to use this variable. So that's gonna be back slash and then cover for the variable and then Jim Pig. So we have this string, we use interpolation, and then Jeff Beck. And finally, what we do at the end is return itself. That's it. So let's try that. We're gonna build in Rome. Look at the simulator. And here you can be able to that now we have ourselves. So that's six double with an image and also a label that corresponds to the category Me. What we want to do last is for each category names to have to be capitalized. So I'm gonna put the category name in brackets and I'm going to call this function, which is built in capitalized strength, Very convenience. I'm going to run again, and this time you're gonna be able to see that we have the category name, which is capitalized. 14. Adding TapGestureRecognizer : as a final step in that demo, we're going to be adding, so tap just to recognize or to the cell introduce. You're allowed to trigger the custom animation. So we're gonna go to where we configure the cell. So this is where we're gonna be adding this just to recognize her. So we're going to be using this function at just to recognize er and that's gonna be a type U. I top just to recognize her, and we're gonna sign self as a target. And for the selectors of the action, that's gonna be deep Tapsell. So we're gonna go find dysfunction right here. We have this function. Did Tapsell. So that's gonna be the center will be. You type just to recognize it. That's we've just added to the cell. Also, we have the strong, a strong reference to the selected image that we declare right here, which is a type you I image view and basically So we're signed to this strong reference of the view of the Centre Energy Keeper reference to off the view that we talked on, which is gonna be the cell. Then we're going to define the photo detail, So that's gonna be the present view controller in order to present the details to the new view controller. And then we're going to refer in the storyboard to the foot of you controller. You see that we're using afford a few control, identify air Internet to science and to create so an instance of foot of your controllers say, if we go to main storyboard, we're going to be able to see that we're going to select this one. You're going to see that if we go here, we have a sign that and identify her through the storyboard idee. So that's going to allow it to refer to that you controller specifically. And that is important. Once we've done that, we're gonna assign to put a detail So we have a property on that few controller, and we're going to see that later on. So we're gonna sign to this photo property the image detail off the selected imaginary to be able to display full spring for that selected image. We're gonna also assign self to transitioning delegates of the photo details, so it's gonna be able to rely on the transitioning specificity that we've been working on. So you know with the item in a class. So this is what this is. And then we're going to use present view controller as a parent or we're gonna use photo details so the rest is pretty basic. Let's go check out foot of you controlled er so on the throat of your control, you're gonna be able to see that we have these photo property and also the U S. Image you because we have this big you I imagery that covers the strange. So that's gonna allow to create the full screen presentation. And inside he did note. So we're signs of these further property toothy image, poverty off foot of you. So we're gonna be able to pass as photo details to photo. So let's go back to collection view control just to see the different steps. So here this is what Where things happens, we have the details of the image which referred to assigned to select image that we keep. So we keep a reference to that and then were assigned the details to photo off photo details. Finally, we past that to the foot of your controller, and insurance is going to be assigned to the image poverty off the foot of you, Then we're gonna be able to display full screen. So the details of the foot of you right here. And also we have this comment right here. So we have a Magister another I just to recognize her that we're gonna be using. So basically, we want to be able to tap on the cell in order to display full screen and then tap again on that's full, full screen picture in order to dismiss the view controller. So we're gonna be seeing that night. So let's do a demo and the last step off that demonstration, we're gonna be working on how to dismiss the presented view control. So I'm gonna show you now what we've been doing so far. So we're going to click on that cell, and here you go. So you can see that now we have full screen. So once we tap So for now, it's not effective, Doesn't work. There's no user in direction. We want to dismiss this the full screen in order to go back to the initial street 15. Pictures Gallery: So right now we are on the collection view controller, and you can select this fall. So here, from the group controllers and we're gonna run right now, these application, you're gonna be able to see that we can transition from the master to the collection of your controller by just tapping on the cell. So right here we can push Segway. So once we tap on the cell, so that's just a regular pushed Segway. Later, we're gonna create a custom, and he made it transition. So that's gonna be the next step. Let's look at the resources that we have put that collection of your controllers first. We have this outlet collection you and because we conform to the delegates and in our source, we're gonna need to implement the data source method just like we did for the previous demo in the Master View Control. Then we have an instance of animator, which is gonna be a class that we're gonna use to implement the animated custom transition . And we have selected image that we're going to use as a reference or every time we top on the cell, we're going to refer to the information of that cell in order to display the full screen version off the image that we have on that sale. Then we have the category objects, the photos for that category and more photos. So that's new. We're going to use this one to actually generate more regret a number of photos just to give the impressions that we have a larger collection of pictures. An imputed load we confirmed to the dedicates ended a source by assigning self self, which is the instance of the controller that we're in, which is actually the collection of you control right here. Then we have this line, of course, vouches for styling purposes. And finally, we assigned to titles of the title of the View controller the name of the category with capitalized string. So you see that every time we transitions to the collection of you Control, we were gonna have the name of that category as the title and you see here that we have commenced in order to indicate that this is where we're gonna load more photos. So we're gonna look right now at this function. What we want to do is to reiterate 10 times four photos in photos. So we can So for as many objects that we have in photo. So that's 10 pictures that we have for each categories. We want to run the same function 10 times, and then we're gonna end up with a collection of the 100 pictures for each category that we're gonna load to more photos. So before we do the same way, we send us an object, an array of photos, which is 10 total, and then we run this function, which is gonna be load more photos. So we're gonna send looked through this a rate and times in order to generate 100 pictures . Let's just see that connection that's always better showed than explain. We're gonna simply call this function right here. We're gonna put a break point we're gonna be able to see as a result after calling this function. So let's run. And because I put a break point So what we're gonna do in the console is just expand and look at here. You see that we have this hurry that includes 10 values and we have been more photo that then includes 100 values. Here you go. So we're gonna be able to have then 100 pictures for each get Diggory. So every time we display category, I'm going to remove these break point. Now, what we're gonna do next is looking at the data source method. We're gonna look at that in the next video. Listen, you're going to see that this is very similar to what we did in the previous in the first part of that day. 16. Picture Gallery Data Source: So we're gonna look at the data source methods. So just like we did in the demonstration in the first part for the master view controller. So first, we're gonna indicate the number of items that we have in that section. So that's gonna be the count for more photos, which is hundreds total. And then we're going to configure the cell. So we're gonna have this content constants that's gonna be sell for a dick, your reasonable cell with reuse item to hire itself. So that's gonna be the same s for the most of you. Controller. We're gonna have this cell, so we're going to click on it and then expand with them. Attribute, Inspector, and you can see that we have this cell identify. Here you go. We're gonna go back to the collection view controller and continue with these methods. Then we created these constant, which is going to be fatal, and that's gonna be the equipment off. So the that's going to refer to the string object that we have in the array. More photos at the index position off the index Beth Rose. So we have 100 stuttle. So this method is gonna take care of looping through the 100 objects that we have in battery and then return it, assign it to wherever we want, which is gonna be the image name of that you image functions that we're gonna assigned to the image property off the picture outlets that we have on our custom cell. So we have also accustom self for the collection of you. So that's gonna be one single picture and you're gonna see that again. Backed in Maine. Storyboard. If we click, we're going to see that picture outlets. So this is how we're going to display the image for this collection view controller. So we're gonna build and run and you're gonna be able to see that. Now we have a collection of 100 image for each category, so we're going to select one category. I can hear you go. We have our pictures, so it doesn't do anything when we top on it. For now, what we're gonna be doing next. He's taking care of the custom animated transition. So I'm going to introduce you to the to the foul. The class animator That's gonna be next 17. Push Segue: So for this last part, we're gonna allow the navigations from the category page to the collection of you. So every time we talk on the Katica result, we want to be able to transitions to the next year controller and see a collection off pictures for this category. But before we move on to this next step, I want to show you this function riches right here, which is another data source method. And this is size for item at index path, and it returns s Aegis size. So he returned the CG seismic, which is a function that six to perimeters. So first the with and we use actually the with off the view, which is connection view bounds size with, in order to allow the cell to stretch across the entire with off the screen. And finally, for the height, it's gonna be 180 points so that sex is just in the case. You'd like to customise it differently. So you know what's how it works? So now we go to the navigation. We have this function, prepare for Segway that we're gonna use internet secrete the same quit from the categories of the Master view controller to the collection, your controller. And that's gonna be then our next step. So first, here we have an optional binding. So we pass this the cell that we tap So which is a type category of yourself to this constant, which is in next Beth. So if we have an existing sell off type of getting a review cell with, they're gonna pass it to this contents constant index path. So we're gonna use that later. Next we have another, if condition, which is to check if we have the corresponding Segway identify here. So in that case, we're looking for the good to collection Segway. Identify where I'm gonna go do the main storyboard and selected Segway. We're gonna open the right side panel and in the attribute inspector, we see that we have these identify go to collection. So we're gonna be able to perform some codes if we have the corresponding identify air so back to muster view controller. So basically, what we want to do is when we prepare for Segway is to pass some information from the most of your controller to the next few controller, which is gonna be the collection of your controller, which is that's when we top on one particular category. We want to be able to see the corresponding information for that category, which is gonna be the photos. So we're gonna have a constants, which is gonna be let category selected, make some space, let category selected, and that's gonna be get degrees. And we have this index bath constants that we created that that's up, which is gonna be convenience because we're gonna be able to return the particular informations for the category cell that we've topped that we clicked on. So that's gonna be index path a row. Ask category because there's gonna be a category objects. Also, we have let photos we're gonna assign to this constant. So got to agree selected, and then photos, which is the property of the category objects. Next, we're going to create a constant for the destination view controller. And that's gonna be the collection. Just sell collection view controller, my mistakes. So we want to create a constant for the destination Control Richard, the collection view controller. So that's gonna be Sig Wit destination of your controller as collection of you controller. Let's start with that and we must add a bank just after the ask. He worked, and what we're gonna do next is basically once after we've declared a constant for the category selected and photos right here. And another one for this in the destination of your controller, we wanted pass. So the results off the categories selected to the variable that we have created on that this nation of your control and we're gonna have a look at it. So I'm just gonna type them in first. And that's gonna be another one. Photos and photos right to you. It's gonna make more sense when we go to this destination of your control. Richest collection control Right here. Here we go. Let's go to collection of your controller. So you're going to see that we have variable that we've declared category introduced. So by applying so this goat in the prepare ho secret methods we allow So this object to be passed on to the next few controller and we're gonna be using this information's in order to display what we want to display in the collection of your controller, which we're going to see next 18. Animator Class: we're coming to the end. I mean, the most important perch off this topic. Brandy, creating the animated custom transition. And in order to support the custom transition animation, everything happens through the animator class right here. So we had created this animated class, which is a subclass off in a subject, and we're gonna have for priorities for that class. So that's gonna be first duration, and that's gonna be 80 minutes seconds. Then we have a ghoul presenting that we're gonna set to true an origin frame in order to keep a strong reference off toothy original frame off the view that we're gonna be selecting before represent it full screen. Then we're gonna have a closure, and that's gonna be dismissed Completion that we're gonna be using near the end of the animation process. Also, we adopts the US View controller and immediate transitioning protocol right here. And this particle requires two methods. First, we have transitions, duration, and that returns and in its time interval. And that's gonna be the duration that we have declared right here. So that's gonna be aiding in the seconds. Then we have animates transition that takes the transitions context as the perimeter. So inside this function, we're going to define all the states for the animation such as initial and final frame. And we gonna have also multiple conditions to see if truffles in order to whether or not return an initial or final friend, We're going to begin with a container view. So that's gonna be the context for the transition effects we want to create in any made its transitions between the initial frame, which is gonna be the cell and the final state, which is gonna be the presented controller, the presenting controllers, a full screen and what we want to do, basically, is to select a picture. So that's gonna be when we talk on the cell and we're gonna us for it to be presented full screen. And this is when the animated class is gonna come into action in order to create the animated custom transition 19. Container & Transition Context: so with this transition context, so we're gonna be able to create the animation. So here we have this container view that we create, and this is where the animation will leave. So we're gonna be able to have the old you, which is gonna be the original friend and that contain of you, Bill. So the new view and that's the one for the full street. So that is what the transition context is for. So these lines of code we're gonna explain. So this is what it's for. We're gonna have first a container of you where we're gonna have the old existing view added, which is the original friend. And then the new view is gonna be created. But it's not gonna be visible yet, So the new view is gonna be added to the transitions container. Then we're gonna have this method which is very convenience, because it's going to allow us to access the existing and the new view. So it's gonna take one perimeter. So that's gonna be either you. I transition context to view key or which is this one at the top. So that's gonna be the true views with this constant that we create right here. So we're gonna be able to refer to the new view, which is gonna be the full screen final frame, and then the old view we're going to refer to me to it as you I transitions context from Yuki. And then finally, the nuclear is gonna be added as a child to the container view, and that's something that we're gonna be doing right below right here. So we're going to do that. We're gonna add as a sub view to the container of you, so to view, which is gonna be the final frame. And finally another step will be to bring to the front. So bring sub U two front foot of you so as you can understand, So what we want to bring to the front is the view that we have selected, which in this case, will be the true view. So here we have this contract constant, which is what of you. And we're gonna be able to return either to view. So that's a turnaround operator. So that's that works like and even else. But just on one line, So we're gonna return either to view or their transition context from Wiki that's refers to the initial frame. So because presenting is true, we're gonna be able to return than the two of you. So if it's true, we're going to return this first statement right here, and that is like that works like else. So that's gonna be the else. If it's else, then we're gonna return there from view. So this is what represented the foot of you. So we're gonna bring to the front whichever frame so view is assigned to put of you in that case is gonna be the new view. I'm gonna industry to you how the transition context works. So we have in the middle a container of you on the left. We have the from view, which is the collection view with multiple cells pictures. And once we talk on the cell, we're gonna want to see this one's full screen, and that's gonna be represented by this to view that we have on the right and that's gonna be the full strain. So once you tap on the cell, you're gonna have the old existing view, which is gonna be added to the container view, and we're gonna have also added to the continue of you the new view which is gonna be to view, but it's not visible yet, and then it's gonna be brought to the front. So once the transition context is down doing the job, we're going to need to be taken care off the transformation off the new view in order to allow it to scale in order to fill up the screen until we can see full scream for these new view. And we're going to be having so different constant years to for the X and Y scale factor introduce you allows the new view. So that's gonna be the tree view to scale up. And we're gonna be doing that in the next video Listen. 20. Scale Transform: So if true, we're gonna want the frame to grew from the initial to the final frame on the X axis. So that's gonna be that step first. So that's gonna be assigned to let ex scale factors. So we're gonna right, So that's gonna be another tuna rear parade, Er, so if presenting is true, we're going to return. So that's gonna be if it's true, we're going to return the first statement, which is gonna be initial frame, and that's gonna be with divided by final frame with. So basically, if it's true, want to return a frame of the size all the bounds of the screen minus the size. So the original size of the initial frame, of course, because it's gonna be like minus the cell. So the size of the cell so that we have to take into account. And that's gonna be the first statement, if true and false. So we're gonna have this colon, which is gonna be the equivalence off else. We're gonna write final frame with divided by initial friend. So instead, we would have the initial friend if it's not true. So I forgot just the with right here. Okay, we're gonna be doing the same for the y factor. Why scale Factor below that's gonna be if presenting is true, We're gonna run to return Angel frame height divided by final frame hurts. So that's gonna be if it's true. Otherwise, we're going to return final frame, all right. Divided by final frame. Sorry. Initial frame. Right. And below have this other constant. So that's gonna be our reference to the transformation. So whichever is returned, So whichever is true, Fels, we're going to return stuff analogy just left it as 00 But basically, we won't as the parents of the scale. So x scale factor for the with and the why scale factor. And we're gonna be using that in the transformation. So be little. We're gonna have this function right here. So that's gonna be if presenting, we're gonna want to assign. So the transform so attributes to this sort of you. So the foot of you, which is gonna become so the one that we're gonna bring it's gonna be brought to the front . So that's gonna be skilled transform, and we have already seen. So that's how we add to the container view and how we bring to the front. What we wanted to next is to animate the transformation right here and so inside the animate with duration we're gonna find So the duration, which is equivalent to 80 milliseconds like so we're gonna have no delay. We're gonna use in options in order to allow the animations to slow down near the end of the animations process of by using this option curve easy outs. And finally, we're gonna have the animations closure where we're gonna have the action. So for the foot of you were going to use the transform. So that's gonna be this transform pretty that we're gonna of date. So first we're gonna have another tannery operator. So that's gonna be if self presenting is true, we're gonna use So the original transform I don't see which is gonna be the original frame . Otherwise, we're gonna use scale transform that we have defined at the top, and that's gonna be the transformation. So this we're gonna allow so the frame to scale up so that's gonna be the final free. Also, we're gonna change thesis enters of the origin of the foot of you. So that's gonna be we're going to do that with the function, which is gonna be City Point, which is gonna take an X and Y coordinate. And that's gonna be the equivalent of the final frame, which is gonna be growing from the center and then occupy So the entire screen, the entire bounds of the street, we're also gonna have a completion. Their importance because then once the animation is complete, is finished. We want to also dismiss the animation, and this is what we do with this perimeter right here. So this itself dismissed completion, and we have defined this one right here. Dismiss completion, and you can use this poverty. So this function, So that's that supported. That includes a closure in order to ransom code. So once the animation is complete, in that instance, religious gonna leave it blank. But just so you know, it works just like a completion. Just like the example of animators duration. This Miss completion is going to allow you to ransom coat once the animation, so the transition is complete. And with that, we're gonna call also complete transition, which is gonna be set to true. That takes one character which is a bull introduced to complete the transition that sits for the anthem in a class of lives. In all the functions the parties that we're going to use in order to perform the custom animated transition, we're gonna go to the collection of you controller. We're going to see that we have an instance off the animator class right here. We're gonna use this one. So in an extension, So all the way to the bottom, We have this extensions to the view controller, and we conform here to the U I view controller transitions dedicates, and then we use the required method that are animations controller for presented controller and also animations controller for dismiss controller, and inside of it functions we used So that instance of animator. And by applying that so we allow these view controller, which is the collection of you control, to rely on the instance of the animated class in order to perform the custom animated transitions every time we talk on the cell. So what happens if you were to try now to use up? We're gonna first, So we're gonna first select a category. Let's take food, then one cell. But it's not working just yet and why it's because also, we need to add interactions to the self. So we're gonna add one function, and that's gonna be ad tab jester. Reckon visor Internet. You allow so an action in order to added actions to the cell and then trigger the custom animated transition that's going to be next. 21. Dismiss PhotoViewController : we're gonna finish, but allowing to dismiss this full screen. So this is where we have left up. So here we have this commence A, which is in Irvine to add just to recognize er so we're going to right foot of you, and that's gonna be add gesture. Recognize? Er So we're gonna select this one from the auto completes, and then you're gonna type the type of just a recognize er that you want to sign. So that's gonna be you. I tuck Chester. Recognize? Er, then we're gonna add the targets. That's gonna be so and for the action. So that's gonna be the one that we have actually defined right here below. So if we go through that, so it is dismissed presenting you control. So it is up type. So the center will be off type you white suggest to recognize er on. What want to do with that function is to dismiss. They're presenting you control. So we're gonna said that to true and helpful completion. So we're gonna call this one. So once we tap on, that's picture. So I'm missing some things, almost specify selector. And then at this one as a selector for the action. Also, we're gonna add the column because this is a function. That's excellent. Perimeter. So we're gonna be good to go. We're going to say that and then run. And you were gonna be able to have everything up and running. We're gonna be able to select first category. So let's get the simulator. We're going to click on that one. So to get pictures about the nature, then we're gonna select this one and top again. Introduced to dismiss it. So this was working fine.