How To Use Sdwebimage In Xcode To Display Images To Our Users

How To

How To Use Sdwebimage In Xcode To Display Images To Our Users Video

sdwebimage swift 4 example

How To Use Sdwebimage In Xcode To Display Images To Our Users Video Transcript

sdwebimage gif

in this video we’re at the last step in our app we need to download the images so we already have all the URLs but we’ve got to be able to download that we’re going to use an excellent library in order to make that happen and then we need to make it if someone taps on one of the photos that we can get that to show up in the Safari web browser so let’s go ahead and dive in we’re gonna focus on downloading our images and getting them to show up in our app and also making it so that if a user wants to select a particular image they can go see where that tweet came from so to get started we have to download these images and since we’re using cocoapods we can find a great repository to help us download these images and even do some caching which is really gonna help our app so let’s go ahead and open up our browser I’m going to go to cocoapods org and the project that I love is SD web image there’s lots of different projects out there in order to save and cache images download images whatnot I really like SD web image so up to you about which one that you’d like to choose but I’m gonna go with SD wedge image and go for version 4.3 so please do the same so that we’re matching up there I’m gonna go back my project to my pod file go ahead and paste that in so now we have two pods here as soon as you add a new pod you need to save your pod file we’ll always close out of my project then open up my terminal when I get to my project capital tweet Graham there we go and I’m gonna do my pod install don’t we gotta spell it correctly there we go pod install great now that’s going and grabbing SD web image and it’s put it now as part of the project so once that’s in there we can go back to Xcode and we can open up a tweet Graham will now have access to this SD web image so you might be wondering well what does this SD web image do and basically you can just give it uiimageview and say you know you have a particularly you are L of something and you want it to download it and it will go do it for you it’s really great in fact you can kind of just see an example here image view dot set SD underscore set image so pretty awesome though that’s how simple it is so first we need to import st web image so let’s go do that I’ll copy that come back to the project here this is inside of our collection view we want to do it when we’re loading up a collection view so let’s scroll to our collection view code so right now in that cell oh I forgot it right now we’re just importing STL engine alright so we’ll do that but then down here in the cell rather than just making the background color blue this is where we want to actually go and set the image so we’re gonna still take this tweet image view rather than messing with the background color first let’s go ahead and get the particular URL and convert it to a URL from a string so let’s do capital URL and we are gonna go do the initializer where it takes a string and we want to pass it images URL and go get the object at index path down row great so we’ll go ahead and just do a little if let here because I believe that gives us back a URL optional let’s confirm there if we give it a string yep that’s the case so we’re gonna do an if flat URL be equal to this and we’ll do our opening little curly bracket and end it there so if we’re able to get this URL then what we’re gonna do is refer back to our documentation we want to do SD underscore set image so do our SD underscore set and we’re not getting the autocomplete let’s go ahead and try building this project sometimes it can take a moment implement the new stuff in there so you know dot SD underscore there we go now we’re getting all the good stuff and we want to do a set image and we’ve got a couple of options here let’s go ahead and see what they look like this one looks good look it takes a URL object you can even take a URL optional so if we didn’t want to run this whole if flat in fact maybe let’s just go ahead and do that that’ll save us a little bit of code here if it’s gonna accept an optional anyways so we’ll do sell then let’s go ahead and pass it that URL and then with the completion block you could put something in here I’m just gonna go ahead and hit now we don’t need to do anything after that’s all finished so let’s go ahead and do a build here make sure that Xcode is happy with everything it looks good so let’s go ahead and give this a run and see what this looks like if we can successfully get this to work then we’ll you know focus on getting our images to show up and I just realized I started this on an iPhone 8 plus we want just the iPhone 8 so we’ll go ahead and run that because we’ve already got that iPhone 8 ready to rock and roll and for me the plus it takes a little bit too many resources on my computer and that the screen is too big I like running the 8 so here comes the app and it looks like oh we’re getting a bit of an error here let’s see index out of range oh that’s because we have just set an arbitrary amount of collection views right so instead we need this to be images URLs count okay I don’t remember to replace the example code or else we’re gonna run into issues like that so here comes and we will log in here authorize the app let’s go ahead and open that up and now that we’ve done that a bit of disappointment here and I’m just realizing the reason the problem that we’re having here is that we go about getting all these you know images right from the API everything and right now we’re printing them but instead what we need to do is tell the collection view that it needs to reload its data so you need to tell it hey you know there’s new sources of information so you need to go be aware of that so add this collection view dot reload data after you’ve processed all the JSON information so come back let’s do our login authorize the app here yes please open this up and here comes the app and we’re not seeing anything you’ll notice we can scroll through but we’re not seeing any images who cannot start load of a task since this does not conform to ATS policy so the issue that we’re having here is that we’re trying to download images that are not HTTP and so question is well how can we go about fixing that well if we go down to our file here where we’re going and getting like the media URL and the expanded URL we can actually fix this by getting one step further here you can get the HTTP version of the media files so let’s go ahead and do that media underscore URL underscore HTTP we’ll go ahead and run this one more time you know bit by bit we’re gonna get there and it’s gonna be a good moment when we finally get these images to load up so let’s go authorize the app open that back up and this time whoa look at that we have some images showing up how cool is that so this is really great that we got these images to show up but in order for this to kind of be complete there’s a couple of things that we want to focus on so one you can see there’s kind of some weird stretching with some of the images right to make them all fit inside I think we should do away with that and also we need to make it that if we select one of these it should go ahead and open up the tweet so that the user can see that so image stretching this is a quick fix for us we just got to in our the cell code here we need to work on that image view we’re gonna say cell dot tweet image view dot content mode and we’re gonna set this equal to a dot and there’s lots of different options that we can choose here we can do like this scale to fit scale to fill and I like scale aspect fill because basically what this does is it says I’m not gonna you know change the scale of anything make it some weird constraints but I’m also gonna fill up the whole box and so this will be dropping off part of the image but that will hopefully entice our user to go click on one of the images to see them in more detail okay so we’ll go ahead and put that there the next thing is that if someone wants to go see what’s at a particular tweet looks like let’s go ahead and set the code for when someone wants one of these so let’s go ahead and type out collection view here we want the did select item apps and make sure you don’t did deselect we want did select a lot of people make this mistake you want the did select okay so this code is going to be run whenever someone taps on one of these tweets and we want to go pull up the information so kind of just like before we want to be able to pull up at URL so let’s go ahead and copy this code the difference here is that rather than pulling up the images URL we want the tweets URL then once we have that URL it’s going to be opening up the tweet in Safari so we’re gonna say UI application dot shared and then on this we want to do a open and this is where we pass in a URL and you can do like some handlers and stuff like that but look it’s looking for an actual URL not an optional so we are gonna have to do an if let here or we can go ahead and put this inside of curly brackets okay so then we’ll pass in our URL object for the options just go ahead and leave an empty dictionary there and for the completion handler we’re gonna put nil we just are saying hey you know we just want this thing open so with these two new changes let’s go ahead and hit run here let’s see oh if it’s an empty dictionary I’ve got to have my coal in there there we go okay big moment here this should be really good-looking images and they should open up to the correct location so we’ll go ahead and hit login you’ll now authorize our app okay and this will open us up and look at that we no longer have the stretching right these two guys they put out great content by the way on Swift you know didn’t stretch them at all and let’s go and see if we can go look at their particular tweet so if we go ahead and click on this look at that it opened up Safari and it’s showing us right like they had a video here now it’s ready to rock and roll with that video so that’s pretty cool now really just the last thing that’s left here is we want to make it so that we can log out and essentially reset everything so that someone can come back and login right because if we go back to tweet Graham here right like let’s say I wanted to log in with a different user or something like that well you know we would want to go ahead and do that so let’s make a little bit of the change to our code so that when someone does log in let’s go find our login function so log in tap let’s go say the first thing that we want to do is you want to take that login button and change it so we’re going to say login button dot set title ok and we are gonna change let’s see we’ve got our there we go login button got and it’s not letting me set the title here maybe I’ll just have to do I’m thinking of a uibutton this as a bar button item that’s the difference there so we’re gonna set the title to be equal to log out because we’re using the same button for logging and logging out we actually need to do an if statement around the title and so we’re gonna copy this and do a little if statement that says if this logout button that title is equal to log out like we have here then that means that they are trying to you know log out and so this is you know where we’re gonna do our logout code and then the else situation is that they are trying to log in right so this is where you would have our login code right so if somebody is logging in that’s when we want to change the button to this and if they are logging out that’s when we want to change it to log in now if they are doing a login that’s where we want them to do all the code that’s down here so I’m going to take this bottom curly braket and actually cut and paste it down past all of this information to kind of update the indentation everything and I do command a to select everything and then hit ctrl I that’ll sort of tab everything over for me great that’s looking a lot better awesome and then far is the logout code goes we need to change the button to back to say login but the other thing that we need to do is we need to get rid of our arrays and update the collection view so we’re gonna take both our images URL and we’re gonna set that equal to an empty an array same thing with the tweet URLs let’s go ahead and set that equal to an empty array and then we’re going to take our collection view and say hey you need to go reload your data so let’s go ahead and give this a test and see if this is it if this works this is completed app for us so go ahead and see this all right it’s opening up fine we’ll go log in and you can see just for a second there it said log out so it should be saying that when we come back I want this to open up tweet gram boom we’re here it’s showing all of our images you can still go you know tap on something right that’s pretty cool notice one of my tweet images had come up here I tweeted this guy after some March Madness game and look at that that shows up that’s pretty awesome so that all looks good and now let’s say I want to logout boom look everything disappears and I can go back and login and it’s going to take me through the exact same process okay so we have a completed app here a few things to talk about but we’ll go ahead and talk about them here in the outro so let’s go ahead and talk about what we have learned in this section we did cover a whole lot so first creating a collection view for the photos you can see how I can create collection views and have those images downloaded into the custom cells that we created awesome stuff there next we had that fully functional login and logout process at the end there we add a little bit of polish to make that look great we used SD web image and older to download and display those images back to the user and we took advantage of caching just really great just means that you know if a user already downloads that image and they see that URL again it won’t read download it will just use the same URL and finally we learned how to open tweets in the appropriate way

sdwebimage webp

How To Use Sdwebimage In Xcode To Display Images To Our Users Related Keywords

sdwebimageoptions

sdwebimage example, sdwebimage gif, sdwebimage swift 4 example, ios download image from url asynchronously, sdwebimage webp, ios asynchronous image loading and caching, sd_setimage, sdwebimageoptions, sdwebimage example, sdwebimage gif, ios download image from url asynchronously, sdwebimage swift 4 example, sdwebimage webp, ios asynchronous image loading and caching, sd_setimage, sdwebimageoptions