SwiftUI Tips (Part 1)

so a couple of days ago paul hudson wrote this tweet that can you fit a neat swift or a sif ui tip in a tweet if so reply below so these tips are basically swift and safe ui and you can see there are a lot of tips this goes on for like maybe 74 or 75 comments and all of them are really small tips that can increase your productivity for swift arts of ui so what i'm doing in this video is going through these tips for sif ui not all of them because they're a lot and probably i have to do another part for this but i'm going through all of these tips and basically creating a video for the tips that are discussed in the tweet the link to the tweet will be in the youtube description if you want to visit it thank you so much let's go ahead and get started all right so let's go ahead and start with our first step and this tip is from from me whenever we are working with surveyor application and we want to use a navigation view so we simply use a navigation view and wrap everything surrounding it right so this creates a navigation view and now we can go ahead and add a title and all that stuff using the navigation title we can go ahead and say welcome or whatever we want to say so this is perfectly fine but there is much easier way you can accomplish this because what's going to happen is that sometimes your code over here in your body becomes too large and it becomes a little bit of a hassle to wrap it in the navigation view or you want to perform some customization on the navigation view or something else that you want to do for each view inside the navigation view so how can we control a little bit more better so one of the ways that we can do that is by providing an extension and creating a separate modifier so we're going to go ahead and create something embed in navigation view that's a modifier extension function that we're creating it's going to return some sort of a view and we can go ahead and return navigation view wrapping whoever called embedded navigation view so how do we use it so let's go ahead and remove this part okay so now we are without the navigation view since i just removed the navigation view so there is no longer navigation view and if i want to add a navigation view i can simply go ahead and say embed in navigation view which creates a navigation view and i can also go ahead and say over here welcome or whatever the title is so this becomes a little bit more easier to maintain because now it's a modifier instead of a view that is surrounding other views all right so embed in navigation view that is the first step for safe ui all right so here's my second tip for sif ui and in this tip i'm going to show you that how you can center a view horizontally so let's first go ahead and see what kind of a problem that we're facing if i go ahead and wrap this with a vertical stack let's go ahead and refresh our view on the right hand side okay so that looks all fine right now i'm going to go ahead and add a button there we go now everything is already centered so there's nothing that we want to do to center it right now what happens if i am displaying some sort of a description also this app says this app is called hello world and this is a simple app okay so everything is fine but now it kind of looks weird that the text is basically centered so i can go to my v stack and i can put the alignment to be leading so that it is left to right all right and i can remove the padding from the first one so it looks like this so everything is okay but now what i wanted to do is the hello world button let's call it something else let's call it save the save button i want it to be in the center not aligned on the left hand side so what we can do is create a modifier to align the button or any other view in the center much easily so let's go ahead and see how we can do that i'm going to again write extension view i'm going to create a modifier center horizontally and this is going to return some sort of a view so this particular modifier can be called on any view and what how we're going to center it is we're going to use a edge stack and we're just going to put spacers so both of these spacers are pushing the self which is any view that you are calling center horizontally to the middle and now i can go ahead and easily say center horizontally and you will see that the save button now is horizontal all right so this is another tip if you want to create a modifier to center things horizontally another one of my tip is regarding receiving or registering to receive notifications using sif ui and combined so let's say that we wanted to receive notification for when the application will enter the foreground so one of the easy ways that we can do that is we can perform on receive and in the on receive we can specify which publisher are we trying to hook up to so notification center dot default dot publisher and now we can say that what kind of a publisher that we are looking for right i mean there are many different publishers available so we are looking for a special publisher and in this case we are looking for ui application basically for the foreground event will enter foreground notification and this is going to get get us a notification and this part is going to get fired so this is basically will enter foreground notification fire now this is where you can go ahead and do whatever you want so whenever the application enters the foreground it is going to call this notification so if i go ahead and run the app right now when it enters the foreground which it will once it is running we will see that this particular message will enter foreground notification gets fired so let's go ahead and make sure that the app is actually running it's still trying to run and you will see that the notification for will enter foreground notification is fired and it will enter that so right now let's go ahead and first see that there we go so let's go back and there we go all right so we thought that the notification is getting fired as soon as we are entering the foreground this tip come from twitter handle ns santa and this step basically is about modifiers do not use if conditions to add certain modifiers in your views and this was also discussed a lot in wwdc videos so let me go ahead and show you what this actually means so let's say that we have a state all right and we have a property called is active which is initially false let's go ahead and add a vstack we will also add a button and we can go ahead and say over here submit or make it active or something we can say submit and whenever a person says submit we will go ahead and toggle this property from true to false and false to true based on that condition based on the is active property we are going to render a text view and we're going to render the same thing hello world but we're going to change the background color to something else over here so if it is active then we can go ahead and say it is green else if it is not active then maybe we can say a different color or something so basically the only thing that we are changing is applying new modifiers or a different modifier based on the condition is active or not now if i go ahead and run this it works perfectly fine but it creates kind of like more complexity and it also not only creates complexity but also it's not really good for performance if you're doing this a lot into yourself ui views and this has been discussed as i mentioned earlier in safe ui videos at wwdc that don't try to use this if you have to do this then maybe there is a better approach and the better approach is not to use if else conditions but perform conditions based on the modifier itself so basically we can go over here and if you want to put a modifier we can now go ahead and say if it is active then go ahead and do green or else you will go ahead and do red so this is much better than our last approach without using the if and else so it's not going to create different branches it's just going to do in line validation of the is active and perform or return the green or the red color so this is a tip coming from ns santa and this is very important so that you whenever you're adding modifiers you are adding it in this particular way here is another safe ui tip for making your tappable regions a little bit bigger so let's say that we have a list over here and we are displaying 10 items in the list it doesn't really matter what kind of items we are displaying let's just say that we're displaying item number with the index okay so we have these items now i want to go ahead and be able to tap on each item and whenever we tap on each item i want to go ahead and print out the index if i go ahead and run the application right now and tap on the item i can see that it was saying the index which is fine if i go ahead and press item three i can see the index which is item three but what about if i tap on this empty space if i tap on this empty space nothing really happens it only happens when i press or tap on the actual label the text what i want is to cover this area also so how can i do that well if i go ahead and click on the text right now you can see the blue lines over here indicating that the text is just this small one thing that we can do is put our text inside the edge stack but just by putting your text inside the edge stack is not really going to make it horizontally larger because if i click on the edge stack you can still see that it is confined to the size of the text we can go ahead and add a spacer and now when i press on edge stack you can see that it is covering the whole space so this is good indication that i should be able to go ahead and add the ontap gesture now if i go ahead and run this i can tap on the actual item but still i cannot tap on this empty space in order to do that we'll have to do one more thing we have to provide a content shape to be a rectangle so basically we're saying that this whole area can be tapped now and now if i go ahead and run it i can tap on the text itself but i can also tap on the empty spaces so this is another sift ui tip that you can use the content shape to provide a rectangle or a circle or any other shape and that shape will become tappable much bigger region in ios 15 there is a new way to disperse your modal sheets so if i go ahead and run this application right now you will see that when i press on show sheet it displays me the ad view which is demonstrated right there the ad view has a button which is called dismiss but if i click on the dismiss button it doesn't really do anything now if we were using before rs15 or even rs15 there is a way to dismiss it by using the presentation mode we can get access to the presentation mode and then when you want to dismiss you can simply call presentationmode.ramvalue.dismiss let's go ahead and run this and see if it dismisses or not okay so it does work but in ios 15 you don't really have to access presentation mode it's simplified as dismiss so we can simply change everything to dismiss and call the dismiss function much nicer and much simpler the effect is same it will dismiss your sheet so let's go ahead and run it again to make sure that it is producing the same exact output and you can see it is so a new modifier you can use dismiss with the keypad value of dismiss now one of the really cool features that were added to sif ui is in the form of debugging right now if we go ahead and run this application do you think that the body will be rendered again when i click on the toggle button now in order to test that we can go ahead and add this new feature which is self dot print changes and what it will do is every time the body is re-rendered it is going to display us in the output window so let me go ahead and run the app and what we're going to do it's click on this toggle button and one thing you are noticing is if i press on the toggle button the view which is called the content view is not rendered now this might be strange because in the button click we are actually changing the is active property or toggling it between false and true and true to false but if we are doing that why it is not re-rendering the view the reason it's not re-rendering the view is that there is no need to read under the view because you never use effective property to modify the view so if i go ahead and add a text property and i would check is active if it's true then i would say active if it is not true then i would say not active so now we are actually using the is active property on a condition and based on the condition we are changing the view so now the view will be re-rendered again so if i go ahead and run the application and press on the toggle button now you can see that it is saying that the toggle is active with change so it's very good for debugging it will tell you which state is changing and if the body or the view is re-rendered or not so this is a really good tip for when you are programming if you are in source ui you can use scene phase to find out when your app becomes active or inactive so let's go ahead and see how that works we are going to use the environment value and the good thing about this is that these values are already passed as system-wide settings so you can access them anywhere so i'm just going to go ahead and access a something called scene phase and we are going to simply call it sc and now on the window group itself we can perform or listen for those changing changes on the scene phase we are going to get a particular value like a phase and this phase is something that we can switch over and you can see the different cases over here will be active when the application becomes active so we can simply go ahead and say active when the application becomes inactive so in that case we can say inactive when the application becomes background so we can say that this is in background all right and for the default case we can simply go ahead and say nothing at all now if i go ahead and run the application you can see that it automatically fired active if i go and send the application in the background it will be inactive and then it will be in the background and finally when i go and launch the application it will be inactive but then it will become active so you can see that it's very easy to listen to these changes in your safe ui application now sometimes in sif ui you want to find out when the actual state value changed we know that whenever the state value changes and you are using that value to modify the view the view will be re-rendered but sometimes we may need to perform some other operation and for that purpose you can use the on change modifier the on change modifier can be attached to any view you want so let's go ahead and attach it to our v-stack the on-chain module fire is going to ask you that hey which state value are you trying to look for or which should i look for changes so is active and now we can go ahead and get the new value whether it will be true or false and this code is going to get fired whenever the is active state is actually changing so if i go ahead and run the application right now and i toggle you can see that the state value is changing false true false true and this is indicating that the on change modifier is getting fired so this is a really interesting modifier in civ ui that you can use if you want to know when the state change and probably you want to take any action when the state changes

Channel: azamsharp

Views: 806

Keywords: SwiftUI, ios development, swiftui tutorial, swiftui tips and tricks, swiftui 2.0

Id: M2e1Z9enFHo

Length: 21min 25sec (1285 seconds)

Published: Fri Dec 03 2021