5 SwiftUI Concepts Every Beginning SwiftUI Developer Needs To Know (2020)

there are five concepts you should know before getting into Swift UI or if you're just starting Swift UI so keep watching and find out okay concept number one there are only three ways to layout views in Swift UI only three ways and I'm going to show you all three of them right now so the first way is laying things out vertically and you create what's called a V stack or a vertical stack that means every time I add something here it's going to lay it out vertically that's one way to lay things out the second way to lay things out is horizontally so you do that with an H stack and I'm going to create some shapes okay that's one now I'm going to add some more here there we go those shapes are laid out horizontally and then the third way you can lay things out is with a depth stack or one thing behind another or one thing on top of another so you create layers and the way you do that is you use what's called a Z stack I'll show you how that works there you go now that color is behind everything else so really there's only two things in the C stack a color and a V stack the color is on the bottom and the V stack is on the top so that's concept number one now concept number two is that everything is a view everything that's shown on the screen is a view everything that's used to lay something out on the screen is a view so that V stack is a view those different texts are views and that color is that of you yes it is hey you can see it on the screen it's most likely a view so what that means is views can be modified views can be changed and when you change them you do it through what's called modifiers now that text on the top there that is being modified with a larger font so as you can see the default font is those two lines that you see right there the one above it has been modified and what that means is it doesn't just change a view it actually creates a brand new view so the first view that was created is everything is a view and it's small the second view that's created is the one that's returned from the font function or the font modifier that returns a brand new view it's actually replacing the first one so you might be familiar with things like sketch where you draw some text or you draw a rectangle you give some color you change the shape you change the size and you're adding properties to an existing view now that's similar to what you're doing here but it's not actually changing of you it's replacing a view so that's that's a different concept altogether in Swift UI modifiers replace views they don't change them they replace them concept number three is that views can have parents and children so there's a parent-child relationship now the V stack that's a view and the V stack right now has seven children which are all text views now the thing that's important to know about parent-child relationships is I can change views individually or sometimes I can modify these views on a parent so say I want to change all that text all those hello world text to a larger font I can change it on its parent and if you notice what happens all the text was changed or you could say all the text was replaced with a larger text except for that very top one the very top one wasn't changed because the child is overriding what the parent wants it to be the parent wants it to be a title font but the child says no I'm gonna be a large title font instead so children can override their parents don't apply that in the real world though it doesn't work okay okay concept number four there are two types of views or layout behaviors I like to call them there are pulling views and push out views now what do I mean by that well if you take a look at that text right here that is a pull in view it's only using as much space as it needs it doesn't stretch out doesn't push out doesn't try to take up any more space it only uses as much space as it needs whereas the pink color and the rounded rectangle those are pushing out and competing for space they're trying to use as much space as possible and that's something very important to note there is that when you have multiple shapes or multiple push out views they're all going to split up the space equally and they're all going to take their their own share equally okay concept number five so you saw that you can change views with modifiers and modifiers they don't actually change the existing object they replace the existing object well what do you do during runtime when you want to change an object so take a look at this screen right here I have a button and when I click that button I want to change the color of that circle how do I modify that circle so it gets replaced you can't reference views directly I cannot create what you might know as an outlet from UIKit I can't create an outlet for a circle I can't create a variable to represent that circle and change that variable what I have to do is anything I want to change on the screen I have to change data and my view reacts to that data my view will respond to that data and change with it if I want to change the color of that circle well I have to change the data as you can see here the foreground color is what sets the color of that circle shape and it's using this variable right here so if I want to change this color I actually had to change the data I have to change this variable so maybe I want to change it to green when I click the button so let's see what happens when I click that button it changed my variable and what happened at that point is the whole view was completely redrawn with that new variable value so when the circle was redrawn is redrawn with a green color instead okay so I showed you five different concepts that you should know when you get into Swift UI these concepts will greatly help you think about creating screens and how Swift UI works so you can better create the screens that you want and expect to see

Channel: Mark Moeykens

Views: 26,145

Rating: 4.9495664 out of 5

Keywords: Xcode, iOS, Swift, SwiftUI

Id: 51xIHDm_BDs

Length: 6min 35sec (395 seconds)

Published: Thu May 28 2020