Add a Settings screen using a List with Sections | SwiftUI Crypto App #23

[Music] welcome back everyone i'm nick this is swivel thinking and it's sad but we're in the final stretch of this course we already did the majority of our screens but there's one more screen that we need to work on and it is the settings view so on our home view if we click on the little info the eye icon on the top left where it's going to pop up a settings view it's going to be a new sheet and it's going to have some very basic information about this app so we're going to keep it simple here and we're not going to create a view model for this view although we could um but we've done so many layers and view models in this course that i just want to keep this simple we're just going to put a couple different sections in a list on the screen we're going to have a section about the course a section about coin gecko the api we're using we have a section for the developer so like your own personal section we're going to end it with a section about the application because pretty much every app that you put into the app store should have an application section in the settings where users can access your private policy your terms of service maybe your company website and things like that all right welcome back everyone so i'm back in our xcode project in the last video we finished setting up the detail view which looks awesome we got our description coming through we have our website links at the bottom and if we're on our main page the last thing we need to set up is when we click on this i on the main page right because when we go to the portfolio page we got this plus button to edit the portfolio but when we are back on the main page we have an i button here and it's currently not doing anything and of course we want the eye to show a new screen which is going to be our settings screen so to start that let's actually create a new folder in our core section here so if i fold these up we have our home section our detail section and i'm going to create one more folder let's create a new group and we'll call this settings let's put it down at the bottom underneath the detail put it right here and inside that just like when we have in our other folders we have the views and the view models in our settings we're going to create a new group called views and now we could create a view model for the settings but this is going to be a very simple view so i'm just going to put all the logic actually directly within the view things just easier and faster and we've done enough of the view models in this course to understand how to do that if we needed to so in our reviews folder let's right click create a new file and this will be a swift ui view we're just going to call it settings view click create click resume once we're inside here i'm going to go full screen so that we can see it a little bit better all right and when we go to this view we're going to use a sheet just like we did with the edit portfolio view and because we're using a sheet it actually creates a new environment and therefore we are no longer in our navigation view so on this settings view let's actually start by adding a new navigation view open the brackets and inside we're just going to add a simple list and we'll open the brackets i'm going to put a text here just says hi for a second and on the list let's give it a navigation title that says settings let's start by adding the back button on the top left corner here so let's add a dot toolbar and i'm just going to type in toolbar and open the brackets and we're going to add a toolbar item open the breath brackets we're going to use the placement and content the placement will be dot navigation bar leading so top left and the content is going to be x what do we call it x mark button and if you remember a couple videos back we created an xmark button which is a very simple just an x button and it connects to the presentation mode which is the current presentation mode that the user is in on that screen and when we click it it just dismisses the screen so very simple back button and we're just going to put that in the top left of the view all right and in our list we're going to create a couple sections and sections are a really cool feature of a list we can add basically a group of rows and that group can have a header and a footer so just to show you guys quick we can add a section open the parentheses and we can use the header footer content and just to show you i'm going to put the header as a text that says header the footer i'm going to put a text that says footer and the content we'll just put our hi inside let's put two highs just so we can see what it looks like so on this default uh list view here we have the header here and we have the content in the center which is two highs and then we have the footer at the bottom and this looks good but i actually want to change the list style so when we change the dot list style it will automatically reformat our sections to a couple different default formatting options so if i type in list style here we can see that there's a whole bunch and i covered these in the list video of the swift ui bootcamp and for this one we're going to use the group list style opening close parentheses we're using this just because i think it looks pretty cool all right and so we have the header which is kind of like outside of the content section as well as the footer and we're not going to need the footer i just wanted to show you guys what it does so let's actually just delete the footer out of here all right so we're going to create a bunch of different sections that all have obviously different headers and as well as different content and in each of those sections we're going to have some links for our app because it's pretty common on the settings screen of your app to link to outside resources such as your private policy your company website things like that and as i mentioned we could make a view model for the settings view but we've done that a bunch in this course and i'm just going to put the data inside this settings view directly so at the top here let's just create some of the links that we're going to use that we're going to use in these sections let's first say let default url we'll set this equal to a url open the parentheses pass in a string we're just going to type in https colon backslash backslash www.google.com and if i hold the option button and click on this default url it is optional so i'm going to actually explicitly unwrap it with the exclamation point here hold the option button and click on it now we can see that it is actually a url it's not optional and throughout the course i always recommend not using these explicit unwraps pretty much anywhere but for like this case specifically it is okay because we know this url is never going to fail because we're passing this in directly so this is not a worry that we're explicitly unwrapping right here but if you were getting these urls like from a database you obviously want to use your guard or if flat statements to make sure we have valid urls but i'm going to keep this as explicit just for brevity's sake here just because i want to get through the settings view so we're going to create a let youtube url equals url string and we're going to do https colon backslash backslash www.youtube.com backslash c backslash swift full thinking i'm going to do a tiny bit of self-promotion on the settings view uh just because this was a free course so uh i'm gonna put my youtube url here you if you have your own channel or you wanna put another link you are more than welcome to on your app as well i'm gonna create another let's say let uh coffee url and we'll set this equal to a url with a string we're gonna do https colon backslash backslash dot www.buymeacoffee.com backslash nick sarno i'm gonna explicitly unwrap this as well we're gonna say uh let coingecko url we'll set this equal to url with a string of https colon backslash backslash www.coingeco.com explicitly unwrap it let's say let personal url equals url string and in here i want you guys to put uh the url of like your portfolio your website your github uh whatever you want here so i'm just gonna put uh https colon backslash backslash my personal website but we're going to create this section is going to be basically for the developer so that would be your own section uh so put in your website here if you have one let's explicitly unwrap that and let's start getting these sections set up so the first section i'm going to call swift full thinking at the top of the section let's add a v-stack with alignment of leading and we will open the brackets let's add an image and we're going to use the name and we're just going to call it logo uh if i open up the assets.xc assets we have an image called logo which is our app logo so we're just going to pull that in and go back and i spelled online mint wrong and this is obviously way too big so let's make it dot resizable dot frame let's give it a width of 100 a height of 100 we don't need the alignment and let's give it a dot clip shape let's use a rounded rectangle with a corner radius of maybe 20. i think that looks better and underneath this image let's add a text let's write out a little bit of details on this app so we'll say this app was made by following a at swift full thinking course on youtube we'll say it uses mvvm architecture combine and core data all right let's give this a font of call out let's give it a font weight of medium and let's give it a foreground color of color dot theme dot accent all right let's give the v stack maybe a little bit of padding of maybe dot vertical i'll just add some spacing on the top and the bottom and then underneath the v stack let's add some links so let's add a link open the parentheses and we're going to use the string protocol and destination string protocol this first one let's say subscribe on youtube i'm going to use the control command space bar to open up the emoji keyboard and let's use maybe the party emoji because everyone loves the party emoji and of course our destination will be the youtube url that we made at the top here all right i'm gonna i'm going to create one more link let's open the parentheses let's say here support his coffee addiction it is an addiction guys i will commit control command space bar and let's maybe search for coffee and put that emoji in and we'll pass in the coffee url this was a free course on youtube so if you guys do feel that you learned something and it was worth a five dollar coffee i do accept tips on my buy me coffee page you are more than welcome to donate support my addiction and finally on these links right now they're black because our accent color is actually black in the app but i want these links to actually be blue specifically so on the whole list let's add an accent color of blue that will look a little bit better and let's also add here a font of headline by default i think that makes it look a little better like we can click on these links that's it for our first section so let's uh i'm going to cut this section here i'm going to scroll down let's create an extension like we usually do let's extend our settings view open the brackets let's create a private var we'll say uh we'll say swift full thinking section of type some view open brackets paste that inside i'm going to paste our swiftful things thinking section the top of our list here let's click resume and still building i'm going to come down here and i'm going to copy this whole variable and just paste it again at the bottom create another section now i'm going to call this one coin gecko section the header will say coin gecko the image is going to be coin gecko as well so in the assets folder at the beginning of the course we added a coin gecko logo let's go back so the coin gecko logo is actually elongated it is longer than it is taller it's not square so i'm going to get rid of the width here let's just delete the width and let's make it dot uh scale to fit i think that might look good let's add our coin gecko section at the top quick underneath the list underneath the swivel thinking section let's click resume see what it looks like off the bat all right looks a little bit better um coin gecko let's change up the text here so in the coin gecko section let's say the cryptocurrency data that is used in this app comes from a from a free api from coin gecko let's say prices may be slightly delayed uh just giving coin gecko a little bit of credit as they do ask because it is a free api their website says that we do include their logo in any project that uses their api and of course we are super thankful because it's because it is so much data and a really cool api that usually you have to pay for things like that but coingecko is giving it to us for free and that is awesome of course let's change out this link so let's say uh visit coin gecko let's pass in our coin gecko url let's get rid of the second link here under this let's uh let's copy the coin gecko section paste again let's and let's call this section uh developer section this will be a section for you as the developer the let's put the header as developer and the image you guys should probably import an image of yourself but i'm just going to use the uh i'm just going to use our app image like we have at the top here so i'm just going to copy our logo from the swiffer thinking section and paste that in the developer section if you guys are using this as like part of your portfolio or something like that it would be awesome if you could put your own image here uh just so anyone that's actually looking at this could see who you are and why you made it and in this text i would add some data maybe about yourself so i'm just going to put here just myself so i'll say this app was developed by nick sarno and let's say um it uses swift ui and is written 100 in swift and maybe we'll say the project benefits from multi-threading because we use the background threads publishers slash subscribers and data persistence that's because we're saving it to core data you can put whatever you want here uh just some you know quick data for anyone that is looking at your portfolio looking at this uh settings section and finally put a link at the bottom maybe visit a website and you can put in your personal url your personal website and finally i'm gonna copy this paste one more section and that's gonna and here we're gonna have the application section i'm going to call this application and in this section we don't need this v stack so i'm going to delete it and we're just going to have a couple links so i'm going to change the destination to the default url which is just google and let's make the first one say um terms of service and let's copy this link paste it four times and we're gonna second one will say privacy policy third one we'll say company website and the fourth one may be learn more because when you do have your application in the app store you do need to include links to like in terms of service your private policy chances are you're going to have a website that is connected to your app so you'll probably want to put that somewhere in your settings view let's then take these sections let's put them in our app so we'll have the coin gecko section the developer section as well as the application section click resume on the canvas see if it all builds should look pretty cool we have our developer section hopefully you can put your own image here and our application section which is down here all looks good these links should be working we can test them on the simulator in a second but let's connect to this very basic settings view to the rest of our app so i'm going to jump back to the home view so i'm going to go to the home view and on the home view let's see all right so on the home view here i want to show this settings view in a sheet so we're going to create another let's put it right in between here we'll say at state private var show settings view of type bool we'll set it equal to false and this will also be a new sheet and i want to point out here because we are using multiple sheets on this view right we already have a sheet here and traditionally you can't really put two sheets in the same view hierarchy so because this sheet is already here we can't add another sheet right below it that would be two sheets on the same hierarchy but what we can do in this context here is add a sheet onto the v stack layer because this v stack layer is separate from this background layer so the the sheet that's on here and a sheet that's on this v stack will not be in the same hierarchy and that's why both of these will work so down here on this v stack let's add a dot sheet let's add the money sign show settings view and of course we want to show the settings view open close parenthesis and that should be all we need now all we need to do is toggle show settings view to actually show this and we want to do it when we click on this i button so let's find that i button and because our view is so neat we should very easily be able to tell that that is going to be in the home header jump to definition and here we have the info button and we have and it looks like we have some logic if show portfolio so if we're on the right tab it's going to toggle the portfolio view but if we are on the first tab so we'll say else and then we'll just show settings view dot toggle let's click resume on this canvas quick see if we can get it to work and click play we have our coins coming through i'm going to click this i and our settings view pops up in a new sheet it works let's make sure the edit portfolio still works as well which it looks like it does and then in our settings view it looks like all of our data is coming through which is awesome all right before we end the video i'm just going to run it on the simulator quick make sure it still works on the simulator as well so we're on the home screen we can click the i and settings we have the swivel thinking section so this app was made by following a swiftle thinking course on youtube it uses mvvm architecture which it definitely does we're actually using a more advanced architecture than just basic mvvm as you guys can tell because we have all of these files and folders we're really becoming expert developers here we're using combine and we use that in probably like 10 different files every time we call import combine we're using it and of course we're using core data because we are saving our portfolio to core data let's say subscribe on youtube let's see if it opens up our youtube which it does so if you're following and you are not yet subscribed we are up to 844 subscribers which is awesome uh so thank you guys all who have subscribed and if you haven't this would be a great time to hit that subscribe button uh if you are enjoying this course of course but going back to our app we also have the supporters coffee addiction which i am very thankful for any of you who do decide to support my coffee addiction i have 19 of you already have and i'm so thankful for that um you're more than welcome to buy me a coffee if you enjoyed this free course but scrolling down in our view we also have the coin gecko section so we can visit coin gecko and again the coin gecko api is super super cool if you guys are going to go and extend this app there's so much more you can download from coin gecko they have so much data that they provide for free so i highly recommend maybe checking out the other parts of their free api the prices are slightly delayed as we noted here i think they're delayed maybe like 5 to 15 minutes it says somewhere on their website but you know for our purposes that's not a big deal and then finally we have our developer section which hopefully you can put in your own picture here because this would be a great portfolio app if you're sending this to employers and the app was developed by you you can say that now it does use swift ui we wrote it 100 in swift and we used multi-threading that's that's because we used a bunch of different background threads when we were downloading data we use publishers publishers and subscribers all around our app this is a fairly new and innovative technique in ios development it is definitely the future so if you are using these publishers and subscribers in your apps employers will definitely like to see that and of course we use data persistence because we can close our app we can open our app and it will reload from core data which is awesome hopefully you can put in your own website link here but i just noticed that i do not want to put this uh party emoji for all of these so quickly on the settings view let's just change out those emojis so the coin gecko one i'm gonna put the let's do control command space let's type in maybe gecko yeah lizard we got a lizard emoji and then for visit website you can put in your own personal emoji i'm going to put in maybe i'm going to put in my favorite one which is the i guess it's called the call me hand sign i love this emoji i think it's so cool and let's finish up here we have our application section with terms of service private policy company website learn more obviously they all just go to google right now but the point is that we do have a successful settings section in our app which is which is pretty much a standard in all apps alright that's it for this video and we are so close to finishing this app one thing you guys probably did notice is that if we swipe down to the home view we have not set up our logo or our launch screen and we're gonna jump into that in the next video alright guys thank you for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music] you

Channel: Swiftful Thinking

Views: 1,213

Keywords: SwiftUI List, SwiftUI list with sections, SwiftUI list sections, SwiftUI Settings View, SwiftuI sheet, SwiftUI sheet settings, Add settings view swiftUI app, SwiftUI how to add sheet, SwiftUI how to use sections

Id: nJuRNY8nhuA

Length: 24min 35sec (1475 seconds)

Published: Wed Jun 16 2021