Creating HomeView and a navigation header | SwiftUI Crypto App #2

[Music] welcome back everyone i'm nick and this is swiffle thinking and we are building a cryptocurrency app and in this video we are going to start building our first view which is the home view and we're going to actually build a custom header at the top of the view now in a lot of beginner swift ui apps we usually use the navigation bar as just the default header at the top of our screen but in this app because we're making a little bit more of a custom feel we're gonna actually use a navigation view but we're gonna hide the bar and create our own custom header so that's what we're gonna focus on in this video all right welcome back everyone so i'm back in our xcode project of course and in this video we're going to start setting up our home screen i have a actual simulator of what we're building here but in this video we're going to set up the basics of this screen and add this top bar here so we have this this button on the left we have the title in the center and then we have a button on the right and if i click the button it's actually going to change the title and add a little animation around this button because this button also changed to a plus sign so if we look at this i when i click it it animates and then it turns to a plus so this header is what we're going to set up now so although we're using mvvm architecture this app is actually going to be much more complicated than my previous course if you follow the to-do list course and because of that the the way we're going to set up our folders isn't exactly model view view model it's a little more complicated than that when you start getting into these more complex apps so we're going to do here is let's fold up the extensions and let's right click and create another new group and let's call this core and i'm going to move it below the extensions and then inside this core is going to be all of the views and the view models in our app so inside this core i'm going to create another folder so it's right click create a group and this is going to be the home folder so all the views and the view models for the home page are going to be in this folder so in here let's create a new group we'll call it views and let's right click one more time and create view models folder in our views folder let's finally right click create a new file and it's going to be a swift ui view and we're going to call this home view go ahead and click create once you're inside click resume on the canvas make sure we're all connected let's set this up real simply we're going to add a z stack open the brackets we're going to add a background layer and the background color is going to be the color from our theme so we're going to say color color.theme dot background let's make it ignore safe area and let's write a little comment here that this is the background layer and then on top of this we're going to have a content layer and this is going to have a v stack we'll open the parentheses and we haven't built the header out of course but let's just add a text saying header for a second and let's add a spacer at the bottom let's give it a minimum length of zero so it can be zero if it needs to be and that should push our header up to the top but still within that safe area and although we're not using the titles from a navigation view we are going to use the navigation links so that we can segue around our app really efficiently so because of that i want to embed this entire home view into a navigation view and we could do that directly in this view but my personal preference is to just do it way at the beginning of our app in our app.swift file so i'm going to jump into our app.swift file this again is the first file that runs in your app this is where the app main call is and then right now content view is going to be the first view in our app but we're not going to use the content view so instead we're going to add a navigation view here we're going to open the brackets inside the navigation view we're going to add a home view which is what we just created open and close parenthesis and now because we're building our own header at the top we don't want the default navigation view bar at the top so we're going to call here dot navigation title navigation bar hidden and we'll set that equal to true so this way that bar doesn't show up on the home view all right so now let's jump back into the home view and just to be sure let's replicate that same environment on the preview here so we're going to put the net so we're going to put the preview inside a navigation view we're gonna put our home view inside and you can see there's space the top above the header right now because the navigation bar is there but we know that we are navigation bar hidden is true so that space goes away it's always a good idea to have your previews to have the same environment as they would in the actual app this way you get a better understanding of what it's going to actually look like and the next thing we're going to do is build out those circle buttons that you saw on the top left and the top right of this view and because it's going to be a component that we reuse a bunch of times i'm going to actually make it its own view so this way we can reuse it so over in our core folder outside of the home i'm going to create a another folder new group i'm going to call it components and so the difference here is the views that are in the home are going to be specific for that home view for that screen but all the views that are in the components folder are going to be reusable so that we can use them on a bunch of different views in our app they're not specific to one specific screen so in this components i'm going to right click create another group we'll call this circle button and in here we're going to finally right click create a new file it's going to be a swift ui view and let's call this circle button view go ahead and click create when we're in here let's click resume on the canvas all right and the first thing i want to do is change the preview because this is not going to be a full screen this is going to be a little icon a little button so we're going to change the preview to dot preview layout dot size that fits and we'll just add a little bit of padding around it just to make it look a little bit better so let's start building out our button so our button is basically going to be an image so we'll add an image here and we're going to use a system icon so we'll use the system name and for right now let's just add heart dot fill just to get the heart icon here we're going to change the size of the image by using that font and we'll use headline we'll change the color by calling dot foreground color and we will make the accent color of course part of our theme we'll use color.theme.accent let's set the exact size of these buttons to be a frame a width of 50 a height of 50. we don't need the alignment because it is center by default and then behind this image let's add a circle so we'll do dot background here we'll add a circle and the circle by default is black but let's change it with to a foreground color of color.theme dot background which should be white after this background layer let's add a shadow let's use the one with the color here so we can customize the shadow color and let's put these on separate lines so we'll have color and then we'll have the radius down here the color is going to be color dot theme dot accent i'm using the same as the foreground color of the icon i'm going to call dot opacity 0.25 so it's a little bit lighter than the actual color and then for the radius we'll do 10 and we'll put it right in the center with 0 and 0x and y finally i'm going to add a little bit of padding around this just to make it a little bit bigger and we can probably get rid of the padding down in our preview that looks good let's just make sure it looks good in dark mode as well so let's add a group to our preview open the brackets i'm going to cut this and paste it twice and then on the second one i'm going to call dot color scheme and we'll put this one as dark so in dark mode we have a pink icon and a black background all right and finally i want to be able to just change out this icon for any icon that i want instead of just the heart so up here let's add a let icon name of type string and we're going to take that icon name and just pass it in here so our initializer is now going to ask us for an icon name every time we create a circle button view so down here when we're creating them we can fix our preview and we can add our icon names here so let's just do info and maybe plus click resume on the canvas we should now see two different icons we got our i we have our plus sign i think these buttons are looking really good i'm going to now jump back into our home view where we have our header and up here where we have our header text let's actually add an h stack open the brackets on the left side of the h stack i'm going to add one of these buttons so we'll call circle button view open the parentheses and i'm just going to use the info then i'm going to add another one we'll call circle button view open the parentheses and this icon will be chevron dot right let's add a let's take this header text put it between the two and then i'm going to add spacers between the buttons and the text just to push everything outward finally on the entire h stack let's add some padding of horizontal and now our header is really starting to come together let's change the text here to say live prices let's give it a font of headline let's give it a font weight of heavy and finally let's give it a foreground color of color dot theme dot accent which is our black and that's why it still looks black and when we click on this right icon here i want to change the icon on the left and also rotate this icon so that it looks so that it points left instead of right so on the home view i'm going to create an at state private var let's call it show portfolio of type bool and we'll set it equal to false and i'm making it private here i know in most of my videos so far i haven't really touched on the private verse public thing but when you are building complex apps you should always try to make your variables you should always try to make everything as private as possible so by adding this word private we are basically telling the code that we are only going to access this show portfolio variable within this view we're never going to be able to access it from another file from another class from another struct only within this view and that's why we make it private so i'm going to be doing that a lot throughout this course just a heads up all right so when we tap on this circle button view let's add a dot tap gesture and we want to change this show portfolio and we're going to do it with animation so do with animation dot spring open the brackets and we'll call show portfolio dot toggle and then on this chevron dot right here we want to rotate it so it faces the other way if we're showing the portfolio so we'll call dot rotation effect we'll add an angle and we'll use the degrees and in here we're going to basically just animate the angle based on show portfolio so we'll say show portfolio question mark if show portfolio let's rotate it 180 degrees so the opposite of where it's facing now otherwise zero let's resume the canvas real quick click play on the canvas and i click this it should now rotate and rotate back that looks pretty good i also want to change this icon here from an i to a plus if we're in the portfolio mode so on this icon name here i'm going to change this we're going to say show portfolio question mark if we're showing portfolio we're going to use the plus otherwise we'll use info so let's try it now and it's working but there actually is a little bit of animation that's happening there and it looks a little funky so to get rid of the animation i'm just going to call dot animation dot none on this circle button view so now it should switch without that weird animation that we were seeing a second ago we're going to do the same thing for the live prices we're going to say in this text we're going to say show portfolio question mark if so we'll have it say portfolio otherwise live prices and again when we click it it's going to have this weird little animation it's going to try to animate in and out which doesn't really look good so uh so underneath this foreground color we're going to call dot animation.none and now we should be able to switch from live prices to the portfolio the last thing i want to do in this video is when we switch i want the user to really know that we are changing this icon because the action that they click when it's the info verse when it's the plus is going to be different so because of that we're going to add a little bit of animation when this switches to a plus so the easiest way i've found this is to actually make it its own view so underneath this circle button view here where we have the actual circle button we're going to right click create a new file this will be a swift ui view i'm going to call this circle button animation view click create click resume all right and in here i'm going to add a circle let's give it a stroke with with a line width of 5.0 maybe and we want to add some animation so so up here we'll create an at state private var we'll call it animate of type bool and we'll set it equal to false and then on the circle we're going to animate it we're going to animate this scale so we'll say dot scale and here we're going to say animate if we're animating we're going to scale up to 100 or 1.0 but if animate is false we're going to start at zero so this will start at zero scale when it's false and then when we change it to true it will animate from zero up to [Music] 1.0 so if we click resume on the canvas it should actually we should actually not see it right now and just for a second on this dot on appear i'm going to open the brackets i'm going to call animate.toggle so when this appears it should then animate onto the screen and it looks like it just did it without animation so we're going to add animation to this entire circle here so i'm going to add dot animation and we'll say animate question mark and if we are animating we're going to use the animation dot ease out with a duration of 1.0 so it takes one second to animate then we're going to say otherwise if we're not animating the type of animation on this circle should be none and this is a little complex if you haven't used much animation before but basically we're adding this line here because we only want to animate we only want to animate in one direction so if we switch this to true we're going to have animation of easing out but if we switch this to false it's not going to animate back to false instead there is no animation it's just going to jump back to the starting state so if i click resume on the canvas one more time we get that nice animation here i'll do one more time stop it and then press play it should animate up and then one more thing we're going to add is the dot opacity and if we are animating let's do 0.0 otherwise 1.0 so as it gets bigger it actually fades out a little bit so let's press play now looks kind of almost like a ripple effect where it comes up and then fades out to make it a little more realistic on this preview i'm just going to add a frame with a width of 100 a height of 100 and let's also give it a foreground color of red down here just so we can see it and i think it looks a little better um let's stop it all right so when we press play on the simulator here we should see that a little red circle animate outward it's a little hard to see because it happens so fast that if we want we can maybe change the duration just for testing to like 10 seconds we should now be able to see it really slowly it's getting bigger and as it gets bigger the opacity also lowers so it looks like it's fading out a little bit let's change that back to one second the last thing we're going to actually do is change this animation instead of instead of handling whether or not anime is true or false directly on the on appear or within this view we're going to make a binding variable here so we'll say binding and bindings cannot be private we'll say animate of type bool and this is going to actually be connected to something in our home view so that our home view can tell this circle button when to animate we're gonna get rid of this on a peer call and we're gonna fix this preview we're gonna fix this previews down here we need to add a binding boolean in here for our purposes it doesn't really matter so we're just gonna call it dot constant and we're just going to set it equal to false for now all right so now every time we add a circle animation view it's going to ask us to bind to a boolean and that's we're going to do now let's jump into the home view click resume make sure it's still connected all right and on this eye which is this circle button here we're going to add a background and the background is of course going to be our circle button animation view open the parentheses and then we need to bind to a boolean to tell it when to animate and we already have this show portfolio boolean because we want to happen when we click the button so here we'll add money sign show portfolio click resume on the canvas and hopefully when i click this button now we should see the slight little animation behind this eye so let's click it and there it was and when we click it back it should actually not animate because we set the animation to none so no animation when we go back animate when we go forward none when we go back animate when we go forward i think that looks awesome all right let's wrap up this video by just cleaning up our home view because this is already looking long and kind of ugly so what we're going to do is take this h stack here so i'm going to take this h stack and the padding horizontal i'm gonna cut it let's go down underneath our preview here let's add an extension we're gonna extend home view and open the brackets and by extending home view we can then add code for the home view for the home view down in this extension part and we're going to create a private var we'll call this home header of type sum view open the brackets we're just going to paste that h stack and the padding inside here so it's doing all the same stuff except now we can just take our our variable called home header and put it right here at the top of our content layer click resume we're keeping our home view nice and short and readable and everything looks great all right guys our screen is starting to come together but that is it for this video so i hope you enjoyed it as always i'm nick this is swiffle thinking and i'll see in the next video

Channel: Swiftful Thinking

Views: 3,872

Keywords: SwiftUI Navigation Header, SwiftUI Custom navigation header, SwiftUI nav header, SwiftUI header, SwiftUI buttons, SwiftUI button, SwiftUI how to create a header, SwiftUI header on top of screen, header in swiftui, swiftui reusable, SwiftUI reusable button, SwiftUI header with animation, SwiftUI home view, SwiftUI how to create a home view, SwiftUI create custom header, SwiftUI create custom navigation

Id: Y6r6YWRROHM

Length: 20min 59sec (1259 seconds)

Published: Wed May 26 2021