[MUSIC] Welcome back everyone. This is course three and we're going to talk about a few more advanced topics now or less. Starting by continuing course two on some UI, and sort of user flow related stuff, and then looking to some libraries that can help you do more things with your apps, such as downloading stuff from the internet, and making a watch app or even a TV app, which are all very cool, new, and exciting things regarding iOS development. In this lecture, we are going to continue on our filter app as you see here. It looks a bit nicer than before if you've taken course two, but the only thing that really changed is the addition of this icon that replaced the words before it. The functionality is all the same, you can still share, you can choose photos, you can bring up this menu, which hopefully looks better on yours. And you still have this nice photo here, now you can filter. So in this lecture we're going to talk about Scroll Views. As you see, this photo is obviously much bigger than it is displayed here. Right now, if you recall, if you look in our storyboard, in order to make sure we can see the whole image, we make this image view display images using Aspect Fit. And this scales down the image to fit into image view. And as you can see, since it's a landscape image, it's quite small here, and not the best experience for a photo editing app. What I'm going to do is put it inside a Scroll View, which is a view that is meant for displaying content that's larger than the screen. As you know, on the mobile phone, most content, whether it be articles or photos, are generally larger than the screen, and a really good way to navigate around that is to scroll, pan, and zoom around the content. So to get started, we're going to look at this storyboard. And if you didn't follow along course two, or if you want this copy of the project, we're going to provide that as a download. So go look for it as supplementary material and download this project as it is right now, as you see it. And first thing, we're going to look at this image view, and there's this cool trick here. So you could do it the standard way we've been doing before, which is come here to the object library, type in Scroll View. And there it is, drag it in, and then shuffle it around. Put it where the image view is and then drag the image view into it. We're going to do, but Xcode has something a bit more convenient in the editor menu and you should check out these menus, especially this one because it has some cool stuff. The one we want is Embed In. It allows us to embed this in a Scroll View directly, and even has Stack View and some other stuff into your Scroll View. That does, is it adds a little Scroll View around it, our view that we selected. You can select multiple and it would put all those views inside the same Scroll View. If you look at it, the view's already in there, but we have some errors now because it messed up our Auto Layout constraints. We're going to go ahead and fix that by, we're just going to constrain this scroll view to the same position that image was before. Just drag it in a bit here so I can constrain it to this bar down here. So we're just going to make it to 0 all around. 0, 0, 0, 0. All right, a bit more, which is this image view inside it. Since it has moved a few hierarchies, it moved into the Scroll View, its constraints have been, all been removed. So constrain that to the edges of our Scroll View with just 0 all around. Alright, so let's fix up these expected views etc., all these frames, this button's a little hidden here. That's all we're going to do for now. As you can see, even in the interface builder, this view is now bigger, even though it's still sized to fit. It can now, since it's inside a Scroll View, it's Aspect Fit. It's inside a Scroll View. It can stretch to however large it wants because the Scroll View essentially does not limit the size of its children. You can make it do that, but by default it doesn't. So even though the Scroll View here is this size image view, inside it is this size. And you can actually, so if you have a mouse wheel, if you're using Trackpad, you can actually scroll around inside Scroll View. So just select the Scroll View, see if we can get that to work here. It's not wanting to cooperate, but you can scroll within Scroll Views, in MidSpaceBuild there, maybe not within the images. So this image is actually, I can see it here, 1280 x 853. And if you remember, that's exactly the size that this image view is. Now, so what happens if we run this? Just, that was the only change we made, put inside the square view, and set up the constraints again. As you can see, it's full screen now, and actually, it allows you to pan around in it. That's pretty cool. Now all your images will always be displayed at original size, which is basically their best quality, and that's pretty nice. It even let's you sort of bounce around like that. And it has these indicators on the side for where you are scrolling. I'm going to say that those are not necessary. We're going to keep, we're going to, let's do this. Go to the Scroll View. We're going to remove the indicators since they're going over our image, and we're also going to set its background color to black. So when we bat, we see black on edges, and you can just run that, much nicer. Sorry. And you can scroll around, it has acceleration, everything is very nice. So you can see that was very easy, and already it works pretty well. I mean, it's still lacking one feature that we're going to do which is zooming, but for something like this as, in this example, it's image. Say you had a big label or a big text view with lots of text in it. You can just set it up and it will start scrolling through the text, which is pretty cool. And you have already used Scroll Views before now you just haven't realized it because table views and collection views are all sub classes of Scroll Views. When they have too much content they scroll. And anything generally now is that scrolls will be a sub class of Scroll View, such as text view. Alright, so we're going to do Zumi. Zumi is actually a bit more complicated than I feel it needs to be. In the Scroll View, there's a few steps here. First you need to set a min and max zoom. Right now they're both 1 which means you can't really zoom, so let's arbitrarily set it to 0.3. Okay, so you can roughly scroll down to, zoom to a third to three times the size. But the problem is if you just run that, it's not actually going to zoom. And if you're on the simulator you can hold option or alt. And that gives you basically two touches because it's not very easy to create two touches with your mouse. We can still scroll, but we can't zoom. That's because we actually need some code. Scroll View has a delegate, and what we're going to do is connect that to our view controller. So if you you know how to do that, if you connect the, you can connect the delegate here, so our view controller becomes the delegate of this coding, but you still have to implement it. So up here in our view controller we're going to add the UIScrollViewDelegate protocol. Which means, and we're going to go, I guess let's go straight down to the bottom and implement viewForZoomingInScrollView. So this function just wants to know which view it should zoom in this scroll view, and in our case it's our image view, so we can simply turn that And try running again. With that change, we can now zoom to a third of the size, which unfortunately is still a bit too little to see the whole image. And even zoom in to three times the size, and notice the zoom can bounce too. And you can control these settings as well, pretty neat. A few interesting things you can observe, it always tries to stay to the top-left. So to demonstrate that, let's allow zooming out a lot more. So you can zoom out to like, 0.1 times the size. If you run that, and you zoom out like crazy. Maybe in the wrong one. Maybe it means zoom in by 5. Change that as well. Yeah, we can see that more now. Okay, so you notice that it sort of clips to the top left. And this is Scroll View's behavior, because it's not perfect for images. Ideally you would like it to stay in the center, but by default this is how scroll Views behave. And you can see that if it was text or scrolling through, say, a feed, this would not be a problem. And you can always adjust the min and max in code such that it never goes smaller than, say, the width of the screen. So it'd be like this, more or less. So that's a scroll view. You can, that's how you use a Scroll View. But there's a few concepts you need to understand in order to use them to their full potential, and the concept, the most important one is the content size. So when you put something in a Scroll View, you can put multiple views in a Scroll View, and what determines how much scrolls, is the content size. In this case, since it's just one image and one view, the content size is whatever the size of this view is, which in this case is around 1280 by 850. What that dictates is, if you, say if you had two views, and the top is say, 100 height, and the second one is 200 height, you would want the content size to be 300. It defines the size of the content in the Scroll View which then determines how it scrolls or zooms. If the content size is less than the actual size of the scroll view, obviously there's no point in scrolling. But if the content size is larger, it will know to allow you to scroll through that. So be careful of that if you have problems with Scroll Views. Pay attention to these variables. And if you want a very nice Scroll View that works for images and center stuff, there are a ton available on the Internet. It's quite a big modification, and that's why we're not going to do it here.
