3D Touch - Peek & Pop with Swift3 & iOS10 | Sandra L | Skillshare

3D Touch - Peek & Pop with Swift3 & iOS10

Sandra L, Front Development

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

      0:29
    • 2. Collection View

      9:31
    • 3. Photo Class

      14:15
    • 4. Displaying Photos

      8:51
    • 5. Displaying Caption

      4:35
    • 6. Image Full View

      6:06
    • 7. InindexPathForSelectedItems

      1:00
    • 8. 3D Touch

      11:17
    • 9. Previous & Next Controls

      19:33

About This Class

In this class, you will learn the advantages of an enhanced mobile user experience with 3D Touch. You will see how to enable the 3D Touch capability in your phone application.

e4aee8a9

Prerequisites & Requirements:

You will need access to a Mac computer running OS X 10.10 or later No prior programming experience is required. The course has been specially designed for beginners. The first chapters will walk you through the download and install process of the XCode 8 Application (to build iPhone Apps).

Transcripts

1. Intro: so with this demo pecan, but we're going to see how to include and use the three D touch feature, which has been knew since I was nine. So with three D touch users can choose to this clear preview off the content, so without actually displaying it by simply using a long pressure on the script. So, like a snake perfect. So in this them or we're gonna look at adding the three D touch capability to add and bring in new dimensions to the application and user experience. 2. Collection View: for these tutorial, We're going to start by creating our project, which is gonna be a single of the application. And I'm gonna call this one peak in books that's gonna be on the deck Stop. And I am. And I am also providing with images also for this program support this project, and that's gonna be very similar to the images that we used in the first project. That was for the Gallery of images. So we're gonna use the same and feel for Jew busy the unspool ash dot com website. I think it's that come where you can download royalty free images by simply mentioning so the splash dot com source. So that's gonna be picking Pop. And I am providing also with assets for this project. So that's gonna be images the same that we've used for the 1st 1 of the first project we've done together. So that was these pictures. So feel free to download all their royalty free images that you can get for free on the website and slash dot com so you can use them for your personal projects. So here goes, so we're gonna add them right away. Actually, so I'm gonna at them. So so like them all that drug over like so then I'm gonna release and click finish. And just to get things organized, I'm going to create a group right away. So that's gonna be in your group images. And here you can also add the images to this folder, which is asset XY assets. So this is for the purpose of adding assets to your project. So by simply drawing them all her to hear and you're gonna see that they're gonna be idea automatically So for now, so I'm just gonna add them to the roots of my projects. So let's begin with the interface of the U Y of our application. So we have a view controller that we're going to use for the detail of you controller and right away. What I'm gonna do is creating the collection you. So I'm gonna do that by drugging over a collection view controller here ago, and that's gonna become our entry points. So that's gonna be the entry point of this application in which we're going to use three d touch, you know, Did you create this speaking pop effect? So that's so like this one and then go over to here and we're gonna check this books care ago. So this one has moved to this view control. So that's gonna become the first into points for this application when we start be up. So we're going to start by configuring the collection. You So that's gonna be the first view for the user. So starting by creating a new class, we're going to need that in order to be able to control programmatically how we creates the appearance of that collection of you. So I'm gonna do click right, You fall Google Ditch Class. So that's going to be a subclass off your collection to control her. And I'm gonna call this one photos with the nests. What does collection of your controller Quick next? A year ago and here I'm gonna complete, and here I'm gonna date. So how? I identify each cell which are going to be generated so following the number of pictures images that we have in the collection that's gonna be food or sell. And here I'm gonna indicates of the number of section. For now, I'm just gonna indicate that we have, like, about 10 cells But obviously we're gonna have a number of items which is gonna be based on the number of images that we have in a collection. And to begin this demo, I'm just gonna add a background color that's gonna be your eye color Read. And then I'm gonna go back to the main story board because I'm gonna need to attach this new class to this view here. So that's gonna be with the items it inspector. So that's gonna be photos collection view controller. So because I have created a new class, which is a subclass of you I collection view controller. So this is automatically confirming to the collection view, data source and delegates protocol, so I don't need to specify. So we're gonna go back. I'm gonna show you. Actually, you're gonna be able to see that whenever I select this one. Actually, I think I can do it from here. So that's gonna be collection we controller. OK, control, we're gonna check. So you gonna release? You're going to see that, Actually, no, we're going to do like so I guess, Yeah, year ago. So from here, actually. So by going in, the document outlines so What I did is selecting the collection views of the objects the view and then dragging over to here by pressing control and here, going to see that we have selected data source in delegates. So this is automatically a touched So the dinner source and delegate particle. So which is gonna allow us to then control the appearance of that collection You so using the data source methods, This is what we want. We're not gonna be using any delegate methods in that project, But this is just to show you so how it works. So then what we're gonna do, I'm gonna change. So the format for these collections you sell So one thing I must not forget because we have specified this one in our class is to also update here the item to fire. So we have named this one photo cell, so let's check again. So those to mess much So this is the identify air for each cell? Let's see. Yeah, those is the way that we have named it for the school. And then what I'm gonna do is changing the formats of that sell. So I'm gonna select collection view, and then we're gonna go to size Inspector and here I'm gonna bitch with 3 20 and to 44 the heights that's gonna be that wide. So that's gonna be slightly. That would be almost as wide as the parent view. And that's Libby with this site, so that's pretty high. So that's pretty big. So because I have provided with one color all right here, so we know that it's gonna be visible. Actually, I'm going to do something. It will be different. So I'm gonna allow to create, like, a greedy INTs as we go down for the downs of the collection. So I'm gonna shoot what I mean. So basically, what I'm gonna do instead of using, just read for the background color off the self of each cell. So I'm going to use in it and choose to initialize the colors using dysfunction, which is gonna take four parameters for the three Mariners decreed the cause or G B. So that is red, green and blue for RGB callers. And we also have 1/4 burner Internet to control the Alfa. So V capacity off the color. So here I've got red, so I'm gonna indicate so I want them to be read. So here, I'm gonna use to put one for the rest. It's gonna be zero. I am an zero for the blue. So we're gonna have a red core by just putting one for the red because this is a city flowed value, which is gonna be between zero and one in order to control the opacity. I'm gonna have it. I'm gonna have this one increase as we go up the number Upsell. So in our collection. So for now we have 10. So and I'm gonna do that by simply doing 0.1, so we're going to start at one, so that's gonna be almost transparent, then multiplied by the value of the index path and then the room and these value right here . So that's gonna be an integer which is gonna be returned. This one is gonna be increased as we goes through each cell of the collection. So that's gonna be like starting. So that's maybe you want to three starting with their oh, and that is going to increase and this value. So that's gonna be an insurgent, which is gonna be returned. And that's gonna be incriminated as we go up the number of cells. So that's going to start at zero than 123 until it's reduced, though the total number off rose that we have in that collection. So that's gonna be increased, multiplied by 01 So that's maybe also increased until it reaches one until it becomes fully opaque and become this is expecting afloat. So we're gonna need to actually rub this one in this function, which is gonna allow to convert. So this inter ginger floats let's see if that works. Okay, so the air is gone. So let's see how this works year ago. So you see that now we have a collection you and this is you can see So the color that are this is getting darker as we go. So you see, so the greatness of color. So this is getting darker as we go down. So the collection, because this is starting from one. So this is slightly transparent and its getting darker because the value of the Alfa is increased as we go up the number of cells that we have in our collection. But that was just to demonstrate. So what we have in that collection. And of course, we're gonna use images in order to display in that collection before we create the three D touch effects. 3. Photo Class: so we know it up to you. Work with the sense that we have in that project. So we're using images. So we have about, um, six. That's cool. And what we're gonna do electrically work with one model. So that's gonna be one class one specific class that I'm gonna use in order to create an object which is gonna include the name off the foul than a caption and also the city. So the locations, so the same following the example off, maybe your gallery of images or feed of news that you'd have supporting the example of Instagram's or something very similar you'd have, like, the images and a caption attached to that image. So I'm gonna create that by having one model. So I'm gonna do I'm going to create and you fell, and this one is gonna be up type. So that's gonna be is gonna in your it from the Ennis object class on gonna call this one photo as simple as that a year ago? And then I'm going to define the attributes for this new class that's gonna be first. I'm gonna put, um named. That's gonna be of type string, then we're gonna have caption are made a type of here. And finally, we're gonna have also been location. We could have the time as well. So let's say that you'd actually So let's say that you'd actually display images that you would have taken using your Camerons who also register the date and time. So when you took that photo, so then we're gonna initialize, so that's gonna be with in it, and we're gonna initialize. So each image is so with the name so that the caption And finally, the city locations that could be the country or the city, anything or even not along you should like. So then we're gonna sign, too, the attributes of the class. So which ever value that we got. So let's start with name. So we have above you that we're gonna pass as an argument here. So at the time of creation, off a new instance, then it's gonna be caption and then name, and so it's gonna be location, and that's gonna be but my bet I just typed name twice. So that's gonna be actually that is gonna be actually caption here. Okay, so that's done. So we've got our model. So that's gonna be how we're gonna initial lights of a new instance off this class photos. So to create a new image. And we're going to do that actually, in our photos collection view controller. So actually, right here, let me go back. I'm gonna start by having here one collection global, which is gonna take, um, images. So actually, that's gonna be images. And I'm going to start by creating here a global variable, which is gonna be I'm gonna name it photos. And that's gonna give collection, which is going to take them objective type photo that we have just created. And I'm gonna initialize this one. And here it's gonna be object off type photo. Let me remove if you think because any new clothes that you're creates so which is a subclass all of apparent class like photo, which is a subclass of apparent class like you I collection view, controller or table of you control, for example. So it comes with some boilerplate codes and commence that you can comment so this is already set up, so you can also remove them. If you don't think you're going to use them here as well and then actually remove this function we're going to use the navigation, actually is. No, actually. So let me just remove the comments year ago. So we're gonna couldn't figure this one then then for the delegate method. Actually, we're gonna be using them at all. So I'm just gonna remove them altogether just to leave some space so it looks nicer and clearer for us. Okay, let's go back. So we're gonna have a function that we're gonna use to creates all of those images, put it here at photos That saying actually, we're gonna use. So that's all of images that we have right here. So first we have canyon, then we have concert. Then we have gsp so that use for Empire State Building, they have a lion. So May's actually from 19 and then we have what? You my bad. So I've kept the name in French, but that should be car. Okay. And now what I'm gonna do is creating so a new object. So that's gonna be that photo. I'm gonna need to actually loop through that array. So that's gonna be four I that's gonna before I inquiry and something I should have done. So what I latest who creates right away a new objects image for every object photos. I'm gonna go back to my model, and I'm gonna change this one too. Image. And this one is gonna be off type you white image. And the caption is gonna be actually through the names of whichever description that we want to provide for that image objects. So here, I'm gonna change. I'm gonna beat this image, and that's gonna be here. Image. I am G, for example, just with the of type ey image. And then I'm gonna sign I am g to image here ago. So that's gonna be the change that I'm gonna make instead of having just the name I'm gonna create right away another object which is gonna be of type y image that's gonna be then parts off the new instance off the class photo. Let us do that instead. So then what? I'm gonna Jews creating. So you a new object photo that's gonna be with the class photo farrago. And then when you press the new promises, so you're gonna have this constructor which is gonna allow you to create a new instance with the basics with the parameters that are image I am G caption and that location. So let's do that. So first, we're gonna have So So the 1st 1 is gonna be king in, so I'm gonna do you image right here. That's gonna be, um, so inside, you're gonna have you on image like so and then we're gonna open the names, and then we're gonna use I in order to create the image than a year ago. So we're gonna close then with another purchases. So I'm just gonna cook that and go back because I'd like to keep my initial Isar like so. And then I'm gonna pass so all of that to create the new object. And I'd rather actually pass because I'm gonna need to use so the name of it it shows okay , Like so And then instead, what I'm gonna do is passing. So the extension PNG And for the caption So that's gonna be so. Whichever we have here, that's gonna be you're gonna use also the quotes, and then I'm gonna use high. And then I'm gonna use also capitalized. That's gonna be again within. I'm gonna wrap this within furnaces and then I'm gonna then use capitalize on, you know, that's not gonna work. Eso that's gonna be okay. My bed. So whatever function that you like to use a method that you'd like to use on this global variable. So we're gonna need to do it inside the interpretations in tax introduced to capitalize of this word. So each object string objects that we're gonna use to then initialize for a caption. Okay, so that's gonna be will be trickier for the location. So I'm just gonna put I'm gonna need to, like, let's say that normally you'd actually have something which is more automatic like your, for example, down with the data from the Internet, Then that makes more sense, because then you get it from a key, but here instead. So that's just for the demos of what we want. Anyways, to create the three d touch effects, I'm gonna have actually another array. And so that's gonna be locations. I'm gonna do that quick. So here it's gonna be a Kenyan. So that's gonna be I think it's Nevada. You had a U S. Than the concerted was somewhere, let's say Berlin, Germany, and Germany like So I haven't still burning with the cap later and also in Nevada. And he is visa, that is New York us and then Bryant. So it's a This is like self quick camp. These so many were going to say that this is a nickel and this one So what you So I think if I remember, that was something like from Cuba. Okay, so my bad. So that's something that normally you'd get like, more dramatically like, which is more dynamic. So instead, so we're gonna do is then excess So whichever location that we want to point to buy, then referring to locations this one and then passed I entered it to get the index position that corresponds to the same in exposition for that hurry OK, and here so we've got an air. So it says cannot subscript value of type string with index with index of type string. So here the confusion is that we're using this local variable, which is I which is clear to Swift X code. So we understand that I should be like the local variable which is gonna be used then refer to each objects of one after another arrest here. So it's doing the same. Except that this is nuts referred as an integer. So I is not in index, which is gonna be in corrected, just like the example off a loop where you'd increments been initialized. So what I'm gonna do instead is creates and index here, which is gonna be equal to zero. And then I'm gonna increment this one because that's gonna be, like working like a loop anyway. And then I'm gonna use Index to look through its object in that locations because we're working with through separates local collections here. So I think I may need to confirm this one. Maybe. Oh, my bed. I forgot to put like this was a constant, and I need to, of course, dated. So it needs to be a variable. Okay, so I think that should be fined this time. So instead of just using this I local variable ruin it, we would need an objects which is uptight, integer to actually refer to one index position. So that was the trickiest part years. And now we're gonna be able to add every new code object to our photos global variable. That's going with a pen and then photo a year ago. And finally, what we're gonna do is call this function here at Fido's. And what I'm gonna do is just for now, I'm actually going to use a break point just to make a demo, just to show you that now that we have done this burnt, we're gonna be able to then have object in our photos collection array. And next, what we're gonna do is to display them in our collection of you. So I've used a break point to stop the execution of the program so I can now inspect what's going on. So with my object, and here it goes to now, I've got six values. We're gonna be able to go through them. So the 1st 1 so that's gonna be here. So Kenyan capitalized on the location I look like looks like it's not really what I was expecting here. Oh, and I know why. Actually, because this is starting from is starting with one. So my bad. So I'm gonna need to correct that. Berlin, Germany. Go on Each time. This is burning Germany. Okay, so anyway, we're gonna fix that in the next video. We're going to see we're gonna need to do a few fixes 4. Displaying Photos: Okay, so we had stopped in the last video so before we can actually working, displaying those pictures. So we just wanted to fix something that I've done here. And the funny thing is that I've created my variable so inside that collection, and it's actually not right because we're gonna need to initialize this one. So outside of that group, otherwise it's gonna keep being initialized, starting at zero each time. So that's why it was actually just stopping. So it was just sticking to 1 to 1 the position of one. So instead of that, we're gonna need to initialize this one so outside, off the for loop. So I'm gonna initialize this one. So here outside, just so it's clear. So we're gonna have an index, which is gonna be initialized zero and then for the loop. It's gonna be then incriminated. So as meaning times that we have objects in that collection array here, and then it's gonna be corresponding to the position here, starting at zero. Would like it to started zero, actually. So I'm gonna put, um, it's gonna be I'm gonna actually chits to make sure that it started. Zero. I'm gonna allows with this one to increments. So actually here, right here. So when it's done this part so first it's gonna create the object, then it's gonna pen, and then it's gonna be then in commented in order to start against so as a loop. So instead of having the implementation here because it's gonna go straight to number one and display Berlin, we're gonna allow this one to start at zero energy to then stuff at Nevada because that's gonna corresponds to the location for Kenyan. Let's try that. So we're going to stop the execution So right here a year ago. So this time we should have so, like the rights information. So you see, we've got our collection photos. So here we've got Canyon than the location than concert Berlin. He is before York, and so forth. Number three that's gonna be lie on South Africa. And then So maybe that's gonna be Nate Powell soul. I just guessed. Could be something else. Another location. And then we've got what, two, which is in Cuba. An old car. Okay, so we're good to go for the rest. So, like me now continues, I'm gonna just You're going to turn up the break point. But I simply clicking here to deactivate break points here ago. And the thing I wanted to show you as well is that now we have an image for each of the object. So that's good, because we're going to use that in order to display the image, Purcell. And we're going to need to create a custom cell in order to do that so it doesn't come automatically. So we're gonna go back to the story board, and first of all, we're gonna need to create the class. So we're gonna go back to here. So the route part of the project and two quick rights and this time it's gonna be a class which is gonna be of type you. Why collection do you sell? What a copious one photo. No ists. I'm gonna touch this one. So here, this is our collection of you sell custom. When I touch this one too. I'm gonna go here at this level, you actually hear photo cell and then touch this one. So using So the identity inspector. And that's gonna be photo collections you sell here ago. So now we're gonna be able to add a new objects to that collection. Do you sell? So that's gonna be a U Y image. I'm gonna add constraints for that image. So it covers the entire within heights off the parent here, which is gonna be the sale. So that's gonna be so, actually, let's go to the document outlining. You're going to see that. Now we've got an image. You inside the photo cell, okay. And we're gonna create right away an outlet for that. So let's begin with the constraints a year ago. So that's gonna be zero on each side, and then you can click update firms. Next, we're going to create the outlets, so I'm gonna make sure to have so the collection view cells. So the custom collection you sell on the right so I'm gonna keep my finger on option and then click here ago. So now we're gonna have a view on. You're so and on the right, your photo collection you sell. So we're gonna click on the image, and then drug over been release, and I'm gonna call this one photo image. You. That's it. And now So I'm gonna go back. We're gonna go back to the photo collection view controller we're gonna use again. Standard Editor. So that's gonna be just one of you. And here we're gonna configure the cell. So it's gonna be of type as photo collection. You sell, you see, So we're going to remove that. So we just need to confirm. So I'm just gonna put that in commits so we can keep that. Just so, in case as a demo but for now sober and are gonna use any color this time, it's just gonna be for the images, although we could keep its. But instead, I'm gonna use of this new party that I have created, which is photo. It doesn't seem to come up no photo image view. So let's go back. Um, main storyboard sort of self. So I know that I have attached this one in the items it inspector. Good collection of you as well. Okay, So what I'm gonna do is just simply type it and I'm sure that it's gonna recognize actually afterwards. That's this is Barto. Here we go sometime. It doesn't article bleak for some reason. Never mind. We won't need to create. So let me ask you to see the air. Yeah, but that's fun. Okay, so we're going to do now is allowed to then display an image for itself. So the same that we have created. So each time that we have created. So when objects for that collection of pictures photos. So first we're gonna have here an object, which is gonna be photo. We're going to refer to the index pass and then room, and then we're gonna be able to refer to each photo object and the image priority of this one, which is already off type image. So that's good. Okay, that should be fine. Did see what's going on here. Okay, so that's gone. Okay, Sometimes it has weird things. So also the good thing that you could use just closing the project and then open it again. So just in case that you have bugs like that, it doesn't recognize a class more, it doesn't recognize a new class that you have just created or anything else. OK, so we're gonna continue, and this time, So what we want is to be able to display. So if the images in our collection view Okay, we've got an air here, so let me see, we're going to read in order to debug this one. So let's go here. Could not value off type collection of you sell to pick and pop floor collections yourself , Okay? And I think that the problem is coming from For some reason here, you've got this registers sell class, which I think is actually not necessary. So what I'm going to do, I'm just gonna put it in governments because I have already came across. So that kind of issue and the solution is just to put this one in comments. So I'm gonna try that and then run again here ago, an air. And that's because here ago. So what we've done is off course dynamically. We have dynamically rendered the images you're using. So our collections, but I'm gonna need you also specify the number of rows based on my collections. To hear what I want is to have as many items that I have objects in my collections. Otherwise, it's not gonna be in sync. So it's gonna be photos counts of that. Richards. An interview as well in order to specify the number of items that I want in that section. So that's gonna be one section, then as any items that I have objects in my collection, which is gonna be photos. So this is a total of six, which could be also 1000 and that's gonna be dynamically rendered. And then finally, we're gonna displaces the image for each object photo. So let's try that again. And this time it's gonna be all good. There you go. So we've got our images all the way to curso, which is for Cuba. So next we're gonna then display the caption for that image that's gonna be in the next video. 5. Displaying Caption: so far the caption. So I'm gonna choose to add another objects on that cell. So in order to customize this one, so it's gonna be simple, but that's gonna be simple. So I'm just gonna sit like this one, actually from here, and then we're gonna go to the object library, then select label. We're gonna drag this one over, like so, and we're gonna make this one. So stretch. So along. So the entire with off the cell, the prime view, and we're going to specify also heights. So let's do that. Using constraints, that's gonna be zero from the bottom zero for left and rights that suits. And for the height, we're going to specify something bigger, like maybe 35. Gonna try that at for constraints. I think it's fine. So I'm gonna confirm and we can also change. So if you want to adjust, maybe I could make it so a little bit tired for the height. So I'm gonna go to the size inspector than instead of 35. I'm going to change to 45. I think it to get your 45. It's good. Then we're gonna go back to attributes, Inspector to align in the center like so and I think that's good. So I'm gonna change also the background color that's gonna be whites, and that's gonna be slightly transparent. So we're gonna choose Let's go back to other. So the color and then all there, then he we're gonna have the capacities. Then you're gonna move. This one has left this lighter in order to decrease the value of the opacity. So that's gonna be slightly transparent here ago. And then we're gonna keep the color I'm gonna change to actually Dark Gray instead of black . I'm going to select Dark Grey like so So next. I'm gonna then remove the label because that's gonna be also dynamically rendered. Remove that. Then we're going to create an up puts, and this one is gonna be created. Support the custom Selves. So I'm gonna have this one on the right to displayed on the right, So that's gonna be this one. So I'm gonna press option, then click in order to display this one on the right looker, then control and drug over to the custom sell close. I'm gonna make sure that I select the rights element here. Ah, Yeah, that's good. OK, and here ago, we're going to create a new label, and this one is going to be four caption. Yeah, that's it's so now that you've got that, so we're gonna have an extra attributes which is gonna be available for every cell object of type photo collections you sell. So let's go back to our collection view controller. So here, what I'm gonna do is then So I sell caption, then text because this is a label. So I should have called. This one actually captured labels its more descriptive off the type of objects that this is . But that's fine. And then we're gonna use photo and then caption year ago. I don't remember this is actually capitalized. Yes, it is. So it's already capitalized so that we could have done also at this level, you know, we could have kept just omni passing I as a value string objects and then capitalized at this level. You could have done that, you know, also right here. Then choose to the ankle this method which is capitalized. So that's also possible. But we know that you have done it. So that's good. So now let's try that. And normally, I should need to, uh, unwrapped this one, because originally, this is an optional. But let's try without, you know, and here, So that seems good. I don't really need to specify to unwrap celebs like it didn't actually come with any optional mentioned. Okay, that's good. So next what we're gonna do So now that we've got so, like, the first part of our up, which is up and running, So what we want is to apply the three D touch effects so we can actually do along pressure on every cell, Every image on a cell entered it. You have a peek like a pop up effects and then displayed on the detail view control introduced to have a full view version. So that see that starting in the next video 6. Image Full View: so Internet you create So the three d touch effect to implement it and also be able to purview the picture that we select full view. So we're gonna need to also configure so another view controller. So that's gonna be this one. We're gonna be able to display this one. So full view. So you were gonna configure this one? So what we're gonna do that? That's gonna be pretty simple. So I'm gonna have we're gonna have a you I am a Jew, all right here. And this one is gonna be full with and then in order to get so one specific object that's we select. So depending on the index path, so the rows with index position of that collection So that's gonna be particular. So we're going to let photo, and then it's gonna be photos we're gonna do collection, Do you? That's gonna be like so, collection view. I'm just gonna get that's not these. Actually, it's not a method. So what I want is to get index path for the selected row selected items I'm in. And so what we're gonna do is then get so because we only have so one section anyway in that collection, So that's gonna be zero. And then it's gonna be as and expire like so And then we're gonna get So let me wrap all of that's in parentheses, and then we're gonna get the room position. So what we want, So that's gonna return That's going to reach him any next bath, an object off type in next bath. So I'd rather do that outside. I think it's confusing otherwise. So I'm gonna put let's index path great here. So let's remove all of that and then so pass index path and then get the rule. So the party index. So for every object of type index path, we can always access the properties zero and section. So here what I want is to get the integer so the index position off the photos collection, and that's going to allow me to then return. So the photo that was selected so by the wind gonna call this one selected, and then I'm gonna pass these to my to the destination view, which is the view controller. So that's maybe GVC, and that's gonna be sick with destination as if you controller like so And that's it. So we're gonna be able to then refer to that destination view controllers who each time that we select a picture to navigates to the other view to the destination. And I'm going to create a reference on that do controller, and this one is gonna be a type photo. So that's gonna be an object photo a year ago and back to the controller. I'm gonna make this one that's gonna be view V. C. It's gonna be photo that belongs to the view controller. And I'm gonna make this one equal to photos selected a year ago. So then every time that we prepared her sick way, So when you click on one cell, it's gonna go through that method which is gonna prepare for Segway, and then a sign the photo which is selected to the property to the variable photo of the View Control. So then what we're gonna do is go back to our view controller and we're gonna need to create outlets for those elements that we have on the view now because we have configured this one, although we have no way to control them programmatically So we're gonna need to create outlets. We're gonna use the assistant a teeter and then display the view control on the right. So I'm gonna click option, and then I'm gonna press option and then click on view controller here ago. So then I'm going to create an outlet first for the image you and this one is gonna be full image. You next, we're gonna have so the label and that's gonna be the caption label, and that's about it. After that, we're gonna have control that we're going to configure that later, actually, but for now, we're going to be able to have the image of the image selected and also the caption of the image selected. Let's go back to Standard Editor. So here, I'm gonna configure my image selected, so that's gonna be pull image you And that's gonna be the party image. And that's gonna be photo that I'm gonna need to unwrap because this is optional. And then I'm gonna use the party image. You assigned this one to the image of the full image view and also for the caption label. So that's gonna be text. And then I'm gonna sign. So the caption value I'm gonna also displaced for the self title, meaning that we're going to refer to the title of the view controller. And that's gonna be displayed on the navigation bar. That's gonna be photo. And we're going to read location. Okay, so that's about right. So now we're gonna test. That's That should be fine, Mr That. Okay, so let's click on it. Here goes, and there you can see So the full view, you've got the location and then the caption right below perfect. We'll have just selected the same one. But for some reason, this is actually passing. So the same objects, it's completely wrong. Actually, I don't think that this is working fine through this is actually passing the right information. So we're going to fix that in the next video anyway? 7. InindexPathForSelectedItems: Okay, so we're gonna fix something before we can actually continue. And here, instead of using this index path for visible item, it is gonna be actually for selected items, Which makes sense. Actually, it's kind of descriptive of what we want is to get the index pas for the item which is selected. Let me see what I need to confirm here. And I guess it's actually it's more like a bang to unwrap this one. Okay, so we should be good to go. So we had. So the navigations controllers so the back and forth we could navigate to the destination. So that's working just fine. But just the problem was that we're not selecting. So the rights image to pass through the view, the destination, and I think that now this is fine. Okay, Cool. So that was just one quick video to do a quick fix before we can actually continue. And this time work on integrating. So the three d touch 8. 3D Touch: because And now we're gonna take your off the three d touch story in order to implement that. So we're gonna confirm to one protocol, and this one is your eye view controller previewing delegates. So we're gonna preview. We're gonna allow to do a long pressure on every cell that we want to select in order to have a preview, which is gonna be like a snake big. So that's gonna be the pop up. And then when you keep pressing, so that's gonna open this one So full view, and then we're going to go and then we're gonna go to the destination view controller. So that's gonna be you, I view. So you I view controller actually previewing delegates. This one? Yeah, this is something that has been included. So since BIOS line, So this is available for devices, So iPhone six and plus on higher. So iPhone six s cetera, and we're gonna need to check if we actually have one functionality for the iPhone, which is the force touch capability. So we're going to check that first, and that's gonna be with if Trump's collection force touch capability and we're gonna check if this is available, And that's gonna be if you actually check this thing. So with your iPhone, So if you check if you tried with your iPhone five, it's not gonna work. So you're gonna need an iPhone six in order to get it to work. So, of course, in the simulator using iPhone six and now iPhone seven is gonna work, we're gonna be able to display that in two seamer later. But just so you know, if you try that from your iPhone and this is not an iPhone six is not gonna work. So then we're going to register. So for previewing and that's gonna be with eso. I'm gonna put self. So we're gonna do that from this view controller and then the source he was gonna be this one, which is gonna give you So we're done with this part. Next, we're going to need to implement some delegate methods. So we're going to do that at this level. You see that this is giving you like an air. That's because we haven't confirmed yet to like the required methods of that. You have you control of previewing delegates, so we're going to go to their actually So let's press command and then click. So let's first come in and then go to that class protocol. So then we're going to implement. So those two methods so they are required, So we're going to copy them. So I'm gonna do come and see and then go back, and I'm gonna add one mark. So right below here, actually, So this one is gonna be you are view previewing. No, you view controller reviewing delegates. So here's that's gonna be the section where we're going to implement. So the two methods in order to implement the three d touch So that's based. So we don't need to make them public, so that's going to return. So for these methods on objects off type ey view controller and then for this one is just gonna be like the function it's not gonna be. It doesn't include any ricin type, so let's start with this one. So that's gonna be the longest to take care of, actually. So for now, you're going to get an error because this is expecting. So it has a return type, so as long as you haven't added this one, so it's gonna give you this error, Let's begin. So first we want is to then have a reference off the item which is selected. So that's gonna be with guard. Let's so first with guards of what we're doing is checking if we actually have an index path, that's gonna be indexed craft. Then from our collection view, we're gonna get so the item at this which is selected So the item at this index path So that's gonna be index path for item. I was gonna be this one. And for the city point, it's gonna be location. So basically, like it's working, just like getting the X and Y for that's object. So we're gonna get an else as well. So if we don't have so here, this is a guard's submitting that we're going to check if we've got an object first for that index path. So that's gonna be like a control flow. And if nuts were gonna return Neil so that's only if else. So if this is false, so else if there's no objects for that index Beth, we're going to return it nil. Then we're gonna get this cell for the item. So here is what we're gonna do a guard. Let's sell collection of you that is gonna be sell for item at in this path that we have specified right above. And then, if not, it's gonna be else on if else we're going to return it, Neil, which shouldn't be so we're always gonna get something and objects back. Whenever we said that something, you could see that every time we were clicking on the cell, we could navigate to the destination. So that's why next we're going to refer. So we're gonna then get the object and also use a guard just as a control flow. So that's gonna be we want to check. So let me put that everything. So, yeah, we're gonna keep this structure because gonna be a little bit longer. So first we're gonna check if we actually have a destination. Do you? Controller? So that's gonna BBC Bubi. See? And here's what I'm gonna do is we're going to refer to actually one that's gonna be storyboard, so a storyboard. Instead, she its view controller with identify where that we're gonna need to create, so I'm just gonna leave it blank for now. So we're gonna get back to it, and that's gonna be as of you. Control it. So, you see, we're referring to our destination view controllers. I forgot the let's because what he does here is doing a comparison. So, first, do we have something for this than if, yes, assigned to this by creating a constant object, and then l so that's gonna be the same. So if notes if there is nothing So we're going to return now. So what we're gonna do right away? What? We should have done so from the start. But I'd rather do things that by steps so we can understand. So we're gonna go back to the storyboard and then create an identity fire for this. Have you control right here? And we're going to do that, actually, right here in the identity Inspector. We're just gonna simply call this one. So I'm gonna call this one actually, full view controller, because that's gonna be for the full view. So let me copy that and then go back to photo collection view controller, and then here We're going to specify this. I don t fire. Okay. And here, So because this is actually you see, it's giving me an error. And the problem here is that actually what I'm doing, I am confirming that this is existing. Although it should be like an optional because we're doing first is checking if this is actually existing. So instead of using a bang like it waas, I'm going to change that to a question mark. So meaning that this is an optional first and then only when this is confirmed, it's gonna becomes you controller. Okay, so now So what we're gonna do is getting so the picture of that cell that's gonna be photo from our collection photos, and then we're going to refer to the index path. So we're gonna do that with this index path that we have created. So about that that's gonna be index past as index path. And then we're gonna access. So the real property to get so the index position Finally, we're gonna dent a sign. So to view VC because we have that objects, which is photo and then a signed photo. So let me actually change that to photo selected. Makes more sense. What selected? That's it on. What's left to do is that we're gonna need to create like because what we have Verso is like you're previewing of this picture that we select. So I'm gonna provide with a content size for these elements, and that's gonna be with CG size. We're gonna then specify a with and heights for this element that we're gonna create. This is gonna be like a window. Well, let me type this again to get, like, the constructor here ago. So that's gonna be floats. So I don't remember what we had. So I think it was three 2 40 benches, met with 300 and finally, So we're gonna then assigned to preview context source rectus with meaning that we're going to specify a with and heights for this cell. And that's gonna be cell framed. And finally, what we're gonna do is simply return. So the view controller on you see that we were expecting here in objects for the return time. So this is up type you I view controller. So we are returning the destination view controller here. Okay, so we're good for this parts the next. That's gonna be much smaller for this parts. What we're gonna do is using this function which is show and here. So we're gonna pass with this value, which is gonna be up type you y view controller. So that's gonna be view controller to commit. And finally, the center, it's gonna be self. So that's all there is to it for this method. So which is required in order to then implement the three D touch for these particles. So you live you controller previewing delegates. There we go. So let's try that. So we're gonna press, and here you go. You see that when we're pressed. So I think it works even better when you actually tried from a real phone. So device, this is giving you like a previewing, and then you can keep pressing in order to have, like, full view is like like pressing. And then when you're released, you're gonna get the full you and then you can never get back. So let's try with this one that's navigates. He has be so Empire State buildings where I'm gonna keep pressing, and then it's pops up, and then you get a release to have, like, the full view. Okay, so that's good. So the last thing that I'm gonna do is allowed to navigates so through this pictures and this place with the other images. So by just having control, So in the tool bars right here. So that's gonna be the last part of this deterrent. 9. Previous & Next Controls: So I just want to finish this to eternal by allowing the user to navigate. So actually from this year. So this is the full view, but allow the user to navigate. So either, I mean, by navigating, I mean, actually, so going forward or backward? So let's say that you have, like, lots of images, and you could from here. So from these, you navigates and go forwards to see all the images or go backwards, so we're gonna have to controls here. So first, this one I'm gonna add in all the ones that's gonna be Are you I Burba tonight, um, I'm gonna added right here, and it's gonna go next to the 1st 1 automatically. So in order to add some like, um, space in between, we're gonna use this flexible space bar, and I'm going to see that it's gonna push this one soul to the other side so and distribute like, nicely so to the two opposite site, so we don't need to actually calculate anything. It's gonna go here. We're gonna have left and this one on the rights and what we're gonna do with those two controls is first for this one So we're gonna use one system item type, and it's gonna be for this one every wind farrago. I'm going to select the one on the rights. Now on this one is gonna be, uh, fast forward here ago. Gonna change the caller. And actually, I'm going to select the toolbar and gonna change the color that's gonna be that. Say, I don't know if I should get also dark gray, and the religions like this is because I think it's translucent. So let's change. No, not like this. Not too sure. Oh, actually, I shouldn't have done from here. Let me go back to default. It's gonna be former here, Barn tens. Let's do that. And then uncheck translucent, and it's gonna be of the same color so we can try that. And there for the left one. So we're gonna change the caller. It's gonna be whites. And for the one fast forward, so right, it's gonna be white as well. Here goes. So next we're gonna create actions for those two controls. Let's make sure that we set of the view controller option and then click here ago where goods and then so just gonna to actions for those to control. So first here, it's gonna be My bets are not selecting the right element here. You see that? This is up type you I two birds. That's not right. So cancel. We're going to do it from the document outlined to make sure that we don't mistake. You see that with the toolbar. But then inside we want to select this one. So the left Barberton item going to control drug year ago, and now you can see that this is off type. Ey, Barbara, tonight, um and I'm gonna do, um, backwards go backwards, factions. And it's not an outlet. It's gonna be an action off type your bourbon item here ago. And now we're gonna create also in action for the fast forwards control. It's gonna be go forward action. Actually, we use those controls originally for you know. Oh, Georgia Plea o job. But we're gonna use that as indicators that you can go forward or backwards. It works as well, Visually makes sense. Okay. Okay, good. So now so we're gonna actually add actions to those. Let's go back to the Standard Eater back to view controller here ago here. And what we're gonna do so I'm gonna love you, Actually have the index position. So whenever we pass, So whenever we go to the destination, we're gonna need to have the information off the position of the image that we're at. So meaning that when you select one so you're maybe at the position one or two in the collection and based on that, we're going to know So which image to display, which comes next in the collection. So for that, we're gonna go back to the photos collection view controller and allow to pass the information of the index bathrobe and let me go back. Few controller here, I'm going to get here a global index, which is the the up type. And and that's going to be a global index indication as to where we are in the collection and entered it to get it first back in the destination, we're gonna then pass of UBC index some. Yeah, that's index Index, which is gonna be cool too. Index spot and then room Perego because we've got the index path here. So this is enough information. So we just passed. Actually, we can access. So the property row to get an integer. So that's trying. That's actually what we're gonna do. It's first prints the information to begin with, and I'm just gonna print something like road selected equal to index. And because that's an optional I'm gonna and Rapids. Okay, Perego. So let's try that. Okay? I'm going to select this one. I didn't need to press you see, so you can go straight without actually having to have, like, the three d touch a year ago. You can see that the row selected. So that was actually zero. Then let's try for this one, which should be one a year ago and then so forth. So now we have a reference to the position of the image that was selected before we go to the destination. So what we want is to then be able to increase for a decrease this value so we can then navigates inside the collection and then display the next or the purpose image in that collection. So we're going to do that by using some logic and what I'm going to do. I'm gonna have a functions for each of them. Actually, I'm gonna have just one function and this one is going to be Ah, here. We're gonna write it years and it's gonna be function. And I'm gonna call this one change image, and this one is gonna have, like, come, we're gonna use a string as a burn. I'm gonna show you why. And I'm just gonna put direction. No, My bet. So that's gonna be I want to name this one direction because I'm going to specify So the direction if this is actually next of previous and that's going to have type string and basically what we're gonna have here, So we're gonna have a logic, and that's gonna be if and house and that's gonna be even else. So if ah direction is equal to we're gonna have forward. And also that means that this is gonna be backwards. So it this is forward. So what we want is to then increase named exposition in order to move forward, meaning going to the next image. And then I'm gonna then increased increments by one any. This is backwards. So we're gonna then d Crimmins by using minus and equal. So what we're doing here. So this is a combination off, discriminating and assigning so meaning that we increments the value off index and then reassigned the new value minus one to index. So we're gonna have a new index for that's before the collection photos. And I'm gonna need your unwrapped, This one, actually. So I'm gonna put a bang because this is optional to start with. And the other thing that I'm gonna need because what reduce? Besting only one objects. We're gonna need to have the complete collections. So we can then refer to each photos one after another, which is gonna be of type. So that's gonna be a collection that takes photo objects. So I'm gonna do it like so Because that's gonna be an optional first. And then back to our photos collection to control. We're gonna pass too few Veazey, the entire collection, our photos. Let's do that. Okay. And then at this level, So back in the view controllers, So we're gonna then refer to photos, and that's gonna be photo. It's gonna be photos were gonna then reassign. So and you value to this photo priority, Hugh Variable. That's gonna be photos and then passed index in order to then refer to the new index position of photos. So if we want to go, so if you want to go to the next it's gonna be then the next and that's because that's an optionals. We're going to confirm that here as well a year ago. And because so we're going to refer to the next index position. So then we're going to be able to them display the next photos in that collection. And basically, what we're gonna do is do exactly the same here. We're gonna take all of this, and I'm gonna do it at this level because whatever. So meaning that here we've got some logic. So that's gonna be based on the direction which is selected. So that's gonna be either forward or backward then. So whichever direction is selective, we're gonna then be able to de Crimmins we're gonna then be able to increments for D Crimmins and then signs of the new photo information to full image you caption label in the safe title as well. So I'm gonna do the same right here at this level, and actually I would need to do all of that. I can just do it right here. What I need to do is just for the logic off the index either, um, incriminating or decree Menting. That's gonna be right here. And we're just gonna eat that to the even. Also, that's going to be either plus or minus. Okay, so here's up. So that's gonna be our function here, So that's going to change image. And now we're gonna call this functions of from the two actions, so that's gonna be here, change image, and then we're gonna pass. So if this is backwards, so we're going to read backward, and I don't need to specify it right here, because if this is not equal to Ford, it's gonna be this block of code which is gonna be automatically executed, so we don't need to specify it. And, of course, if we select the action, if the user clicks on the forward action, so it's going to read, It's gonna take were so we're gonna pass the value forward as an argument so automatically we're gonna then increments the index. So let's try that. So we're gonna go to this one first, let's change, and here ago we can then move or go backwards. Oh, there, we're gonna have a problem here because we haven't specified any logic to check if we are outside off the range. There you go. You can read that. We have index out of range. So we have to add some logic, you know? Did you check if we are outside the limits? We need to add some logic to check if we are still within the limits of that collection to check if we're not out of range. So if this is more like, you can see that if we keep incriminating So we may be well outside the number of objects that we have inside that collection. So that's gonna be very similar to the gallery in match project that we've done together so you can actually see how we're gonna proceed. So what we're gonna do here is, before we actually increments this one, we're gonna need to check if we are, like, more than the number of object that we have in that collection. So we're gonna do that by doing if index is equal to photos counts minus one, because the actual objects, because the actual number of objects is gonna be actually more than the index position. So we're gonna need to because it's zero index. So we're gonna need to check a first. We are, like, at the last position limits off the collection. So if we have, for example nine object, we're going to check if the index is not more than eight equal to eight. So in that case, we're gonna make them the index equal to zero to start from the beginning. And this is only if we're still within the limits of that collection that we're gonna increment, okay? And we're gonna do exactly the same for the other way around. So going backwards, we're going to check if the index is equal to zero to then allow So the index to So that's with this one. So right here, because this mean that we're still within the limits or we are able to de Crimmins So this mean that we're still within the limits. And for this one, we're going to check. So if this is equal to zero and then allow this one to be to go back to the last one, so to go in circle and that's gonna be photos, accounts minus one, meaning that it's gonna go back to the last one to start over, not to starve. I mean, to go in circles. So if you're equal, So if you're at the first picture, so then you're gonna go back to the last one, so it's gonna go in loop. So this time we have added some logic to allow so that making from this one, because this is an optional your words well, and that should work just fine. And here what happens is that it doesn't know the index yet. So it's not happy, of course. Well off or that was just for a demo. But let's say that well, you would have to pass an object before you can, actually, because right now you're just reviewing it, so it's a little bit confused what you do. It is also a guard. Let's. And that would be like index, some Bordeaux index that would make equal to, uh so that would be so. Then that would be index index right here and here. I want you know, I'm gonna have to use an reflect because otherwise it's returned, Neil. Okay, so let me instead use it if let's if. Let's put Index, which would be cool to index, and then we're gonna prints, and we cannot, actually, But this one is a bang, because this is you see, that's gonna be as into Jer. So that's an optional first. And then we're gonna then print this one, so only if this is available. So I think it's still wants a bang, because this is an optional at the top right here. And then let's see what's not correct. Okay, It wants to check if this is not real. Okay, that's Particulate because we're working with one optional here, okay? And then this one, I don't think we're gonna need to. Okay, that's that's actually a little bit different. So what we do is checking if we actually have an index. And in that case, if Index as it is not kneel, then we're gonna print Index. Okay, that's silly Particulate So let's proceed that way. I always succeed, so I don't need to put if Index McNeil. So let's remove all of that, and we're gonna do if index like, so not kneel. So this one is to check if this is not nil. So if this is not nil, then prints the following okay here ago so that's much more simple as its index. What else again? Always returned true. So my bad. Because this is optional. So let's remove it. Because it doesn't make sense. Because now we're checking it. I'm removing the bank marks. So this is only here that we're confirming. It's OK, let's run it this time, it shouldn't crash. So when we do so the pop up check, okay? Here ago. And then we're gonna go. I want to go to the full, you know? So I need to keep pressing here ago. So now we are on the full view, and again we're gonna navigate, so Oh, my bad. OK, so I wanted to check if actually photos counts minus one. Oh, Okay. Okay. Okay. So that's a good demo. Because what we're gonna do, OK, I am sorry. So you know what happens here? So we don't even need that. Let's go backwards. But that's good. I mean, riches during that step by step, so off course, because now we're dealing with a different delegate protocol. So what it wants here is to specify so all of this also and that delegates So when we create So the preview context. We're gonna need to specify to this right here. Also. Obviously otherwise is not going to know, because now we're using a different way of passing. So, from so the source to the destination Well, that's my bad. So I was just I didn't actually, um, no, that you had to also specify these on top of these, prepare for cigarettes, and now it should work just fine. Put the final demon Jericho, Mr Reagan. Then we can pass to the next and for the logic that we have put in place a swell. So we can then go in circle and it doesn't crush. So we can also change, You know, the content mode of the image because it looks a little bit distorted. Let's select the image, and we're gonna go to, um, against elect aspect feel so it's not gonna distort the image. You don't. Oh, my God. I just wanted to do three touch and the hair go, cuz me just looks way better. Well, you'd have after two. Just I mean anyway, that's for the demos. So feel free to download more images from and splashed outcome, if you'd like. These are role to free images. Good job for this tutorial.