Image Slide Show



The course is part of this learning path

Start course
2h 13m

In this course, we're going to create a Snapchat clone using structs and various advanced techniques of Firestore.


Hi, within this lecture, we're going to see how we can have an image slider in our app so that we can display all the snaps inside of our SnapVC. So, that's how I did that. I went to Google and I googled for horizontal image slider, not in android but in iOS Swift. So, as you can see, we have a lot of options over here, so it's very easy to work within a library in order to create an Image Slideshow. So, I went for that one. So, this is called Image Slideshow and it's very easy to work with this Image Slideshow. Of course, I'm going to share this URL in the resources video, but you can just google it and find it yourself if you want. It's very easy to bring this in and it's very easy to load the images. As you can see, it has a pod. So, let me bring in this pod so that I can explain how to use it while it's being installed. So, let me close this down and let me open the terminal one more time, okay? So, let me make this a little bit bigger because it opens very small actually. So, I believe that's okay, so let me go to Downloads and iOS complete and Snapchat Clone and over here I'm going to pod install because we have already edited our Podfile. And over here, you will see some documentation related to this Image Slideshow and one of the greatest features of this is that they actually provide us ways to include images from the Internet as well. So, this is not only for the images in your own project, you can actually use Alamofire, you can actually use SDWebImage or Kingfisher in order to download everything from the Internet and display them in this Image Slideshow. So, I am going to go with this KingfisherSource. So, we already have SDWebImage in our own project but this is another pod, so we have to go with another pod over here and I have tested to see that SDWebImageSource does not work properly in this case. So, copy this pod name as well and open your Podfile, okay? So, other than Image Slideshow, I'm going to bring in this Image Slideshow Kingfisher as well and this will bring in the Kingfisher pod itself as well. So, now we have two image cashing and image downloading, asynchronous downloading image libraries in our app. But I believe that's okay, so you can just eliminate the SDWebImage and go with the Kingfisher instead. But I'm going to leave this as it is so that you would know all the options regarding to this image downloading assets and tools. So, when I run pod install one more time as you can see, Kingfisher has been downloaded, now we are ready to use it. And there is a great documentation about this, I'm not going to show you the documentation, I'm just going to write it so you would know how this works but I suggest you go and search for the documentation to see the other features of this image slider as well. So, I'm going to bring in this Image Slideshow and we cannot use main storyboard to bring an Image Slideshow to our ViewController but rather we're going to create this Image Slideshow as we did in the layout section, okay? So, we're going to use the same technique to create a view and add this as a sub view inside of our ViewController, okay? So, I'm going to use viewDidLoad in order to do that and of course, we can check to see if snap is here or not. So, I'm going to make this selected snap non-optional as we did in the selected time, and if that's the case then I can get the related information from snap like snap.imageUrlArray. And if I go into a for loop using this snap.imageUrlArray, I'm just going to have this individual image URLs inside of this image. So, let me call this imageUrl so it will be more explicit. So, now I have all the imageUrls here one by one and I just want to display them in our image slider. So, let me create my Image Slideshow so you would know how to do it. First, I'm going to create a variable and I'm going to give it a size, give it a position so that I can have it on my view. So, that's how it goes. Let me call this ImageSlideshow and this will be a type of ImageSlideshow. Okay, this one. So, once you do that, you can open parentheses and it will ask you for a frame. So, remember this frame when you say CGRect, it will ask you for an x and y coordinate and also a width and size within height sizes. So, let's do that. Open CGRect and choose this. So, it asks you for an x, y and width and height. So, we're going to actually stretch it all around our ViewController. So, I'm just going to say 10, 10 over here because it will be stretched out to all the width and all the height, so I'm going to call this self.view.frame.width and maybe multiply it by something like 0.95. Okay, so it will stretch out all the way to the edges, okay? And I'm going to do that, do the same thing for height as well. I'm going to say self.view.frame.height and I'm going to multiply this by 90%. So, if you haven't watched the layout section where we define these views by code, I suggest you go back and watch it to see what I'm doing. And over here I'm going to say ImageSlideShow.backgrounColor and I'm going to give a white color to its background, okay? Later on we can just give some indicator to this Image Slideshow as well, I'm going to show you how it's done but now we have to work with the essentials to see if that works or not. So, I'm going to say ImageSlideShow., and here I'm going to specify the contentScaleMode. This is like the contentScaleMode in image views, right? So, you can call UIViewContentMode and we have this aspectFill and aspectFit in this case. So, if you say UIViewContentMode.scale, you will see scaleToFill, scale to aspectFit and that's what we want. Remember we have always used this aspectFit in our UIImageViews and that's what we're doing in here as well. Later on, let me just call self.view.addSubview and add this to our view so that we can see if this works or not. If this works, I'm going to beautify it later on. And here you can see that it has a set image inputs method and it's asking for some image sources inside of an array and that's what we're going to do in here. We're going to use this KingfisherSource in order to provide these image inputs. And we already have our URL strings over here so that we can just say ImageSlideShow.set and give some input array over here. In order to do that, I'm going to create my input array as a variable over here, okay? Over my viewDidLoad. So, let me say inputArray and this inputArray will have KingfisherSources inside of an array so that I can come under my for loop and I can append everything inside of my inputArray. So, I'm going to say append and I'm going to call the KingfisherSource and it will ask me for a urlString and of course this is imageUrl. So, in this for loop, I'm going to append everything to my KingfisherSource array and let's force and wrap this, okay? And then later on I'm going to give this inputArray as an image input to my Image Slideshow. So, that's it. That's how you create an Image Slideshow. So, let me run this and let's see if this works or not. If this works, I'm going to go ahead and beautify this a little bit more. So, it's taking its time because we have brought in some new pods. So, let's see if we can see all the snaps from James Hetfield. Okay, let me click on this. Yes, it opens and let me try to slide, here we go. Now we see all the images in a slideshow. We have some problems though, we don't see the time label, I believe it got in the background when we have covered all this ViewController with our Image Slideshow and we don't have any indicators showing up. So, we're going to take care of that. First, let me take care of this label issue. If you want to bring some view to the front, you can just call self.view.bringSubviewToFront and here, I'm going to specify my time label, okay? So, let's say timeLabel and later on we're going to just give it an indicator. If you don't know what an indicator is, you will see in a minute, it displays where we are currently in terms of sliding images. So, you have to create this UIPageControl and this page indicator will have some colors. So, we have two colors. One for displaying the current page indicator, okay? This will be UIColor.lightGray. And two, we will have the other page indicators as well. So, this will be the current, not current but page indicator tint color, okay? And I'm going to give over here. And later on, I'm going to assign this page indicator to be my Image Slideshow page indicator, okay? So, let me just do it and here we go. Now let's run and you will see what a page indicator is and it will beautify our SnapVC a lot more, you will see it. So, once you open your app, click over here and here we go. Now we have this indicator indicating where we are currently. So, as you can see where we are is shown in light gray and the other ones are shown in black and our time label is back. So, that's very cool. We're going to stop here now and within the next lecture, we're going to test our app and we're going to improve our code if we come across with any bug.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics