Create Watch Complications in SwiftUI 2 - Learn SwiftUI for iOS

all right welcome to our next lesson on on apple watch and developing apple watch it applications using swift ui what we're going to do today is we're going to look at watch complications so what you're seeing here in the simulator is just a sample of what what our end products going to be so we're going to focus mainly on here is the apple watch and we're going to see here that we have this component and these components are called watch complications each comp each component you have here so the time the uh the the lighting of the earth solar system planet alignments that's actually my personal favorite you know date and so on each of these things is a complication and the beauty of the apple watch is you can swap in and out complications and really customize your apple watch face exactly how you want it so what we're going to do is we're going to create our own complication you're seeing here this is the sample complication we're going to create uh it's going to be a continuation of our conference planner application we made uh last time around except we'll just we're not going to do any connectivity we're just going to hard code all of our data directly onto the watch just pull it on place it onto the complication and it'll just show the next session and so what we're seeing here is just at the final session already and and i'm actually simplifying down the timings out to be like one minute sessions uh one after the other just to illustrate the timing and how it works on its own so what you're seeing is the last session uh it was at 9 49 it's 1003 at this point so it had already actually it it already actually went through the other items in the timeline we'll talk about this as well so this is the final product we're going to create a fresh project here and we'll continue on with ios app with watch app i mean you could probably get away with just a watch app on it so i'll hit next so what i'm going to do is i'm only going to do one thing with the apple watch the apple phone iphone side of thing so first off just to recap we have a ton of files here in front of us the best way to to look at the the project navigator is that the top portion up until i would say this folder with preview content is basically iphone stuff all right it's all iphone stuff from here downwards so m10p to watch complication watch kit app downwards up until preview content here this is watch stuff think of it as being like an invisible border between both device project files here one does not see the other all right so that's what we talked about last exercise now uh what we're going to do here is we're going to just ignore the phone side of things except i'm just going to add something silly like i did like i showed you in the demo there so in the content view i'm just going to put ignore me i'm complicated just just as a message to tell the user hey i'm not doing anything with the iphone app in this example here and instead i'm going to focus my energy down in the bottom half here and i'm not going to do anything with uh with the with the watch side of things here i'm going to leave hello world there i could probably just change the text to be exit me and look at the watch face right that's about as far as i could take it only file i care about for complications is the complication controller all right this is the only file i care about and we're going to talk about this right now it's a it's a fairly lengthy file it can get overwhelming the first time you look at it but really we're going to be configuring this file to work with our watch complications and get our complication up and running so we're going to use this file to configure our complication before that we need some data we need some data to populate our complication with and what i'm going to do here is i'm going to uh create or add a new file uh to host our our information we're gonna we're gonna reuse our program well we'll reuse our program object from the last application to some degree so instead i'm actually going to just recreate it so i'm going to first off make a little folder or a new group just so i can keep my classes in there i'm going to call it classes and within it i'm going to right click and say new file and this would be an ios coco touch class and we'll hit next and be a sub class we'll call it an ns object call it program object hit next give it home and i'm going to add one more class let's say new file again ios coco touch class and subclass minus object say program data give it a home okay so the two classes that i have here i'm going to start with program object i'm just going to configure this this class here so first off we'll reuse the same details from last time around var title is a string var speaker is a string but this time around var from will be date last time i used uh i used strings because i didn't want to get into the whole date and time thing but this time we're going to be taking advantage of the timeline on on the watch so they can automatically advance information sessions and so on uh info on the watch and so we're going to have to use date for that var2 will also be a date and then finally var details is a string all right i'm going to add a little constructor funk in it with data so my own custom constructor i'm going to pass in title will be a string it'll be a speaker be a string we'll say from will be date 2 will be date and finally details will be a string inside of it we'll just say self dot title is equal to title self.speaker speaker self.from is from self.2 finally self.details equals details and just got to fix that little bug up there there and that's our program object class so that's all we're going to do with that now what we'll do is we'll move over to program data create an array of program objects hard code them populate them and then go from there so i'm going to switch over to program data and here it's going to say var programs is oops extends an array of program objects we'll start off with it being an empty array now i'm going to create a constructor for this actual legitimate constructor so not a custom one that that i just created in the other class there here i'm going to type in init and no that's not the one i want i try again init let's try this one and see there we go i just wanted the override keyword so so that it actually does treat it like a proper constructor all right uh so what we're going to do is we're going to hard code our we're going to hard code four sessions all right a minute long each just for our purposes here so first i'm going to instantiate a program object so let prog obj equal program object and we'll say let calendar equal calendar dot current so now i'm getting the current date and time all right what we're going to do is we're going to initialize we're going to set it up so that and of course it's not the complete 100 right way to do this but for our application our learning purposes we're going to start off by just hard coding to right now the sessions beginning right now so so that's why we're doing this all right now we're gonna do is we're gonna say let start one equal calendar dot date by adding so we'll adding so what happens here is that with calendar.date we're going to add minutes so add by minute and we're missing an override argument here or so i'm going to just add a little argument here value and add one minute to and then instantiate a date object meaning current date and time as date all right now let's say let end one equal start one dot adding time interval so i'm going to add one minute but time interval goes in six it goes in seconds so and i'm gonna do this kind of on purpose but it's really one times sixty but you could just type in 60 for 60 seconds just to illustrate that you know if you want to add two minutes three minutes four minutes i would do like two times sixty three times six just for your own readability sake as a programmer you don't know what you're typing six months down the road and you're probably wondering okay why am i doing this so just for your own illustrative purposes as date all right so i have my count my start time end time now i can go ahead and do a prog obj dot init with data so title i'm going to hard code uh we'll say that the first title is the life of a banana speakers monkey from monkey kissing donkey 2 and code llama games i created uh from time will be start one end time will be n1 details we'll say monkey will talk about bananas all right and then we can do a programs dot append for probably j all right so that's our first one we'll just do it a few more times so now what i want to do is i want to add a minute to the next program object so first off let's instantiate let's say let prog obj 2 equal program object instantiated now let's say let start to equal end one dot adding time interval of one times sixty of course you can just do sixty and we'll say let end to equal start two dot adding time interval of we'll just do another minute now i'm just doing this on purpose for our learning purposes again so i'm just adding one minute so that we can actually sit there for a minute and watch this thing advance and we'll say prog obj2 dot init with data uh title will be uh dunkey dunkey's adventures and speaker will be dunkey from start two to end to and say donkey will talk about his life all right so far so good let's move on to our third session we'll say let prague obj three instantiated from program object say let start three equal and two dot adding time interval four again one times sixty that's another minute i'll say let end to equals sorry end three equal start two sorry three dot adding time interval for one times sixty so we're adding another minute here and then prog obj3 dot init with data so we'll say yo tease life as a rock star of course speaker is yo t so from start three two and three yot will share his singing career all right finally we'll just do one more so we'll say let prog obj 4 equal program object in instantiated and we'll say let start for equal end three dot adding time interval for one time sixty let end for equal start four dot adding time interval for one times sixty all right and finally we'll say prog obj4 dot init with data and we'll say this time walla and how he escaped the zoo speaker is of course voila say start for the start time end for is the end time say details will talk about his life in captivity all right now you'll notice that we we forgot to append the last three program objects so since we're here let's just do it right now we'll just say programs dot append prog obj3 sorry two and then programs dot append prog obj 3 and finally programs dot append prog obj 4. we've already done probably j so that's done you get if you want to clean up the code a bit better you could probably just move these lines of code where they belong but we're basically done with uh initializing our data so now we'll do is we'll move over to our complication controller and we'll actually start applying this information there all right so now let's start into this behemoth we call the complication controller first off let's just instantiate our program data array so we'll just say let full program equal program data instantiated so that's going to call the constructor initialize everything and and and and go from there now this first these first two methods have to do with uh with the complication we're going to be working with i'm going to focus on the first method now there are different styles of complications and as you recall from the watch face itself they're different shapes sizes if i can call it up here so you can see there's like you know different sizes and different styles of complication what you can do here in this method is control which complications you're focusing on so in older x codes you may see this as check boxes in the settings portion of xcode here they've moved it into this method get complication descriptors if i actually change all cases and just hit dot you can see that the different types available at your disposal for answering is like extra large graphic bezel circular small graphic circular graphic corner and so on and so forth i'm just going to do a command z just leave all cases and and i'm going to show and the reason i'm leaving that is to show you how we can control our complication control a code to only work with specific types of complications so let's let's move it down here so get timeline end date all right this is the next method we're going to talk about so basically timeline is what we're working on here and and what we can do is we have the option to specify how big this timeline can go right and i'm going to hard code it to be like an hour from now and say that you know our timeline will be from right now to an hour from now so what i'll do here is i'm going to say var current date equals date instantiated which is basically just just saying get me the current date and time all right i'm going to say then current date equals current date dot adding time interval i'm going to add 60 minutes so 60 times 60 all right and then we'll just say handler instead of handler nil we're going to say handler for current date all right so we're basically saying that our timeline will be for an hour from now with the get timeline and date method now the next method is get privacy behavior what this does is it it basically allows you to hide the information if the watches lock screen is enabled by default it will show the complication whether or not the lock screen is on and set and so uh what we're gonna and i'll leave that setting i'm not gonna play with it here now the next method is get current timeline entry all right what we're gonna do is we're gonna specify the data to place here for for the first initial load of this complication so the starting information all right now what's important here is that this code can crash if actually the remaining three methods that we see here can can crash if we don't specify which complication we're working with so what i want to do first is i want to say if complication dot family equals dot graphic rectangular that's the one i'm going to be using for this exercise today i'll create my curlies i'll just say else and i'll put this handler nil inside the else i'm only working with graphic rectangular alright now let's go ahead and encode this up so first thing i want to do is i want to populate with the first item in my array so i need to grab so and so i need to grab a date formatter objects i'm dealing with date objects i'm going to say let date formatter equal date formatter instantiated date formatter dot format date format will be equal to it's going to use hour and minute so uh so that's all i care about don't care about date and time and stuff just hour a minute and of course you can configure to whatever you want uh let's say let time as a string so time string equal date formatter dot string from full program dot programs of zero so the first index dot from all right so i'm going to grab the from value i'm only showing from in in this exercise today now let's populate our uh our our our complication for the first initial entry so we're going to say let template equal and this is a long line of code so i'm going to have to break this up into multiple lines we'll say let template equal clk complication template graphic rectangular standard body can't get no longer than that people so i've never seen an object that long opening round bracket what i want is the overload that has header text provider body one text provider body two text provider now be awesome you can show graphics as well i'm not gonna get graphics in this exercise so that'll be the third one i'm only doing pure text but hey take this and add images to it and see what it looks like afterwards all right now for the header text provider so i'm this will be a clk simple text provider object instantiated where text is going to be full program dot programs of zero dot title body one text provider will be clk simple text provider and we'll say full programs sorry text these full program dot programs of xero dot speaker finally body two text provider will have the t the time so be clk simple text provider text will be just time stream all right now let's insert this into the timeline so that it can actually put this at the right time based on the time of the watch so we say let timeline entry equal clk complication timeline entry and whereas we're going to use this overload with date and complication template so the date will be full program dot programs of xero dot from so at that time and the template will just be template then finally handler of timeline entry so we're returning this back all right it's a bit complicated it may look complicated at first essentially we are we are basically creating a template object to represent uh to represent our complication at that moment in time so it's basically going to be a header text provider body one text provider body two text providers so basically three lines of text and you saw from the overloads you can use images uh it'd be awesome to use images after after we're done here go ahead and check it out see what you can do with images here then we then take this template we give it a timestamp saying this is the appropriate time to show it by doing uh by providing the from value for that same that same entry in our array and then we return it back as timeline entry so now it's inserted into the timeline basically a minute after we begin running this thing right so now for the remaining ones what i'm going to do is i'm going to create a method to handle the remaining ones so the remaining ones will go inside get timeline entries it's going to create a little method here so funk called get list it's going to return back an array of clk complication timeline entry objects which is what we need so we'll say here var timeline entry array is equal to an array of clk complication timeline entries instantiated we'll say next date is equal to date of and then time interval since now so we're basically adding 1 times 60 times 60. all right and of course i forgot the word var so compiler is a little upset over over that now we're going to do is we're going to loop to loop through our array so i'll say for index in zero to three [Music] and we'll say let date formatter equal date formatter instantiated i'll say date formatter dot date format we'll set equal to again hhmm so hours and minutes we'll say let time string equal date formatter dot string from full program dot programs at index dot from all right and now we'll say let template equal and we're going to instantiate another super long clk complication i have to be careful typing this template graphic rectangular standard body thank you autocomplete open it up and again i'm just looking for the three texts so header text provider body one text provider body two text provider i'm going text only again so the first argument here is clk simple text provider where text will be full program dot programs at index dot title body one will be clk simple text provider using the text overload this one will be full program dot programs at index dot speaker and body to text provider will be clk simple text provider text time string all right now let's put this into a timeline entry so we'll say let timeline entry equal clk complication timeline entry date and complete complication template so we'll say date will be full program dot programs at index dot from complication template we'll say template and then finally let's append this so time line entry array dot append for timeline entry and we'll say next date equals next date dot adding time interval of 1 times 60. all right and finally god puts in the right place goes right here return timeline entry array all right that should get rid of the error got too many blank lines they're looking to get rid of those there that's our get list method now let's apply this so now we have a we have an array of of timeline entries now we're going to apply this so we now have this method right below it get timeline entries whose sole purpose is to basically handle uh this entire or these remaining timeline entries i'm just going to scroll up here and again check to see what complication we're working with otherwise we're going to have problems it's going to crash so i'll say if complication dot family equals dot graphic rectangular that's what we're working with here i'll fill in the blanks for the if in a moment let's do the else put the handler nil in the else right and so now here we'll just say var timeline entry array equals clk complication timeline entry instantiated as an array timeline entry array equals get list and finally handler for timeline entry array all right so now this method is handling the remaining timeline entries here so we're basically done with providing data for the timeline and for our complication but we have this last little method at the end so the purpose of this last method is more visual for when you are choosing your complication to be added uh to to your watch face so it's more for the user to see some sample data uh if they were to choose your complication and and and apply it so and and the way you can choose your complication is twofold one you could do it on your watch or two you can do it on the apple iphone's watch app and we're gonna i'm gonna point out exactly where that is when we get to choosing or setting this complication so first off we're going to have to make sure we're in the correct complication so we'll say if complication dot family equals dot graphic rectangular else handler nil all right now let's instantiate a template we'll say let template equal clk complication template graphic rectangular standard body there it is and open up the round bracket we're going for again header one header text provider body one text provider body to text provider that's the one i want so first argument is just clk simple text provider and we'll use text again but i'm going to hard code my text this time just to say line one we'll say body one text provider will be clk simple text provider text again let's be line two and clk simple text provider line three and finally handler for template all right we're done coding so now we need to apply this and hope nothing blew up that was a lot of coding now we're gonna we're gonna see what happens here so we're gonna do is we're going to run this i'm going to start by setting this to my iphone 12p max plus watch actually i'm going to use pro plus watch because i have that open right now so there's iphone 12p pro plus watch in our last video we looked at how to create our own simulator pairing for a watch and for phone so we're going to so you can refer back to that video in order in order to figure out how to do that but what we're going to do right now is going to run this and the purpose of this right now is to just be able to get this into installed onto the both the phone and the watch all right it's got ignore me i'm complicated it's perfect now we need to configure our watch to do this and to be able to access this complication okay so there's two approaches to doing this uh first of all if you are looking if you're if you are playing with watch faces on your simulator for the first time chances are you don't have this watch face and so what you need to do is sort of set up watch faces you may have something like this by default right apple in newer apple apple watches decided to do away with the slew of default watch faces and just let you add them manually so you if you swipe left or right you should hit this new this new and plus here and what you do is you click on the plus and you can choose swiping up or down from different watch faces and bringing them in this one's my personal favorite and if i swipe up enough so here is one this is infograph modular which is what i already have added keep going here's just modular with less graphics is and we have your modular compact right so you can go ahead and choose any we really what we need is anything with this style of complication already in it that's the main thing right i already have a watch face added so i'm going to hit cancel but you would go ahead and choose whichever one you want i'm going to go back and choose my infograph modular so what we're seeing here is uh we have our watch complication we need to configure the complications so now i'm going to go to my apple watch here my apple watch app on the iphone that is it's going to load up might be a bit slow all right and you can see here you can actually configure your watch through this app completely right and first off by looking at this here you're seeing line one line two line three which is actually the template whatever template data you can put for this last method the get localizable sample template you can change your watch face right uh you could you could con figure most importantly you can configure the complications here so the middle one i already had to my sample what if i switched over to now playing should take a moment there we go now playing right i could switch to other ones but now what i'm looking for is my newest complication i don't see it here i see some of the sample ones from other applications i've made and so i don't see it here because our project is called m10 p2 watch complications so i gotta find it all right so just gonna swipe out of this in fact i'm gonna try and get back there it is see if i can no there it is i want to kill the watch app that's what i was trying to so now what i need to do is i need to run this on the watch as well so i'm going to switch my my target to the watch i have my apple watch series 6 there it is hit run all right it's going to let the app wat a run just to make sure it gets installed all right see it says exit me and look at the watch face all right so that's fine let's hit stop there now let's go back to the apple watch it's our apple watch app on the iphone there's my watch face now let's go to middle now if you don't see it you still got to work on trying to get it installed that's the challenge here so it may require some back and forth back and forth to try and get it installed here that's the trick once it's installed here then we're good all right so you'll see that my my simulators have all just magically just changed all of a sudden um so what i did was i pause the recordings i want to bore you with the details but basically what i did was i ended up deleting my watch face so you can see here there is an option to say remove watch face as well as set current watch face when you scroll down so i removed it and i re-added it in the simulator and that got things going so now i have my m10 p2 watch complications that's the sample line one two and three data and i'm just gonna scroll and say set as current watch face and give it a moment or two and it should update the simulator now it now deleting and re-adding the watch face is kind of extreme but it got the job done in my case you may find that using uh you know just starting stopping starting stopping installing reinstalling trying those things would probably get things going as well it just it's a bit finicky but i will say compared to past years it has got it has gotten a lot better like being able to get the watch complication to install so i will say that i would give kudos to apple for improving upon upon things oops so now we're just waiting for it to update here sometimes it doesn't do as told if i switch watch faces and switch back all right so let's set this back as its current watch face we try switching away all right but at some point this will work if i try running the watch app again okay right home there we go monkey life of a banana starts at 1104. now what we'll do is we'll wait and see it move on ahead now in older apple watches like series 4 and below they used to have this feature called time travel where the on the digital crown if you rolled it in one direction or another it would actually forward time for us so uh what we're going to do is here i'll wait i'm actually going to pause recording and resume uh when it shows you future sessions but you'll probably just want to sit there and that's actually why i just had it be like one minute sessions you could probably switch down to 30 second sessions it might go faster for you oh and you can see here now donkey's adventures and any moment now we should see the next one so i'm just gonna pause recording all right and here's the third entry in our timeline uh and if you wait long enough you'll see the rem the last one so i'm gonna end it here so there you have it now we know how to build watch complications to add to our apple watch and now it encourage you to play with it switch over to graphics and see how you can apply graphics to this as well be a really good experience you can really customize and really build things out exactly how you want it to be all right until the next tutorial take care and i'll see you around take care bye for now

Channel: Jawaad Sheikh

Views: 192

Keywords: SwiftUI, swift, iOS, Apple, complications, watchOS, learn to code, tutorial

Id: s8bvaK4Jct0

Length: 48min 14sec (2894 seconds)

Published: Wed Nov 03 2021