Downloading an image into your iOS app used to be really hard, but not anymore.
With SDWebImage is really, really easy and fast to do. Now I want you to hit
that SUBSCRIBE button because in this video we are going to do just that with
an example project. So let me just show you what we are going to build out today
and I have here a demo project that I have just built out. As you can see it
has just one UIImageView and two buttons. It's really, really simple to
build that out. Go ahead and take a look at the github repository down link in
the description, okay. And what we are going to do is fetch an image. As you can see
we are fetching it and I'm displaying the result here in an alert and if you just
want to grab our image well not displaying it in a UIImageView then we
are going to just display the image data from the result, okay. So let's just close
that and let's remove the view controller demo as the root view
controller and let's just go to our view controller and let me just guide you
through what I have here. I'm using SparkUI, If you don't know what SparkUI is
go ahead and take a look at the description and basically what I'm doing
is using an SViewController and adding an image view, fetch button and a grab
button. Now all of this comes of course with this SparkUI that I have built.
It's really easy to set up. I'm stacking the image view, fetch button and grab
button and like so and then I'm just observing the tabs on those two buttons
and I have here some extra function which we will build out later on which
basically handles image with error, cache type and the URL. This is where we will
show that alert that you saw earlier. So let's just start off by importing
SDWebImage and as you can see it already is imported through Swift package
manager so if you just click on this plus button and the URL. So you need to
add the URL here. So the URL can be found on GitHub
and if you go to the link for SDWebImage and the link is in the description
also on the resources you just go ahead and click on this clone or download
button and just copy it out by clicking again on this button and just go back to
Xcode and paste it in there and just follow along with the instructions and
you will be just fine. Now I have also imported SparkUI because of this UI
that I have just built out really, really fast, okay. So that's that.
Let's go back to our view controller and as you can see here we have SDWebImage
already imported, okay. And by the way I have a URL that is from Unsplash and yep
go ahead and just use any type of URL that points to an image, okay. So let's
fetch an image. Now fetching an image in my case is just displaying it also on a
UIImageView and grabbing it is just just grabbing, downloading and later on
we will just do whatever we want with it. Okay! So first of all let's fetch it and
display it in that image view, okay. Fetch button. So first of all we need to create
a download URL because yeah that's a string that we have but it might not be
a real URL. So let's guard let unwrap that, else we are just simply going to
return. Let's do nothing, okay. Let me just move this a little bit up so you can see
better. Finally let just see what happens here so yeah we need to have self here
because we are in a completion, yeah. This is reactive programming from ReactiveKit.
We are inside a tab observer, yep. So that's a closure. That's why we need to
reference the URL string with the self. So now that we have a download URL we
will also use the place holder. If there is any place holder needed. Now I have
already added the place holder here or did I let me just add that place holder
right now. Let's go to documents, work and here we
have our logo. So let's just drag and drop that logo right over there in
the assets, how awesome is that, okay. So let's go to our viewcontroller and now
let's create our placeholder. So the placeholder is basically a UIImage.
So let's see let, there we go and it will be named logo. I already know that
image is named logo, okay. So now we have to use SDImageView and yeah
it's really, really simple now that we have a download URL and placeholder.
We just call that on the image view. So self because we are in the completion ImageView
and let's just start typing SD underscore and as you can see there are
quite a lot but I will use the one with the placeholders, so and the one that is
with the completed. So set image with URL placeholder options and completed.
Okay! So for the URL we are going to use the download URL and here as you can see
it's an optional but yeah we have already guard let unwrap that, okay.
Placeholder an optional UIImage and that's good because named images are
also optional. So please holder, there we go. As you can see it's an optional and
options that will be an empty array, I don't really care for now and the completion
block returns an optional UIImage, Error and URL and of course an
SDImageCacheType that we will talk in just a moment. So let's just type out
here all over these. So image, error, cachet type
and URL. Now this is a real URL, it's not a string just say you know and
finally we want to use this handle, image, error, cache type, URL pre-built function
that I already have here. So we don't clutter that completion. So self handle
image, error, there we go, image, error.
How nice is that and basically that's it. Now we want to handle that information
and what we are going to do is, I just copy this out because it's a really,
really simple from my cheat sheet here on the left and I just paste it in.
It's really, really simple to do. We are just going to check if there is an error.
If there is an error I'm going to use SAlertController show error. This is
simple UIAlertController from SparkUI. You could use a simple UIAlertController
for your case. After that I'm guard let unwrapping an image then the
URL and I'm creating a message as you can see this is a multi-line message string
and then I'm just going to show it in a success alert controller. Again this is
from SparkUI, SAlertController. So yeah that's just showing the simple
Alert Controller with these information. So let's just build and run again and
see what happens now, so yeah we should get that image downloaded from that URL
that we specified, okay. Let's tap on fetch image. Let's can see, if loaded
success there's the image size, that cache type. Now the cache type is
set to one and there's the URL just so you know. Now let's talk a little bit
about the cache type because I just close this and if we go to SDImage
CacheType, let's jump to definition and as you can see there's a none, type disk, type
memory, type all. Now none is zero, that this is one. Memory is two and type all is
three. Now if you want to know this then you should create an enum for that but
yeah that's just it. So let me know what that one means because we already
downloaded a few minutes ago, okay. Finally let's talk about grabbing the
image. Not just displaying it in a UIImageView but most probably you will do this
most of the time but sometimes you just want to download the image and just use
it later on. So for that we are going to grab an image and grab an image first of
all we need a manager. So let's just create that.
So let image manager equals and of course we are going to use SDWebImage
and manager, there we go. So now that we have our manager we can load an
image on that manager. So image manager, load image and yeah let's just use
this one with the URL options and the progress because I want to show you all
about the progress. Of course on the set image you could also have the progress set
if you choose another one but I will show you the progress right over here.
So URL, I will just copy out this URL from here, there we go.
And let's just add it right over there. URL equals is the download URL, options
and empty array and the progress. Now this is a progress block. So let's hit
return here and as you can see we are returning two int's and an optional URL.
Now the first int is the received size and the second one is the total size.
So we received size, total size and URL, okay. Now what we need to do is just print out
the receive size and the total size. Of course you can calculate the percentage
of how much percentage has been downloaded, so again I would just copy
out this real quickly so we don't waste time with that and you can see that I
have just, sorry not there, under the code. I've just created the percentage
and I'm just printing it out, okay. Next up is the completed completion block.
Okay and it is the same now we also have a success boolean value like did it
finish, I did it finish downloading, okay. Let's add in here image, data, error.
cache type, finished and URL, okay and of course we
can check if the completion has finished. So if finished
else we are going to, let just print out loading
image did not finish. So SAlertController, let's use show error or show
warning rather just no simple warning. Show warning and loading image did not
finish, okay. Otherwise let's just use the handle that I have just created. So self
handled with the image, error, cache type and URL. Of course you could use
the data also if you wanted to but this is really, really simple, okay. Let's just
build and run and see what we got and as you can see it's really, really to use
SDWebImage. So let's grab our image, success, cache one and here is our URL.
How awesome is that and finally let's just fetch an image, cache two, URL and
the image size really, really handy and that's how simple it is to use
SDWebImage. So now you know how easy it is to download images into your iOS app
with the help of SDWebImage. Now I want you to hit a notification bell because
in my next video I will be talking about the coordinator pattern. That's right we
are going to talk all about navigation. Now while you wait for that make sure to
check out these videos as well too. I talked a lot about Swift in general,
UIKIT and as usual I will see you in the next one.