Design a row to display coins in a List | SwiftUI Crypto App #4

[Music] welcome back everyone i'm nick this is swiffle thinking and in this awesome video we're going to take what we did in the last video we created a coin model we're gonna actually use that coin model in a view and in this video we're gonna create a row it's basically just gonna host some of the data that we are getting from our coin model this is gonna be one of the main views in our app if you remember the final product the main screen has a bunch of rows that you can scroll on and see all the coin prices and names and images and in this video we're going to create those rows all right welcome back everyone i am back in our xcode project and in the last video i know it was boring but we set up our coin model and this is the data that we're downloading from the internet from coin gecko api and it has all this awesome data that we can then use in our app and the main things here to point out are the name are the name the image the current price the market cap and a bunch of other good stuff that we are going to use and i have a picture here of actually the final app and in this video we're going to set up these rows so as we download coins into our app we're going to put them into these rows that you can see here so we're going to set up what each of these rows are and then hopefully in the next video we actually start downloading them so this row right here is what we're going to jump into and because this row is on the home view we're going to put it into the home view folder that we made so going into our app here we have our core folder let's close up the components here and then we have our home folder and in our home folder we have the views and this is of course going to be a view so i'm going to right click the views folder create a new file it's going to be a swift ui view and let's call this coin row view click create click or zoom on the canvas just to make sure we're still connected all right and on this view the first thing we're going to do is pass in a coin so in the initializer we'll say let coin of type coin model so now every time we create a coin row view it's going to ask us for a coin so in the coin row in the preview here which is what we're seeing on the right it's going to ask us for a coin and now in this coin model we could put a coin model in here and use the initializer and add all of this data here but we're going to run into this problem a whole bunch of times as we start creating this code because we're going to use because we're going to be moving these coins all around our app and a whole bunch of different screens so every time we use a coin on a view it would the preview is then going to ask us for that coin data just like this so instead of typing this coin out every time and creating a preview coin every single time we're going to create one class that we can just reuse for all of our previews before we get into this i'm just going to actually delete this to get rid of the errors quickly and the previews conforms to preview providers so we're going to actually create an extension of preview provider so in our extensions folder i'm going to right click create a new file it's going to be a swift file and i'm going to call this preview provider click create and in here of course we're going to add an extension of preview provider and then open the brackets and preview provider is part of the swift ui framework so we have to import swift ui so i'm going to create another class outside of this extension we're going to create a class i'm going to call this developer preview and then i'm going to open the brackets and i'm going to make this a singleton so we'll say static let instance equals developer preview open close parenthesis so this is one single instance of this developer preview and it's going to be the only instance we have in our entire app so because we're initializing it right here within this class we can actually make the initializer private so we'll add private init and then we will open close parenthesis and then open close the brackets and just to reiterate we're making this private because if this was public init we have a theoretical situation where somewhere else in our code someone could initialize another instance so someone could say let new instance equals developer preview open close parenthesis and then we would have two instances of developer preview in our app but if we make it private we can ensure that we can only initialize it from within the class so because this is outside the class down here we're now getting the error message that we can't initialize it so that's what we want and from our preview provider we're going to create a static var we'll call it dev and this will be of type pre developer preview we'll open the brackets and this is going to return the developerpreview.instance so by adding this static var anytime we call preview provider we can then call dot dev and that's going to give us the instance of this developer preview that we want and inside this developer preview we're going to add some data that we're going to use in our previews and before we move forward i do want to point out that extending this preview provider and creating this developer preview class is a personal preference this is the easiest way i've found to deal with these previews in swift ui but there are other ways to do it so i don't want to knock any other way that you might have learned but i do think this is super efficient and the only thing we need to watch out for when we're doing this is that theoretically we could call developerpreview.instance from anywhere in our code and then we can use this preview so if you are using this you just want to make sure that you never actually use the developer preview in the production code so like in the coin row previews we can use the developer preview inside this preview provider but we never want to use it within the actual view when we're releasing that to the app store because the developer preview is obviously fake data that we don't want in our actual app so in here we're going to actually create a coin we're going to say let coin we'll set it equal to a coin model so here we're going to initialize a coin we will then use for all of the previews throughout our app so this is much more efficient in the long run and i've actually put this file this developer preview file in the resources folder as well so you can go into that folder and then just copy and paste the coin that we have in that folder because i want to actually use uh model bitcoin data for our previews so i'm just going to actually paste in those values because i want to use actual bitcoin values so that our previews look pretty realistic and you guys can pause this here if you really want to type this out or you could put in your own fake data but i recommend using the one from the resources folder because it's going to look better just to see the actual how bitcoin would actually look in our app and we also get all this sparkline data which is a lot of data if you wanted to type it out and if you did copy and paste the preview provider file from the resources at the bottom it's going to have other variables you can just comment those out for now because we haven't made them in our app yet so now that we have this developer preview and we have a coin in the developer preview we can finally jump back into our coin row view we can add in we can say let coin of type coin model and now our preview is asking for a coin and the magic here is that anytime our preview asks for a coin now because we create an extension of preview provider and that extension has this dev variable which is the instance of the developer preview in here we can just call dev dot and then we can access that coin that we just made if i click try again it should actually build now and you can see how this is going to be super efficient because now if we have 100 different views in our app and we keep creating bunch of views that need coins as the preview we can just call dev.coin every time and we don't have to go and type out a new coin for every preview to make sure it's working so in this text let's just add the coin dot name should say bitcoin awesome all right so let's get rid of this text and let's create a h stack on the h stack i'm going to add spacing of zero and then we'll open the brackets and way on the left of the h stack we're going to add a text that has a that has the rank of the coin so here we're going to put coin dot rank and that rank is an integer so we need to then convert it to a string so we'll use the string we'll use the backslash open close parenthesis put in our rank let's give this a font of caption give this a foreground color of color dot theme dot secondary text it should be gray and just to point out here we're using the color theme that we set up at the beginning so that's why we did that first because this is now going to be super efficient as we start making all these views and then finally i want to give this a frame with a minimum width say min width of 30. just to make sure it is at least 30 pixels wide and just throw it out there um when i first made the app i didn't have like this frame on the one and then i noticed that it looked a little weird and i came back and edited it later so that's why we're just starting with this i'm not just like pulling this out of the sky knowing that this is going to work if you were making this yourself obviously there's some guess and check involved but to the right of this number one we're gonna have the image the logo for this coin now we're gonna actually need to download that from the internet which we don't have it yet so for now let's just add a circle that's where in the circle will be where the image goes let's give it a frame with a width of 30 and a height of 30 and we don't need the alignment next to that let's add another text this time let's use the coin dot symbol and the symbol is lowercase it comes through so let's just call that uppercase to make it uppercased let's give this a font of headline let's add a little spacing to the left so we'll do dot padding dot leading comma six looks good and then let's change the color we'll give it a dot foreground color of color.theme dot accent so the accent color is black and it is still black but if we go into dark mode it should switch to that pink i'm going to add a spacer here and then on the right side we're going to add a v stack open the brackets and then and in here we're going to add a text we're going to use the coin dot uh current price we want to make it a string so we're going to use the quotes backslash open close parentheses and we'll add in the current price then we're also going to do a text and we want the coin dot price change percentage 24 hour and we want to make this a string as well so we'll use the quotes backslash open close parentheses and add price change 24 hour it is optional so we'll say otherwise zero and this should be our percentage right so this is six point eight percent so we can add the percent here this first text let's make it dot bold let's give it a dot foreground color of color dot theme dot accent and the percentage and then for the percentage let's change the color whether or not it's positive or negative so we'll call that foreground color and here we're going to check we're going to check coin dot price change 24 hour and then because it's optional we'll do otherwise zero put that in parentheses so if the price change is greater than or equal to zero question mark we're going to use color.theme.green otherwise we're going to use color.theme dot red so we have our red and our green colors here so now that's our nice green it's part of our theme so if this is like a negative percent this should be red if it's positive it's green on this v stack let's give it an alignment of trailing so it's pushed to the right side and before we move on we're going to do a little bit of formatting because as you can see the way that the data comes through this 61 000 here the whole bunch of zeros it's probably correct data but this is not very like user friendly this doesn't look the way we want to look in our app so we need to format it into uh maybe at the money sign to make it currency and then get rid of some of these decimals here so this current price if i hold the option button and click on current price it is a double so we're going to call so we're going to add an extension to double so that we can convert it into the currency so in our extensions file we're going to right click create a new file it's going to be a swift file we're going to call it double click create and in here you guessed it we're going to extend with an extension of double open the brackets in here we're going to create a currency formatter so we're going to say private var i'm going to say currency formatter i'll add the number six here and this will be of type uh number formatter open the brackets we're gonna make it a computer property because we're gonna edit the formatter before returning it we're gonna say let formatter we're gonna set it equal to a number formatter we're going to open close parenthesis and then let's return the formatters so these errors go away and then we're going to customize this formatter before returning it so we'll say formatter dot uses grouping separator set that equal to true i think this means that we want to use the commas i'm actually not 100 positive but i know that i use it all the time let's also add the formatter.number style let's set this equal to the currency you can see here some of the cool other like styles that we can use percentage scientific we're just going to use currency here and just to show you guys we could call formatter.local and set this equal to maybe current we could say formatter dot currency code and we could set that equal to usd and we can say formatter dot currency symbol and we could set that equal to a money sign so these are actually the default values because my locale is us dollars but if you wanted to like override the currency this is how you would do it you would change this to like gbp you could change this to like a different symbol here if you wanted a different symbol on your data so here i'm just going to put a comment this is the default value down here this would be to change the currency and here would be to change currency symbol and i just want to point out quickly that this double file is actually also in the resources folder so you can copy and paste it but in this video i didn't want to just paste it in here and then move forward because i wanted to actually explain everything that we are doing because i think it is good for those who are trying to learn so that you can do this on your own but anyway we're not going to actually use these this locale because that's the default the currency code is default and the currency symbol is default the magic the magic we're going to add here is the formatter dot minimum fraction digits and the formatter dot maximum fraction digits this is how many decimal places that we want to allow this formatter to have and we're going to set this equal to 2 and we're going to set the maximum equal to 6. so depending on the actual number this will format with between two and six decimal places and again this is something that i've tested out in the app and i realized that it looked good i didn't start with two and six this i'm not just making these numbers up um i think i started with like four and then realized the two to six just looks the best and while we're here let's just add a little bit of documentation so up here above it let's add three backslashes and just say converts a double into a currency with two to six decimal places and and then in this documentation i'm going to add three more forward slashes and use three back ticks which is next to the number one on the keyboard and we're gonna do three three more forward slashes three more forward slashes and three three more back ticks and inside in between these two backticks we can add examples so in here i'm going to add some examples so that so that if anyone else was looking at my code they would know exactly what this current string formatter does there was no guessing and checking so i would say convert one two three four dot five six two and it's going to convert it to the money sign 1234.56 i'm gonna copy this and then paste it twice and then the second line we're just gonna move the decimal place twice so this will be 12.3456 it should convert it into uh the dollars and then four decimal places so this is why we have the two to six here and then if something was zero point one two three four five six it should then convert it into zero with six decimal places here again that's why we did two to six and if i hold the option button and click on this currency formatter we can now see our awesome documentation on this so that it converts a double to a currency with two to six decimal places and we have a couple quick examples so that anyone else looking in our code could see this and figure out exactly what it's doing automatically awesome finally we made this private so we can only access this currency formatter within this extension and now we're going to create a public variable that we're going to actually access from our code we'll say func and we'll say as currency with six decimals open close parenthesis and this is going to return us a string and we'll open the brackets and in here we want to return the currency formatter 6 which is what we just made dot string from and in here we need to pass in an ns number into this formatter so we'll say let number equals ns number we can open the parentheses and we're looking for the value and we can initialize an ns number with basically any type of value and we're going to use the double of course because we're in a double extension and this is just going to be self so then we're going to take our number and we're going to pass it into our formatter and this formatter returns an optional string so if it can't for some reason convert to the string let's just give it a default value with a money sign 0.00 and again this self is the current number that we're accessing it from so we're going to call this on a double so if i've double in my app that is like maybe the number 10 we can call number 10 dot as currency with six decimals so this self is the current value which would then be 10 and that's what we're going to throw into the currency formatter let's also copy this documentation paste it onto this function and this converts a double into a currency into a currency as a string with two to six decimal places and then let's just make these strings all right so now we should be able to use this as currency with six as currency with six decimals from our code so i'm going to go back into our coin row view let's click resume make sure we're still connected and down here on this current price we actually don't need this whole string anymore and we can now call coin dot current price which is a double and because we extended double we can call dot as currency with six decimals and that as currency function returns us a string so from here if i hold the option button and click on the as currency with six decimals we can see our documentation you can see that it returns us a string so if i resume the canvas hopefully our 61000 is now formatted the way we want that looks awesome and while we're here we also want to convert this uh percentage because all these decimal places just a little too much i'd rather just be like six point eight seven percent so let's jump back into our so this percentage also if i option click on it is a double let's jump back into our double extension scrolling down here i'm going to create a funk and say as number string open close parenthesis and this will return us a string open the brackets and this is going to return a string open the parenthesis we're going to use the format completion here and the format we've used this a couple times in my other youtube videos it's just going to be percentage dot 2f this basically is taking the current number and just formatting it to be only two decimal places and the number that we want to convert of course is self let's add a little bit of documentation here so i'm going to copy this documentation format paste it here this converts a double into a string representation and we only need one line here and this is going to convert a number so let's do convert maybe one point two four and it's going to convert the number that we input to a string so we'll keep this string here and we'll just make it 1.23 because only two decimal places is what we're getting out of this now we're going to create one more funk we're going to say as percent string open close parenthesis also returns us a string and then we'll open the brackets we're going to return the as number string which is what we just did up here plus a percent sign so same thing as this i'm going to copy this documentation paste it here and this converts a double into a string representation with percent symbol and we'll convert 1.2345 to 1.23 percent all right now we can use this throughout our code as well as this so let's jump back into the coin row view click resume on the canvas and instead of all this we will just call coin dot price change percentage 24 hours dot as percent string let's click resume and now we have our nice preview with just 6.88 percent which is exactly what we were looking for and lastly if i open up the simulator again so this is what our rows look like right now but if i click that arrow and i go to our portfolio we also have this column in the center for the current user's current holdings so if i had 0.5 bitcoin we would have 0.5 here and then the value of that 0.5 so i had 5 ethereum and this would be the value so we want to also put this column in the center so because that column is optional we're going to actually pass that in as a parameter into this view so we'll say let show holdings column of type bull so every time we create a coin row view it'll ask us if we want to show the holdings column so down here in our preview let's just say uh true all right and then after the spacer here i'm going to add if show holdings column open the brackets so if we want to show the column let's then add another v stack open the parenthesis let's add a text and we're going to use the uh coin dot what is it portfolio or holdings value this is the a double that we made a couple videos back when we created the actual value of our holdings and then we'll call dot as currency with six decimals below that let's add another text we'll say coin dot current holdings and the current holdings is optional so we'll say otherwise zero put that in parentheses and then on that parentheses we'll call dot as number string and we'll close the text so on my preview here i have 1.5 bitcoin which at 60 000 is about 90 000 which looks like the math here is correct let's do some formatting on this let's add the v stack let's add alignment of leading or sorry trailing let's change the color of these on the v stack we'll add a foreground color of color dot theme dot accent and then on the top one let's just call bold to make it a little thicker all right and then on this third column that we have down here this v stack i'm going to actually give it a default frame so it's a about one third of the entire screen so on here let's call that frame we'll say width and we'll set it equal to ui screen dot main dot bounds dot width divided by three so it's going to be exactly one third of the screen and i want to point out here that i'm okay with using uiscreen.main.balance.with because our app is only going to be used in portrait mode so if we go back into the the navigator in the first video we set it portrait only and not landscape left or right so that's why we can use the width of the screen if we were using landscape mode as well we could actually not use this where we shouldn't actually use this and we should use a geometry reader but because we're in portrait mode we can use the width when we are creating our views and i'm going to actually make it slightly smaller than one third so let's divide it by 3.5 and i want to align it to the right side of this frame so we'll add alignment of trailing and i'm doing this just so that this column is exact ends exactly the same spot for all of our coins because otherwise this uh currency here would be different lengths and if it was like shorter the columns wouldn't be exactly in line it would look a little weird just something i noticed also while developing the first time a couple quick things to finish up on this entire h stack let's just add a font of sub headline so anything not formatted yet will now be formatted to a sub headline text which just i think looks a little bit better it's a little bit smaller maybe a little thicker as well and then finally i know this 92 000 looks good right now um but this ad but it is actually using the as currency with six decimals that we made earlier in this video and if i'm looking at my portfolio i don't really care if i'm holding something that's worth one cent or point zero zero zero one cents so it makes more sense to actually round this number to two decimals every time and not six so i'm gonna right click this as currency with six decimals jump to the definition this is what we made at the beginning of the video i'm going to actually just copy all of this the formatter as well as the as currency was as well as the function and then i'm just going to paste it above it and in our pasted one let's just change this to currency formatter two let's set the maximum also equal to two so it's exactly it's so the minimum is two and the maximum two so it's always going to give us two and then this function will be as currency with 2 decimals and it's going to return the currency formatter 2 which is this one up here now so this one will always give us 2 decimals let's just update the documentation here so this converts a double to a currency with two decimal places and because it's always two decimal places that's self-explanatory we don't need three examples here let's just leave the first one with two and again with two decimal places and we'll just leave the first one with two decimal places all right let's jump back into our app resume it and just change this out to as currency with two decimal places and everything should work good and i actually needed to clean and rebuild it so that it would connect so you can always press command shift k to clean and rebuild you can also go up to the product tab and click clean build folder command shift k just to clean it and then the preview hopefully you get this green light and it is all connected and our rows look pretty much perfect obviously we don't have our image coming in but this is a great start and let's just wrap up this video by cleaning up this view because this code looks a little ugly and i like keeping it as neat as possible in the body section so let's create at the bottom an extension let's call it coin row view open the brackets let's create a private var we'll say left column conform to some view open the brackets let's take the left column which is going to be these three items here i'm going to cut them and because of three separate items we got to put them into an h stack paste that here let's give this h stack spacing of zero like the master h stack has let's take this left column put it up here let's do another one let's do private var center column of type sum view and let's take this v stack to put the center column up here put the code into our center column and then finally private far right column type some view let's take our right column here we'll add the right column and paste that here all right click resume on the canvas it should still work let's make this dot preview layout dot size that fits and then let's just add a group here and then let's just add a group here and we'll open the brackets i'm going to cut this paste it twice and on the bottom one we're going to call preferred color scheme and we'll call it dark and that's going to give us our dark mode and i just realized that when we were creating the back in our circle button our circle button view we use the color scheme that should actually be dot preferred color scheme dot dark and that's why it looks better with the actual dark black background let's go back into the let's go back into the code here and in our coin row view we now have the light the light mode as well as the dark mode they both look good alright guys that's it for this video i know it was a lot of setup stuff again uh mostly because we were setting up that double extension but that double extension is going to come in handy as we start building out our app so hopefully we can start moving forward faster as we continue through this series all right get excited because we are close to actually downloading some data from the internet and really getting our app together thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music] you

Channel: Swiftful Thinking

Views: 3,413

Keywords: SwiftUI List, SwiftUI list row, SwiftUI rows, SwiftUI add rows to list, SwiftUI list, SwiftUI how to use list, PreviewProvider, SwiftUI PreviewProvider, SwiftUI Double, SwiftUI extensions, extensions SwiftUI, PreviewProvider SwiftUI, Double SwiftUI, SwiftUI how to use PreviewProvider, SwiftUI previews, SwiftUI row

Id: SFxekW7JAxE

Length: 34min 24sec (2064 seconds)

Published: Fri May 28 2021