JSON Data into Collection View with Images(Swift 4 + Xcode 9.0)

hello there and welcome back to my studio today I will show you how to add taste and data to collection so this is the application that I have created this are basically tota Heroes dota is an online game for computers and you can play it on Steam you can just google it it's dota so if you don't know the game it doesn't matter we are just working with an API but okay what happened okay so this is the application let's get started so this is and one more thing the images are getting downloaded as well from the internet as you can see they are reloading every time I like sweets on page or something so that's something cool and here is the API and here on Stack Overflow this is the extension which we will use to download images so this is the API and we will first start here I have already created a new Xcode project and first I will start by adding wallpaper to my asset so this is my asset folder and I will just add this wallpaper which is nice so cool so let's get started by parsing the JSON so I will just copy the station copy and let's hop over to a view controller file and first I will power stasis so so as you if you don't know how the power station you can watch my other videos I also have a basic tutorial on collection view as well so let's get started by creating our data structure and it will be called hero and this will be this will conform to type protocol decodable and if you recall we need to name fields as they are in your API okay so if I need name so I have to write localize name in my structure so I just copied it I will say let and this will be strength now I need you image URL so this is the image URL basically this is the path related to their main domain name okay so if I copy this and paste it over here then I get that image okay so that's a bit tricky but dumb okay so you will see anyways so first for image the name is an IMG so I will set net IMG and this would be string as well and yes we are done I'll just add some spaces and of you I will say relate URL equal to so let's get that you want to stay over this will be in the description so get it from there you are an open brackets we leave on string and open quotes paste it and we can start parsing so I will say you got it session not shared dot Delta tasks and with you other than completion handler URL will be our URL and oh not this one we want our variable so and here we will see your data just punch and so this will give us an error for this URL because we need to explicitly unwrap it if you are making and professional application I'll urge you to use a flat statement but for now I will not use it and if when whenever we perform a data task we need to resume so once the complete after the calibration I will say note resume and under this we will call so if error is equal equal to nail then we need to create a variable so variable will be heroes and this will be a collection of a structure so hero and open close brackets and here we will say self Lord heroes equal to jason decoded open close parenthesis decode and protocol will be open close brackets these are the square brackets and and data will be data so this data error everything comes from here okay this is a closure and as you can see this errors is that this function through so we need to perform this into statement so do open brackets tab close brackets and we need a catch as well so catch open brackets and here we will say print parse error and so once this is done so after catch we will say dispatch Q dot mean dot async and here we will just print out self Lord hitos don't count okay so just to check if it's working or not so let's run the application and wait I forgot to save try so try let's run the application and see what we get make sure you put this resume okay this is really important and it returns hundred and fifteen so we are good to go so we are done with the JSON parsing part let's hop over to our view controller and design our main view so I will view it as iPhone X and side view I don't know okay we need I need this right now I'll just zoom it out a bit and first I will through an image view this will go from full screen to full screen and I will give it constraints zero front on zero from the left seat of a by 1004 bottom and we will assign our image so the third one and I will say aspect film that looks good and now we need blur effect so it will be blood and Printers I'll use this one visual effect with blood and by clicking this control drag on the image not that you just click this and control like across okay so by pressing shift say Center vertically centered horizontally equal width and equal height and add constraints and this will show us this yellow lines what we will do is press combined options and equal so it will just for the size itself and now we need a collection so collection view I'll just and this will be from like edge to edge so I'll just put it here and start giving it constraint so this would be 0 from Tom's you know from left 0 from writing 0 from bottom oh we don't want this full screen so just okay do come on Z get rid of the constraints okay it's not showing me the same video thing I don't know what's the matter but I need to give the constraints according to the margin so I'll just select here and I'll say Seto from top 0 from the 0 from right and 0 from bottom and hit connect ok it's still not working what's the matter I'm not getting those blue lines as well let's build the application once do I get it now I still don't get it so I don't know just try the bottom thing ok I don't get it here as well so what I'll do is I'll just give it a constraint let's say let's do 75 from top and 0 from left 0 from right and again 25 from bottom and I had 4 constraints at this time it's pretty much okay so here is our collision Musil and we will give it identifier and I will say customs in make sure you do this part because we will be needing this later I will go to this this thing size inspector and select size and I'll say custom and here I will say 100 and here I will say hundred as well now I will select my collection mu and again here I will say say on size 200 and height now come to section insect and I will say ten from top ten from bottom ten from left and then from right okay and let's just decrease this length from top of it just say 50 or something okay so now we need to design our image and label so I'll just throw in an image label inside my testing collection cell I'll just make sure it just fits in then I will be giving it constraints anyways so I guess it's in so what I will do is I will say it's horizontally in container and I will give it a fix I will say let's do one from top and a fixed width a height of 80 80 so 80 and 80 and I'll add three constraints and this will change it automatically and now we need to throw in a label so I'll just place a live wherever and again let's give the constraints we will say horizontally in container and we'll say C you know from bottom don't you do one for bottom and a fixed we can do from left to right so we say 0 from left and 0 from right and a fixed height of 22 okay and add 4 constraints so it looks good so just modify your label to centrally aligned and I will change phone to custom and family will be a veneer next that is something what Apple uses and I like it a lot so I will say then let then 310 and color be white because we have our pure background so it will look amazing you don't see it right now but just will help it out and select collection go to the bottom and select bag around and here I will say clear color so now we can see everything so let's first create a file for our custom cell so cocoa touch class and I will just say custom and make sure it's a subclass of UI collection lucien hit next create so we have our fire I'll just okay let it be here so go back to our main node storyboard and select custom cell from this pan panel and go to identity inspector and here start typing the file name so custom collection Musil and hit enter so now we are ready to take outlets so the final part so this is our view controller so here we need our collection view outlet so I will just say I'll drag it drag and drop here and I'll say collection view collection view and hit enter just some spaces and now I will select my collection you sell here and it should change out or it did not change so I'll just go to manual collection view and select my custom collection we sell here and from here I will select image and I will drag and drop here and I will say image view and I'll need the label I'll select label from here because I cannot see there and this would be name will be a labor so it should work and we are done with the like connections part so let's let's hop over to our view controller to standard editor get rid of all the sites thing so this warning is because of the constraints and everything ok we did give it identify right then we we did give it an identifier our College our custom self has an identifier yeah it's dead let's build it okay then I went of it so it's good we have the identifier so let's go back to our view controller and here so we are starting with our collection view part so if you do know collection view I have videos on collection view make sure to link them on that I so make sure click you watch them once so if you don't know you can just see me and learn right now so first of all we need two protocols so after you have your controller is a collection view collection view and we need delegate actually we need only one so we don't need delegate right now so I will say collection you and we just need data source so don't worry about telling it there is only one protocol and under viewdidload I will say collection you dot data source equal to self okay now if you come and click on this collection new data source it will take you to this part here two methods are mandatory which is number of items in section and cell for item at index path so we need to perform those actions so here I will say number of sections number of items in section and another one was cell for item at index path so here I will just return our count of our array so this is already so number of heroes that many cells we need so simple right I will say heroes héroes dot count and here I will create a self so this is the last part so let's L equal to and we will say collection view dot DQ reusable cells would say that I defined and this is the identifier which we came like in the story would if you recall so custom cell was what I was alright in different and foreign debt but I will just say index path which comes from here okay and we will cast it as custom and this is our custom collection new sales file name okay now I will say self dot name label dot text equal to and this was this we will get from a hero's array so heroes and here I will pass in index part dot Rho and dot localize name not capitalized okay and return cell just take this and let's see if it's working so let's hop over to our viewdidload and under dispatch mean dot s we will say self dot collection you not reload data and come and run and we should be see names just named we are not working on images right now so we see names so let's so now we need that extension from our Stack Overflow I'll post a link in the description so you just like scroll down and this guy has like five hundred and thirteen lights so you can just scroll down again and where it says extension copy this part copy and go back to view controller and before structure just paste it okay and save command s so here we can easily get the image so we will say self dot image view first let's say content mode is equal to dot still aspect field okay that's what we want and then it's a sin not image view dot download image from we don't want URL we will say download image from just get rid of this again head dot and download image from the link okay now we need to create a link so let first we need okay let default equal to default link equal to and so the fault I showed you right how you get image so if you copy this part copy in front of this part then you get the image so this is something default okay so I'll copy this default link and put it in as a string and I will say let complete link equal to default link plus and here I will pass the okay we will get the other the rest of the part from our hero's array so heroes héroes and here I will say in next path not row and this will be dot image okay and this is the you are string we will pass here so complete the link and we should be good to go let's run the application and see how it looks so we will have images now okay so okay we got parse error oh that's weird okay I just let's run it again it should work so running it again and okay we have the images now so I always like images to be round so let's make them round I'll go back here and I'll first say itself no let's do it after the image is given so I will say cell not image view dot content oh no we need clips to bond and clips to bounce this will be true and now I will say say don't engage of U dot corner radius sorry its layer dot corner radius and this will be let's say self dot frame not height no it's it should be centered image view dot frame dot height and just divide this by do you can use width as well as it's a square it doesn't matter so let's run the application for one less time and see how it looks okay what's the matter we did content mood to be aspect fair right so I don't know what's the matter so let's make it work so this was kale aspect first so this should be against care aspect we can say scared to fail okay let's do this let's say skill to fear how does this look I think this should work okay it's still not working so what I can do is I'll just put it after here I sell not image view dot content more equal to dot this is what we need scale aspect Phil I don't know why it's not working it should work okay it's working now okay so that's how you parse Jason and put it inside the collection view and you can do much more with this I have a collection view with like a menu option thing I will put it in the description and if you have any questions post them in comments if you liked my video thumbs up and don't forget to subscribe for future videos peace

Channel: PlanetVeracity

Views: 19,002

Keywords: yp.py, yppychannel, swift 4 collectionview, swift 4 uicollectionview tutorial, collectionview swift 4, collectionview swift 4 tutorial, uicollectionview swift 4, collection+json, how to insert json data into collection view, swift 4 json, swift 4 json parsing, swift 4 json tutorial, swift 4 json example, swift 4 json decodable, swift 4 json parser, json swift 4 tutorial, json swift 4 example, swift 4 api

Id: hPJaQ2Fh7Ao

Length: 20min 21sec (1221 seconds)

Published: Sat Dec 09 2017