App Icon, Launch Screen, and Launch Animation | SwiftUI Crypto App #24

[Music] welcome back everyone i'm nick this is swiffle thinking you're probably tired of me saying that by now but in this awesome video we're going to add our app icon we're going to add a launch screen and then we're going to create a custom launch loading animation so that when we open the app before we even get into the app we have some custom launch animation that's going to add a great user experience this loading animation is something that was actually requested a couple times in my last course where you made a swifter to-do list and that's because in the last course as well as this one when you have small applications the launch screen loads and then goes away very quickly sometimes like with under a second and sometimes it's hard to even see what the launch screen looks like so what we're going to do is basically add our launch screen but right behind the launch screen we're going to create another screen that looks the exact same so that the user can't tell when the launch screen disappears and our next screen actually appears because we're gonna have the same starting ui so this way we can then take our launch screen and a little bit of animation on it and then dismiss it when we want to on our own time to give our users a slightly better user experience all right welcome back everyone um back in our xcode project and as i mentioned in the last video we have most of our app done but we do not have the app icon or the launch screen complete so in this video we're going to start by just creating the simple app icon which is the icon on the home screen we do that by going to the assets.exe assets folder i've done this in previous courses as well we have the app icon item here and then we can add all the pixel sizes for our app icon and if you downloaded the resources at the beginning of this course i already provided you all the sizes that we need you're more than welcome to use your own icon as well and i also included an actual folder where you can just drag and drop the app icon i'm just going to walk through this manually and just drag and drop each size to its destination so i'm going to read this as basically instead of looking at this 40 times 40 i'm going to look at the points down here so 20 point times 2 and that's what we'll look at for the app sizes here so the icon of 20 times 2 and i'm going to click and drag that let's do 20 times 3 29 times 2 29 times 3. 40 times 2 and i'm gonna keep going and i'm just going to keep going and probably mute myself here if you do draw drag and drop the wrong size like i do right here it will tell you with this triangle so you know if you are doing this right or not [Music] and finally 1024 which is actually called ios marketing let's just drag and drop that here let's uh build and run our app to the simulator and see if our app icon builds all right i'm going to minimize it and it's looking a little bit better already we have our crypto tracker i'm going to actually close the app and when we launch it we have this black screen and then it loads now it happens really quickly but we have a black screen and then it loads that black screen is the launch screen which basically is no screen right now so before we actually see the first screen in our app i want to create a basically a launch screen and a loading view that will give us a nice custom experience for when our app is opening so on our project navigator here i'm going to fold up some of these folders because we're not using them at the moment let's even close up the home folder and the detail folder i love how organized we stayed throughout this whole course and let's start by creating just a custom launch screen so as i mentioned if you follow my swift ui to-do list playlist it is possible to create your launch screen in the info.plist this is kind of what apple's been pushing for swift ui apps to create your launch screen right in here and you can click the plus sign and you can add your image as well as a background color and it should work however it is still buggy um it's been you know almost two years now since swift uh launched and uh i noticed i started building with this and it does bug out sometimes when we change the device sizes so i do not like to use this i would like to use this in the future if apple could clean up kind of some of the bugs that are related to this launch screen but because of that we're just going to play it safe and create a storyboard launch screen just like we did in the last app so i'm going to actually click the minus sign on this launch screen here to remove it from my info.plist and let's create a launch screen in an actual file so i'm going to create a new folder in our core section here let's right click create a new group and we'll call this launch i'm going to put it maybe right below the components inside the launch let's create a new group called views and inside the views let's right click create a new file and this is going to be a launch screen which is actually its own file type so launch screen click next and let's call it launch screen i'm just going to remove the space in here just to play it safe so we'll do launch screen in camel case and click create and again we wrote our app in swift ui so we did not use any storyboards like this we're going to create one very simple launch screen storyboard that i'll just walk you guys through right now so we're going to delete this label let's first click on the view let's open up the background here and and unlike the rest of our app where we have a theme that changes from light mode to dark mode i want to keep our launch screen always the same colors in light and dark mode i think it would just be like a better you know branding for our app so when i look at the asset.exe assets folder we have theme colors but i'm going to create a new folder in this file i'm going to right click i'm going to right click create a folder and i'm going to rename it as launch colors and in here i'm going to right click create a new color set i'm going to call this launch background color and i'm going to make it the black that we have in our dark mode so i'm just going to copy that color go to our launch background color and paste it i think it's just pitch black actually and i wanted to be the same color for light and dark mode so i could just paste it here so it's the same for both appearances or i could actually just change the appearances to none on the right side and now it's a universal color in light and dark mode i'm going to right click create one more color set and this will be called launch accent color and i'm going to go to our accent color and just take the pink i'm going to copy the pink and paste it here and again you can copy that from right here if you want the exact uh hues and i'm going to make it appearances of none so it is this pink in both light and dark mode and now i'm going to reference these colors as we create our launch screen so jumping back to the launch screen.storyboard i'm going to click on the background and i'm going to click on the color i'm going to go to the top and i'm going to set it as the launch background color that we just set up which is pitch black but just in case we want to customize our color theme we now have access to the background which will change automatically and i want to put an image in the center of the screen but i actually want to put it in the center of the safe area of the screen so a quick little hack i found is first we're going to add a view just a regular view to our app so just look for a plain view and i'm going to extend the view most of the way around the screen and we're going to click on this add new constraints button at the bottom here and we're going to constrain it 0 from the top 0 from the left 0 from the right and 0 from the bottom let's click add for constraints and it's going to go to the safe area you'll notice that doesn't go to the edge of the screen this is constrained into the safe area which is what we want and then we're going to click the plus and we're going to add an image on top of this and the image is then going to be in the center but you'll notice that when i click put the image here if you look at the hierarchy on the left the image is within that white view that we have so when i constrain the image to the center of the white view it's actually the center of the safe area which is what we're looking for here so i'm going to click on this align icon in the bottom right and let's align it horizontally and vertically in the center of that view and let's give it a default size with a width of 100 and a height of 100 add two constraints while i'm clicked on this image view i'm going to change the image to our logo dash transparent and i'm also going to change the content mode to aspect fill all right lastly i'm just going to take this white view that we have here i'm going to click on this white view and just change the color to clear so we can't actually see it alright so our launch view is very simple it's just going to be our logo in the center so let's go into the navigator on the top left this blue row here and all we need to do is connect it into our app by selecting a launch screen file and you should see the file we just made the launch screen and let's build and run this to a simulator quick as to see if our launch screen is coming through all right so right before the app actually opens we should see that screen so here's the launch screen and then our app opens and just to show you one more time i'm going to close the app we have our logo we have the launch screen and then the app opens so our launch screen is definitely working we can see it and then the app opens but you'll notice how fast that was happening and most of the time you want that to be as fast as possible because like you know as little loading as possible is a better user experience generally but this is such a fast load because our app is relatively small that it really doesn't even show it shows for like less than one second so after i made the swift ui to-do list app i actually had a couple people request how could i possibly make that launch screen longer like add a little bit of a loading view into that intro so that it doesn't just open the app immediately and this could definitely add a better experience for an app like this where it loads so so quickly that we can't even see the logo on the launch screen and so now what we're going to do is actually just add a loading view that basically will look like the launch screen is hanging for a second and then it will open up the app this is kind of like a nice little hack that you guys could use in your apps as well so we're going to do is start by creating a new swift ui view so on the views folder here i'm going to right click and create a new file swift ui view and let's call this launch view click create and i'm going to set this view to look exactly the same as the launch view that we just made so we're going to do is basically display this view as soon as the launch view is done we're going to display this view and it's going to be essentially the exact same view so the user won't know that the launch screen dismissed and this view started so let's start by adding a z stack open the brackets and we need a background color so we're gonna do color let's do dot theme dot background and as i said that i realized that this is wrong because our launch screen if we look at the assets our launch screen uses the launch background color so we have not put this as a variable in our actual code yet so i'm going to go to the the color here it's in our color extension this again is in our extensions folder we're in the color file we have our color theme let's create another struct we'll call this launch theme open brackets we'll say let accent equals color name and we called it a launch accent color we just double check launch accent color and launch background color let's do let background equals color launch background color and let's just take this launch theme and put this in our extension as well so we'll say static let launch equals launch theme so now in our app we can call color.launch.accent or background so in the launch screen in the launch view let's command shift k to clean and rebuild instead of color dot theme let's call color dot launch dot background and it should be black we can see it here and let's call that ignores safe area so we go to the edges of the screen on top of this i'm going to add an image which will be the same image that we put into the launch screen with a name of logo dash transparent dash we have our logo here and let's make it dot resizable and let's give it a frame of 100 by 100 just like we did on the launch screen before we actually build any animation onto this screen let's see if we can get this screen to just pop up right after our launch screen in our app so we need this launch for you to show up so i'm going to go into the first view in our app so our app.swift file up here and when our app loads we load up this navigation view which obviously has the home view what i'm going to do is actually create a z stack open the brackets i'm going to put the navigation view in the back of the z stack and in the front we're going to add a launch view alright so this launch view right now should just appear on top of the navigation view and hopefully it looks just like our launch screen so let's run the app quickly and we're gonna load the launch screen and then it should go right into our launch view which it looks like it did in a slight offset barely an offset and we can see that it looks like our launch view is hanging and that's because as soon as we entered the app we're actually showing a screen that it's actually the same as the launch screen so let me do that one more time we open the app we go to the launch screen and then it it goes right into the launch review which as a user you can barely even tell that it changed so now that we're in this launch view we can manually add a little bit of animation and then we can dismiss this view whenever we want so if we want this loading to view to stay for one second or five seconds or ten seconds we can do that ourselves now so i'm going to jump back into the launch view and click resume so on this view so obviously we have this view just pop up and it's just a blank view i want to add a little bit of animation so let's get some practice with some animation on this and uh let's first start by adding some text underneath this and we'll have it animate onto the screen so at the top here let's create an at state private var i'll call this loading text of type string i'm going to set it equal to um [Music] loading your portfolio dot dot and i'm going to add on top of the image so we're in a z stack here so we have the background we have the image layer and then let's add one more let's add a text well actually let's add a z stack here so i'm going to put some items in it and let's add a text with of course the loading text click resume all right so on this text let's add maybe a font of headline let's add a foreground color of color dot theme dot accent or actually i'm sorry we should actually be using the launch colors on this view so we're gonna use the color.launch dot accent which should be our pink let's give it a font weight of maybe heavy so it's a little thicker and i'm going to just add an offset onto the z stacks let's add an offset with a y of maybe 70. so it's below the image and the reason i'm doing this z stack and not putting the image in a v stack with the z stack is because i want to make sure this image is right in the center of the screen because i want it to be in the exact location as it is in our launch screen storyboard right because when we transition from this launch screen scored board to the launch view i wanted to i want the user to not know that we're actually transitioning so i'm putting this image directly in the center and then the text we're just going to put on top but we're going to offset it so it looks like it's below the image all right now i want to animate this text onto the screen so let's add a at state private var show loading text of type bool set it equal to false and then in here we're just going to say if show loading text and then we'll put the text if it's true all right so i want to animate this onto the screen so because we're just going to draw it on when we show the loading text we can use transition so we'll call that transition and let's use any transition dot scale dot animation dot ease in so it eases in and then on the entire z stack let's add a simple on appear and then here let's just call show loading text dot toggle so if we click resume it should then animate onto the screen when we appear so i'm going to press play and it has it's a very quick animation but it zooms in from it scales in from small to large so let's do it one more time and we saw it zoom in we're going to take this a little bit to the next level and we're going to animate each of these letters individually so because we want to animate each of these letters individually instead of adding it as one single string onto the text we're going to turn this string up here into an array of strings and so that each letter will be its own string so this variable up here we're going to turn it into an array of strings to do that we're going to take this string and we're going to map it so we're going to call that map and i'm just going to open the brackets here and we're going to just create a string and we're going to use the money sign zero so this shorthand here is mapping a single string into an array of strings so the loading text is actually going to be an array of strings that has l and then o and then a and then d and because it's an array of strings now we need to use a for each loop to put it onto the screen so commenting that this out for a second let's use let's create an h stack open the brackets then we'll call a four each open the parentheses i'm going to loop on the loading text which is an array now dot indices and then we'll press enter on the content and this will be for each index and in here we're just going to put text with the loading text and we're going to access the the character at that index so if i click resume we should now see the text still on the screen it's black so let's take these three modifiers and cut them and put them on the text here all right so we have loading your portfolio in each of these letters now if i click on this text if i stop the simulator and i click on this text we can see the blue lines here so each of these are their own uh each of these are their own item in the array right so each of these are being added inside this h stack obviously they're a little too spaced out so let's make the h stack spacing of zero that looks a little more normal and i'm going to take the transition that we had and i'm just going to put the transition on the entire h stack so let's get rid of the loading text so when i press play it should now still load onto the screen cool so we have a slight little scale animation at the very beginning and now i want to animate each of these letters individually so each index i want to animate separately and we're going to do that with a timer which i also covered in the last playlist the swift ui continued learning so at the top here let's say let timer equals timer.publish and we're going to publish every on in we're going to publish every 0.1 seconds on the main loop in dot and we will use the common here we want this publisher to start as soon as the screen loads so we'll call dot auto connect all right and then every time we get a published variable here we want to do something on the screen so on the view let's call dot on receive and here we can pass in publisher which will be our timer and so every 0.1 seconds the timer is going to execute and this function will run so let's create a variable at the top here at state var let's make it private var let's make the timer private as well so here at state private var we'll say counter of type int we'll set it equal to zero to start and then every single time we receive a timer we'll say with animation dot spring open the brackets and we'll say counter plus equals 1. so every time timer goes off every 0.1 seconds we're going to add one to the counter and then all we're going to do is basically check the counter versus the index and if the counter is equal to the index we're going to animate that letter so here we'll say dot offset we're going to use the y only and we'll say if counter is equal to the index of this letter question mark we'll offset it negative five so it'll move up five points otherwise zero so if i resume the canvas now we should get a little bit of an animation happening all right we see it so if i stop it started again it happens pretty quick check each letter out it it's gonna load each letter quickly so as the timer goes up from one two three four five six it's going through the indexes zero one two three four five six and it's animating them upward all right so that works great but obviously when we get to the end of the line it does not restart so let's just add a little bit of logic so in our counter here we're going to say we first want to check if the counter is equal to the last item in this array so if it's equal to the count of this array so we'll say let last index equals the loadingtext.count so it's going to give us the account of all the items in this array but we want the index and the index we know indexes start at 0 counts start at 1 so we need to subtract 1 from the count so we'll do last index is actually the count minus one and then we'll say if the counter is equal to the last index so if we're at the last item let's then set the counter back equal to zero and we'll say else so if it's not the last item we'll do the counter plus one all right so i'm going to stop it i'm gonna play it one more time so now it should loop a little bit and we should get some pretty cool animation here you guys can see that it looks like we got this really pretty high quality animation honestly for just a couple lines of code and now all we need to do is after maybe one or two loops we can dismiss the entire screen and actually go into our app so let's track how many loops we actually do so how many times we actually finish this entire uh this entire wave here so at the top we'll say at state private var uh loops of type int we'll set it equal to zero and when we get to the end of each loop so inside this bracket here every time we set the counter back equal to zero let's also add one to loops plus equals one so our loops are going up so we'll have one when we get to the end it'll be go to one and then we get the end again i'll go to two and then finally i want a variable to basically just dismiss the entire screen so at the top here we're going to add and at state var we'll just say uh show launch view of type pool we'll set it equal to set it equal to true to start just for a second and we're going to then toggle this to dismiss the view so coming back down um when we have our loops we're adding to our loops and then we're just going to check we're going to say if loops is greater than or equal to two so if we get to two loops so if we get to two loops let's say show launch view equals false all right so on the second loop we're going to set launch view equals to false and if we scroll back up right now this set launch view is not doing anything of course right like it's it's equal to true because that's what we just because that's just what we set that's not actually doing anything so what we're going to do is actually bind this to the rest of our app so i'm going to make this at binding instead and it'll be binding var launch view of type google and we're just going to bind it to the rest of our app so let's fix the preview first and we'll say down here we'll just use a dot constant of true and then if i try to run it it's going to give me an error where we have this in our app so let's jump to that error and it's where we initialize it here so i'm going to put the show launch view and let's bind it into here so at the top let's create an at state var uh private var show launch view of type rule and we're gonna set it equal to true to start because when our app loads we want to show the launch view of course so here we're going to say money sign show launch view and then finally we only want to put this launch view on the screen if obviously we are showing the launch view so we're going to say if show launch view open brackets and then we'll put the launch view on the screen and i want to animate it when it comes off of the screen so we'll add a dot transition and we'll use dot move dot leading so it animates to the left edge of the screen and finally when we are transitioning off of the screen if we're in a z stack sometimes it will sometimes the z index will mess up a little bit i kind of went over this in the swift ui boot camp so a quick fix which i went ahead and checked for is to just add this into a z stack and we'll put our show launch view in the center and then on the z stack we'll just make sure the z index is 2.0 so this z stack is always on top of the navigation view just so that while we're transitioning off of the screen we still see the transition it doesn't go and hide behind the navigation view alright so when we run our app show launch view should be true we should be looking at the launch view and then our launch view is going to do that animation and after two loops it should toggle the show launch view to false so this will then be false and this if check will fail so we will transition it off of the view hierarchy and then of course when the launch view is not showing we'll see the actual rest of our application so let's build and run this and see if it worked all right so when i click this it's going to first go into this launch screen storyboard and this is just a plain view here with the symbol and then immediately after this plain view it's going to go to the launch view which will look the same at the beginning but it's then going to unappear it's going to show the loading text and then the timer is going to go off and it's going to start this animation so let's see if it works correctly i'm going to click the button we have our launch view the text loaded in and then we're going through our animation and then it should go right into our app and i think that looked pretty cool and one of the cool features of this is that now we are now that we are taking like one second two seconds to load the app the api calls for loading all this information are actually happening at the same time so while we're so while the app is actually in this loading view and the user thinks their portfolio is loading we are actually loading all the data from the internet so every time we get here it's already pre-loaded and that's a really great user experience all right guys we are very close being done with this app in the next video we're going to do a couple optimizations just to make our code a little bit better we're going to check it out in light and dark mode we're going to check it out on the ipad and we might add a couple small features here and there but the bulk of our app is definitely done i hope you guys are enjoying this because this really is a fully functioning app at this point i am super excited about it i hope you guys are too all right thank you guys 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,728

Keywords: SwiftUI launch, SwiftUI Launch screen, SwiftUI app icon, SwiftUI launch animation, SwiftUI loading animation, SwiftUI splash, SwiftUI splash screen, SwiftUI splash animation

Id: OLk9hOi7zCM

Length: 31min 57sec (1917 seconds)

Published: Thu Jun 17 2021