Create a view to manager current user's portfolio | SwiftUI Crypto App #14

[Music] what's up everyone i'm nick this is swiffle thinking where we cover all things swift and swift ui related we're about halfway through our course now of building this cryptocurrency app and one of the big features that i mentioned that we're gonna have is the ability for users to actually input what coins they're holding so they can create their own portfolio obviously we haven't added any of that logic yet but in this video we're going to create a new screen that's going to pop up so the users can actually start to add and edit to their portfolio all right guys welcome back i'm back in our xcode project and i'm on the home view here i'm going to press play on the live preview and so far our app we have we now have our statistics set up that are downloading from the internet as well as all the coins in our app but if we click the right arrow we don't have our current portfolio the portfolio for the current user yet and in order to actually add the coins to the current user's portfolio we need to set up a view some ui so the user can actually add their coins and we're going to do that when the user in our app goes to the portfolio tab and then clicks the plus button up here it's going to pop up a new sheet and in that sheet we're going to be able to edit our portfolio so in this video we're going to create that segue and then update that sheet so although that view is actually going to be its own screen its own view the data that we're going to use for that view is tied in with the data that's on the home view because we're going to reuse the data that's on this main screen so because of that i'm going to actually reuse the same home view model and incorporate it into our next screen and since it's kind of like an extension of the home screen i'm going to include this new this new view within our home folder here so on the views inside the home folder let's right click create a new file it's going to be a swift ui view and let's call this portfolio view click create click resume on the canvas to make sure we're all connected here let's just first change the text here to portfolio view and let's connect this into our app real quick before we actually create this view so going back to the home view i'm going to find this button here so that button is in the home header and inside the home header we have the circle button view depending on whether or not we're showing the portfolio it says the plus sign or the info so if it says the plus sign we want to show this new sheet so up here i'm going to add dot on tap gesture we'll say if show portfolio and then we need something to toggle to show that sheet so at the top of our screen here underneath the show portfolio we're going to create an at state private bar this one will be show portfolio view of type bool and we'll set it equal to false and i'm just going to put a comment here because these are very similar wording so this is uh animate right so like when you click the button it animates to the right and this is going to be a new sheet so when we toggle this we actually want to show a sheet so i can really put this sheet anywhere inside this view i'm just going to put it on this background layer here so we'll call dot sheet we'll use the is presented and content is presented is going to be binding to the show portfolio view the content we're going to show is of course the portfolio view that we just created back down in our button when we when it is the show portfolio let's call show portfolio view dot toggle so if i click resume on the canvas here we should now be able to segue to this sheet let's go to the portfolio view and then click the plus and a sheet should pop up from the bottom so this is working about two things i want to note here when we are using these sheets this is actually creating a new environment so right now our home view has that environment object but when we go to this new sheet here this portfolio view because this is a new sheet it's a total new environment so if we want this environment object in our portfolio view we also need to manually add it into the environment of the portfolio view so here i'm just going to call dot environment object and i'm going to add the vm from our home view into the environment of the portfolio view and also when we go into that portfolio view because we're going to a new environment we are no longer inside the original navigation view so if i tried to add like a navigation title here it's not going to work because we're not in a navigation view yet so we manually have to add another one in this view let's go to the nav let's go to the portfolio view here and let's add in a new navigation view open the brackets inside the navigation view we'll add a scroll view inside the scroll view we'll add a v stack i'm going to give an alignment of leading and spacing of zero open the brackets in here i'm just gonna put a text that says hi for a second just to get the error to go away and in at the bottom of the navigation view let's add a navigation title and the title for this portfolio view is just going to be edit portfolio very simple and then i want to add an x button in the top navigation bar here so normally if you've been following my courses i've been using the navigation bar items and we can use the leading item and in here we can put in our button so it's going to be an image system name it's going to be xmark and it's actually going to be a button sorry open the parentheses with the action and label and we'll make the image the label we'll we'll give it a font of headline to make it a little bit bigger and then in our button we want to dismiss the sheet and we do that by calling our environment value we call at environment facts open the parenthesis and we'll use a key path with a backslash dot presentation mode we'll say var presentation mode then in our button we'll call presentationmode.wrappedvalue so this is the standard way to dismiss sheets in swift ui so when we click the button it should dismiss the sheet that we are in but this x mark is actually pretty generic right this is not specific to this sheet and i want to be able to reuse this x mark on multiple screens in our app so i'm going to actually make that its own component so i'm going to copy this button i'm going to right click on the components folder create a new file it's going to be a swift ui view and i'm going to call it x mark button click create in here i'm just going to paste in our button all right and then we just need the presentation mode in here so i'm going to go back and i'm going to take this presentation mode that we just wrote out i'm going to copy it go back into our xmark button paste it in here so this should work and now we can just add this xmark button to our code and it will always have this presentation mode we don't need to add this presentation mode like every screen that we want to add a back button so let's go back into our edit let's go back into our portfolio view now and instead of the instead of this button here we can just add a x mark button and we actually don't even need to put the presentation mode in this view so we have our nice and handy x mark button and one other thing i want to point out quick is that if i hold the option button and click on this navigation bar items and i go down and click on open in developer documentation we can actually see that this navigation bar items has actually been deprecated as of ios 14.3 so i've been using this in like my bootcamp courses because that's what uh you know that was the most updated thing to use but as of ios 14.3 apple actually wants us to use the toolbar instead and essentially it's going to do the same thing the toolbar is a little more dynamic when we're using like different devices so we're going to use a toolbar with content and we're going to put it in the navigation bar leading placement so going back into our code instead of navigation bar items we're going to call dot toolbar and then in here we can add some content and the content is going to be a toolbar item open the parentheses when we have placement and content the placement will be a navigation bar leading like we just saw in the content is going to be an x mark button i can then get rid of our navigation bar items here and we are using the toolbar instead all right it should still be showing here all right let's just make sure that that back button works so i'm going to go into my home view quick on the home view let's press the arrow let's pop up that sheet and let's click on the x button and it dismisses and we know it's working right and in our app users can actually swipe down the sheet if they want instead that works just as well but now we have the xmark also working let's jump into the portfolio view let's start building out this screen alright so at the top of this v stack we're going to actually add a search bar so users can type in the coin that they want to add to their portfolio so we're going to reuse the search bar that we created a couple videos back open the parentheses we need to bind it to some search text and we're going to actually reuse the search text that's already in our view model so if you remember we added the view model a couple minutes ago specifically to the portfolio view environment so we can now pull it from the environment we'll call at environment object uh we'll say private var we'll call it vm and it'll be of type home view model let's add it to our preview here so our preview will add the dot environment object we'll add the dev dot home vm and then in our search bar view we're going to bind to the search text that's inside the view model so we'll say money sign vm dot search text let's click try again and we should get that search bar now on the screen and below this let's create a scroll view let's open the parentheses and use the dot horizontal here shows indicators will do true maybe we might change that in a second and then for the content inside the scroll view we're going to add a lazy h stack we're doing lazy because there's going to be a lot of items potentially in this and we don't want to load them all at once so we'll make it lazy we'll give it spacing of 10 we'll open the brackets and then the items that we want to show we're going to do four each open the parentheses we use the data completion here and we're going to loop on the same data array that we already have in our view model that we're showing on the home screen so we're going to say vm dot all coins this will be for each coin here and then for each coin we want to show um maybe the coin name and the image but for right now let's just add uh maybe the a text with the coin dot symbol dot upper case just to make sure it is all connected and working so if i click play here we should see the coin list coming through awesome and i want to make this a custom view for this screen that has maybe like the symbol the image as well as the name of the coin and because we're going to reuse it a bunch of times i'm going to make it its own component and because it's got the coin image in it we're going to use the coin image folder that we made before so in the coin image folder let's right click let's create a new file let's create a swift ui view quick let's call this coin a logo view click create i'm not sure if that's the best name but it works let's click resume on the canvas make sure we're still connected and into our coin logo view we're going to pass in a coin so we'll say let coin of type coin model then we're going to add a very simple h uh v stack open the brackets at the top we're going to add a coin image view we made this a bunch of videos back we're gonna pass in our coin and that should now download a coin that should now download the image for a coin for us so in our in a preview here let's add the dev dot coin and hopefully when we resume this we can now see that coin and that's why we made that coin image view its own component because now we can reuse this in our code and we don't even have to worry about any of the logic for downloading this coin or setting up how to download this coin we just add this one little piece of code and now we can get this coin wherever we want whenever we want and it's awesome let's set the frame of this to be a width of 50 a height of 50 and we don't need the alignment below this let's add a text with the coin dot symbol and let's make it that uppercased let's give this a font of headline and a foreground color of color dot theme dot accent color i want to give it a line limit of one so that it always stays on one line even if it's a really long symbol even if it's a lot of characters it stays on one line and if it is a lot of characters and it's going to exceed the space let's give it a minimum scale factor of 0.5 so that the text downsizes a little bit to fit on one line let's also add another text with the coin dot name and let's give this one a font of caption a foreground color of color.theme dot secondary text so it's gray let's also give this a line limit of let's give it a 2 line limit and let's give it a minimum scale factor of 0.5 finally if there is multiple lines because we're doing two lines here let's add a multi-line text alignment of center just in case all right on the preview let's give it a preview layout of size that fits and let's just make a group down here open the brackets we're going to cut this let's paste it twice in here and on the second one let's call that preferred color scheme of dark just so we can see how it looks in the dark and the light mode which i think it looks good let's jump back into our uh portfolio view and for each of these coins let's actually instead add a coin logo view open the parentheses pass in our coin and we now get this awesome list and we can scroll on it which looks good let's actually make each of these a little bit bigger just in case so let's give the logo view a frame with a width of maybe 75 let's click resume on the canvas here let's reload the preview and i think that looks a little bit better a little more spacing between each of them i actually don't like that this indicator is here so let's turn it to false looking good looking good all right i want to be able to select one of the coins from this list so if we click it we need some indicator that it is selected so on this coin logo view let's give it a background and let's do a rounded rectangle with maybe a corner radius of 10 and this rectangle let's actually just give it a stroke with a um where is it with a line with color and line width so i'm looking for this one that has actually content and line width here so it starts out as blue on line width of one this is what it looks like so let's make it look a little bit better we're gonna give it some let's add some padding uh around the frame before we add the background so we'll do padding maybe like four so it's a little bit of extra padding and we're gonna make the color uh color dot theme dot green it'll be the green from my theme i want to add a little bit of padding actually around the entire uh lazy h stack here so let's just add a padding let's do uh dot vertical maybe four i think that looks a little bit better let's also add some padding so it lines up with this on the left here so we'll add a dot padding dot leading looks good and then we're going to add a little bit of logic for selecting a coin so at the top here and i could put this logic into a view model we've done a lot of work with view models in this course and i don't want to make it like overly complicated i know i've already made it pretty complicated as it is so let's just put some logic into this view here so we're going to create an at state private var and we'll call this selected coin of type coin model and we'll make it optional in case we don't have one and we'll start it out as nil and then on our coin logo view before we add the background let's call dot on tap gesture and i'm going to perform an action with animation and it will be maybe dot ease in open the brackets and when we tap on a coin we're going to set the selected coin equal to the coin we tapped on all right and then finally we're going to change the stroke color so the green color here we're going to only make it green if it is the selected coin so down here on the stroke color let's change this to uh selected coin dot id is equal to the coin.id question mark and if it is we'll do color.green otherwise we're going to do color.clear let me try to make that a little bit on one line so you guys can see it alright so if the selected coin if the id of the selected coin is equal to the id of the coin that we're looping on in this loop right now we're gonna make it a green color so let's click resume it should start out with no green uh highlights when i click on one it should now animate to look like it is selected i think that looks pretty cool so now we are selecting the different coins and if we do select one i want to add some a bit of a view down here so we can actually add how many coins how many of these coins that we actually have in our portfolio so that we can then finally save it to our portfolio before we do that though let's clean up this view a little bit this portfolio view so i'm going to so let's actually copy this entire scroll view here i'm going to copy the scroll view all the way through the padding to the closing of the scroll view let's go down to the bottom let's create an extension for the portfolio view open the brackets we'll create a private var we'll say we'll call this coin logo list of type some view open the brackets and we'll paste that code inside and now back up in the top here let's just delete this scroll view and instead reference the coin logo list just to make the uh body a little bit more readable let's click resume make sure we are still connected cool all right so if we do select a coin we want to show some extra data down here so we're going to say if selected coin is not equal to nil open the brackets and here we're going to add a v stack with spacing with spacing of 20 open the brackets and inside here first let's add a maybe an h stack open the brackets let's add a text here that has maybe the current price of let's use the backslash open close parenthesis and let's access the selectedcoin dot symbol dot uppercased and if we can't get it let's just do two question marks and make it a blank string so if i click on one it should say the current price of let's add a colon after it too so current price of each colon let's add a spacer and then on the right side we're going to add another text and here we're going to add the selected coin dot price the current price and we want to change it into a number so we're going to call dot uh as currency with six decimals and it is optional so we'll do two question marks and make it a blank string if we can't get it so let's click it current price of eth and we have the value here if i change coins we can see that it is updating exactly what we are expecting below this h stack let's add a divider let's add another h stack i'm going to say text we're going to say amount in your portfolio colon we'll add a spacer and then here we're going to add a text field because this way the user can actually type in how many coins they have in their portfolio let's give it a title here which is actually the placeholder we're going to say maybe ex 1.4 as like an example of what to type in here and we need to bind this to a string so at the top here we'll say at state private var quantity text of type string and we'll set it equal to a blank string we're going to bind to it with the money sign quantity text so let's reload the canvas quick and when we click on one we should now see mountaineer portfolio ex with an example and if we click it we can then type how many we have coins we have in our portfolio on this text field i want to actually align the text to the right side so let's add a dot multi-line text alignment of trailing so if i click on one now the text is all the way on the right side and lastly i want to make sure users can only enter numbers in this text i don't want anyone to type in actual like letters so to do that we'll just change the keyboard that's allowed when we click on this and we will set the keyboard type 2 dot decimal pad the decimal pad does not have any any letters it only has numbers then we're going to add a divider i'm going to add one more row with an h stack open the brackets i'm going to say text we're going to say current value colon we'll add a spacer in here and then we're going to set one more text and then we're going to get the current value and then we're going to get the current value of these holdings so the current value is actually going to be the quantity times the uh price so because of some logic there i'm going to create a function just to get the current value so scrolling down i'm going to put it in our extension down here maybe underneath this coin list let's say we'll say private func get current value open close parentheses open the brackets and here we're going to return a double so first we want to get the quantity and the quantity is actually what the user typed into this text field but this text field actually has to be a string even though we know they're going to type in numbers because we added the decimal pad it's a string still so we first need to convert this string to a double so down in our function we're going to say if let quantity equals double quantity text open the brackets so if we can get the quantity we're then going to return the quantity times and then we are going to call the selectedcoin dot currentprice and this is optional so let's put it in parentheses and if we can't get it let's just say otherwise zero if we can't get the quantity then chances are the quantity is zero so down here we would just return zero all right now we have our function we can use it to get the current value so let's go back up in this third h stack let's call get current value which returns us a double and we'll call that as currency with two decimal places let's click resume on the canvas see what we're working with here we have uh bitcoin the current price of bitcoin is 59 000 the amount in our portfolio is zero so the current value is zero if i change the amount to one current value goes to one times fifty nine thousand and that works perfect if i put 0.5 it's obviously 0.5 of the current price so this is definitely working exactly as we expected it all right now let's do a little bit of formatting on this so when we click it it has this like weird animation that's popping up because all of these numbers are different so let's first disable the animation on it so on the entire h stack let's say a dot animation of none let's also add some padding on this h stack and let's also make it a font of headline hopefully that looks a little bit better i think it does and as i did that i noticed that when i click this and when i click this the first time it has this like little tiny bit of animation there i think it's just like a layout order i think it's just like a layout issue so if i click it right now it's gonna move a little tiny bit when i click it and i don't like that so let's actually just update the frame of that list so going down to the frame let's see we added vertical padding let's maybe change that let's just do maybe a uh dot frame let's just give it a specific height of what are we doing maybe a hundred and fifty see what that looks like looks a little too big let's do maybe a hundred it looks too small 120. i think that looks really good going back up let's clean up this code a little bit so i'm going to take this v stack here i'm going to cut it let's go down to our extension we'll add a private var we'll call this portfolio input section of type some view and we'll paste in that v stack down here and let's just put that back up in our code as the portfolio input section click resume all right this is working we get the current price of the item that we're clicked on so bch dot ltc the price is clearly updating and when we start typing the amount in our portfolio we can set it equal to seven here and then the current value is updating automatically i want to change this so that it's actually on one line i don't like how it's on two lines here so let's just change the text to maybe amount uh holding the amount that you're currently holding that looks a little bit better just keeping these on one line and finally the last thing i want to do in this video is when we do change the text in here i want to add a little bit i want to add a little save indicator at the top here so that we can actually save this to our portfolio we're not going to do the logic for saving in this video but i want to just add the button for saving all right so back up at the top here i'm going to add another toolbar item open the parentheses we're going to use the placement and content placement is going to be in navigation bar trailing content let's hit enter here let's create an h stack open the brackets let's give it a spacing of 10 and we're going to add two different items here we're going to first add an image with a system name of check mark just a very simple check and then we're going to add a text that says save and let's call that uppercased let's give this h stack a font of headline and i only want to show the check mark when we do click save and it is successful so i'm going to create another state at the top here at state var let's do private var we'll say show check mark of type bool set it equal to false and on this check mark image we're just going to call dot opacity and we'll say show check mark 1.0 otherwise 0.0 all right and then this text we're actually going to make it a button open the parentheses let's use the action and label and the label obviously will be our text that says save and we only want to show this save button when we actually click on an item and we change the current holding from what it currently is so right now eth has zero holdings but as soon as we change it we want to show the save icon so this button i'm going to call dot opacity and we're going to say if in parentheses i'll put if selected coin is not equal to nil and the selected coin dot holdings or current holdings is not equal to the quantity text which is the text that's in this field right here and this quantity text again is a string so we need to convert it to a double so we'll say double quantity text so if we are selecting a coin and the current holdings have been updated question mark we'll do 1.0 otherwise 0.0 let's resume the canvas so right now i'll click on each and we don't see the save icon but as soon as i type something in here it pops up and that's awesome let's finally wrap this video up i'm going to take this h stack here so all this h stack let's cut it let's go down to the bottom of our extension let's create a private var we'll call this trailing um nav bar buttons of type some view open the brackets paste in our h stack let's take this trailing nav bar buttons put it into our body up here so that should be working and then finally let's add a quick function we'll say private func uh save button pressed open close parenthesis open the brackets we're going to call this when we click on this button when we click the save button first we're going to check that we do have a coin that we are selected so we'll say guard let coin equals selected coin else return then we're going to add some code to actually save to portfolio which we haven't done that yet we're going to do that soon so i'm going to leave that section blank when we click this button we then want to show the check mark that we just set up so we'll say with animation dot ease in open the brackets the first thing we want to do here is say show check mark equals true the second thing we're going to want to do is remove the current selected coin so after we click save we want to unselect this coin so we're going to create one more function to say private func uh remove selected coin open close parenthesis open the brackets i'm making this its own function because it's a two-step process first we're gonna set selected coin equal to nil and then second if we are searching a coin here we're gonna set the we're going to set the vm.search text also equal to a blank string so in here we'll call remove selected coin so the next thing i want to do is hide the keyboard you guys haven't noticed this yet because we haven't ran it on a device but when we click onto this the keyboard pops up from the bottom and we want to dismiss the keyboard when we click save so we're going to use our uiapplication.end editing sorry uiapplication.shared editing it's a extension we set up a couple videos back to dismiss the keyboard and then lastly after we do click save i want to create a two second delay and then just re-hide the check mark so then down here we're going to say hide check mark we'll call a dispatch queue dot main dot async after we'll do now plus two seconds and we're just going to say uh with animation dot ease out open brackets show check mark equals false and i realize we're showing the check mark and hiding the check mark without actually confirming that we saved correctly we're going to add the logic to save later and this is just going to create a nice ui effect for now so that's it for this so that's it for this video let's just run this quickly on a simulator and see if it works all right so my app is loading i hope it all works so my app just loaded i hope this all works because we spent a lot of time in this video here let's go to the portfolio tab and then we can click our plus icon and in a nice new sheet we pop up with our edit portfolio we have our xmark button which we can use to dismiss it and in our edit portfolio we can actually then um we can search by a specific coin that we want so if i want maybe uh dot it should filter to the dot which is awesome and we can also click on any of these we can change the amount we are holding we have the decimal keyboard popping up which i'll put 12 and once we typed and changed the amount holding the save button popped up here if i click it we show the check mark and then we dismiss the keyboard and then the check mark goes away so all we need now is some logic to actually save that into our app the last thing i want to do before we wrap this up actually is change the color of this edit portfolio because because we can actually not change the color of this text uh in our swift ui view we have to override that for the entire app so let's do that quickly i'm going to jump into the swiftfulcryptoapp.swift file so this is the first file in our entire app here so before anything even runs in our app let's just call our init open close parenthesis open the brackets and in here we're just going to override the navigation bar titles so we're going to call ui navigation bar dot appearance dot large title text attributes and we can see that it is a dictionary of ns attributed string dot key and any so here we'll set it equal to and the first key we're going to do is the dot foreground color and the value we're going to give it actually has to be a ui color not a swift color so we're going to call ui color and we're going to convert a swift color so here we're going to pass in the color dot theme dot accent i'm going to copy this and just paste it one time and we're also going to set the appearance dot title text attributes equal to this as well to run it one final time for this video and hopefully that overrides the foreground color of the navigation bar let's jump into our portfolio view into our edit portfolio view and now it is pink which is our accent color which is perfect all right guys this was a long video we did a lot of setup but we created another whole screen here and our app is really getting close to the end line here hope you guys are enjoying this course and thank you for watching as always i'm nick this is swiffle thinking and i'll see you in the next video

Channel: Swiftful Thinking

Views: 1,733

Keywords: SwiftUI edit portfolio, SwiftUI portfolio, SwiftUI sheet, SwiftUI sheets, SwiftUI add sheet, SwiftUI how to use sheet, SwiftUI add sheet with view model, SwiftUI ViewModel, SwiftUI MVVM

Id: UxoAfmQlxec

Length: 39min 26sec (2366 seconds)

Published: Mon Jun 07 2021