iOS Swift: Creating a Carousel with UIPageViewController

hey what’s up everybody my name is Brian and welcome back to the purely Swift youtube channel and this is where I’m going to teach you how to write high OS applications using Swift so for today’s video we’re going to build a typical carousel UI component in our iOS application so let me show you what that looks like right now here you see the cute little puppy and as I swipe left you see the next puppy and I swipe left one more time you see the last a little Corgi puppy here and if I swipe back to the right you’ll see that I can just easily swipe through what we call a carousel this component is actually not that difficult to build Apple provides us with a UI page view controller component that we’ll use to make this happen so before I get into the code let me show you a diagram of what or how this actually works behind the scenes and hopefully it’ll make it easier for you to understand okay here we go here’s the diagram that I wanted to show you so do you remember way back in the day when movies were shown on projectors and everything that you saw on the the screen was actually in fact a frame on a long piece of film so that’s how I imagined this effect working and in this analogy the projector is our iPhone and the frame is actually independent view controllers inside of the UI page view controller so you can imagine swiping left on each frame or each view controller actually brings the film over to the left like this and the first swipe allows us to see fully frame one and then upon the second swipe we see frame two like that so that’s sort of how the effect works and as I swipe back to the right you’ll see the same effect but in the opposite direction so I like to think of this as kind of what we want to build and hopefully to be able to connect it to like a real life object should maybe make it easier for you to understand what’s going on all right so the next question is what do we want to build first and I want to focus on building out this frame object and it’s basically a view controller with a UI image view inside of the view it’s very simple so let’s go ahead and create that right now okay let’s hop right into Xcode and create our app so I’m going to use the single view application template right here call it carousel and create the project like so let me use the 6s simulator I’m just going to run to make sure that everything is okay see okay so pressing command 3 makes a simulator as small as possible and because I don’t need a storyboard for this tutorial I’m just going to go ahead and delete it like so and then I’m going to remove the storyboard made from that project setting and if we were to run the application right now the app would crash so I’m going to copy and paste some code that I have on another screen right here so these three lines pretty much creates a window makes it visible and then we create our view controller so that the app doesn’t crash I have another tutorial video that I show you step by step on why I’m doing this to set up a an app that doesn’t use a storyboard all right so if we run this app right now we’ll see I think a black screen and

there it is so I want to change that so that I get a white screen that and then there we go we get our view controller being presented as our route like that now let’s create our UI image view and add it as a sub child to the view and here’s how we do it in code skill aspect fit return IV like so so this is Swift’s syntax to execute a block of code here with the two prints and it will return this image view that I’ve created up here alright so I’m going to add this on to the view and by adding a subview like that I will be able to see it hopefully let’s just change the background color here like that and I’m going to add some constraints okay so so I type this out real fast and then hopefully I will explain what it does that’s okay so let me do this as well maybe it’ll make sense okay so this is saying on the horizontal axis this pipe represents the left edge and this represents the right edge and it’ll expand whatever’s inside completely so that it touches both edges in this case V zero represents our image view here and this constraint is exactly the same but instead of the horizontal axis we’re using the vertical axis so if I run that one more time hopefully we’ll be able to see our blue view but I forgot one thing which is to turn off the auto resizing masks so we see the blue image view and let’s import our first assets so I have an image of three puppies that I want to bring in so I’m just dragged from the finder into the petal like that and then we get Corgi zero Corgi one and Cory – let me set our image to Corgi zero so I can do all that within the block like so pretty simple hopefully nothing too confusing and I’ll run this to show you what that will do all right let me turn off the blue color because it’s a bit distracting run that one more time and actually let me change it to black on the view controller so okay so now we have sort of our our frames that belong to this kind of projector or this strip of film so let’s go ahead and build out the logic that allows us to move from left to right okay let’s go back to Xcode and then let’s create a new controller like this in a subclass you i paged your

controller and then we’re going to override view to load so that we can set up some of the views that we want to have as the starting new controller so that’s called super like that make sure to always do that and then see okay so I’m gonna do this to initialize our pager controller okay so instead of using page view controller we’re going to use our may use our custom view controller that we just created like that and let’s just rename that then we’ll use that controller as our main root view controller so running that application will give us a black screen again hopefully you’ll know why and it’s because of the same issue we we sort of ran into earlier so I convince you that this is being shown by changing the color like so okay UI page view controller command and click into that class and will see that it contains a property called view controllers this property contains all of the frames inside of its itself so that it knows which controller or which which internal view controller to scroll to and from so let’s let’s first set the view controller to show frame zero like that so set view controllers and then they’ll call you controllers like that and we’ll just create a view controller in line set it here and then set up a couple of the properties like that go ahead run and we’ll see that we’re kind of back to where we were a couple of seconds ago showing our very first view controller and you see I cannot drag it yet so that’s the next piece of the logic that we want to implement so how do we do that right we want to implement a protocol called UI page view controller datasource and command clicking in that you can see the view controller before view controller method and the after view controller after view controller method these these two methods are called to notify when upon sliding left and swiping right which controller you should see I’m going to implement the first of the two methods called view controller after view controller and then I’m going to also kind of stub that out for now I just return nil if we return nil here and run the application we’ll still be fine I believe so this is an important property that we have to set and we’ll just set it to self so I’ve just ran the application and I’m going to set a breakpoint in here and as I scroll to the left it should hit that break point in the

obligation just like that and because I’m returning nil it’s not going to render anything on the right you see that’s kind of how the page view controller determines what’s a show so how do we know what controller we want to show as the after view controller okay so first I want to be able to tell which index I’m currently on and in order for me to set up that type of logic I’m going to create an array first of image names like so then let’s see let’s call this frame view controller so that we don’t confuse ourselves so frame view controller right angles right that and then let’s set that there so I’m going to create a property on a frame view controller called image name and then let’s make a string like that this will be used to figure out which index we’re on and also to set the image on the image view let me show you what I mean there’s name equals let’s just use the very first string like fat and then so that I’ll take this very first one Corgi zero and set the image name on a frame view controller upon doing that let’s set the image name on our image view like this then remove the hard-coding that we just did so this bang tells the image name to unwrap it’s optional value and didset it’s called every time you just set the image name in this case line 21 does the setting all right if we run this one more time we’ll see that hopefully nothing has changed and there we are okay so figuring out the index value that we’re currently at requires this logic here current index equals so viewcontroller adds frame even color image name so current image name is that view controller is passed from this method and it tells us that the current view controller is here with that we know that the current image name is this and then let’s determine the current index like that so imagine we’re on frame 1 or frame 0 the current index will be 0 since the image name is corey 0 and the index of that is 0 so if we type out this logic here let me finish let me finish typing it and then I’ll explain names index created X plus 1 then we’ll return that frame view controller

because this method here expects an actual view controller all right now I’m going to run that and then show you what that does so let’s see it’s not working exactly like the way I want okay here is the reason why so we want to know if the current index is less than the image names minus one we’re going to produce a view controller that the application will scroll to you like so so this logic says let’s say for example we’re at index 0 and when index is 0 image count is 3 & 3 minus 1 is 2 that means where 0 is less than 2 so we’ll hop into this if clause here and then we’ll create the frame view controller and setting the image name with the next image which is Corgi 1 current index remember 0 so 0 plus 1 represents a quarry 1 and upon setting that we return that view controller to the page view controller and then it sets it as the next next page so you see that if we swipe one more to the right there’s nothing and that’s because the current index in this case is 2 and count which is 3 minus 1 is 2 and this clause is no longer true so we return nil okay so let’s perform very similar logic but in the opposite direction in the before view controller so I’m going to copy and paste a bit of code like that and then so we’re doing the same thing we’re getting an index of the current frame that we’re seeing and then instead of current index less than you just count minus one I’m going to do greater than zero and it’s then a plus one here I’m going to do minus one and let’s run the application so I’m going to scroll to the right nothing sore to the left we see the puppy we see the third puppy and then I could finally scroll back like so now without the before view controller intimated I wasn’t able to scroll from this to this and back to the very first page and that’s about it like I said this this topic aerosol component is commonly used in the iOS world and it’s pretty easy to build considering I’ve only written maybe uh not even 100 lines of code and yeah trust me it’s it’s very easy to build very seemingly complex components but once you get a hang of how the logic works it’s not that difficult alright I hope you enjoyed the video make sure to subscribe and comment okay have a good day bye bye