How to add Badges to SwiftUI TabView and List in iOS 15 | Bootcamp #59

[Music] what's up everyone another quick video coming at you guys today we're gonna look at how we can add badges uh into our swift ui apps now badges probably should have been in the first iteration of swift ui i don't know why apple didn't include this the first time but basically when we have a tab bar and we want to put a little icon indicating how maybe how many notifications are on that tab we do that using a batch we've had badges in ui kit for a long time now but we did not have them in swift ui until ios 15. so in this video we're going to take a quick look at how we can add a badge we're also going to look at how we can add badges or badges uh to lists so we can add them to lists they look a little different not like a typical badge it's still called badge though uh but still a nice feature to have so let's jump into xcode and take a look all right we are back in our xcode project let's right click the navigator create a new file it'll be a swift ui view and let's call this one badges bootcamp let's click create let's click resume on the canvas to make sure we are connected here and uh this one again will be a pretty simple video i wish these had come out when i first created this boot camp because i would have included them in the original videos of course and there are two places that we can use badges in swift ui if uh if we call that badge here we can add an account it's not going to do anything but if we right click and jump to the definition of badge at least as of today when i'm making this we can see that badges are only displayed in list rows and tab bars so we can i guess add badge anywhere in our code but it's really only going to work on a list or a tab view so let's write that down list and tab it said tab bar but really we're gonna have to use a tab view and if you are just joining i did cover tab view in its own series earlier in its own video earlier in this series so we have a whole video on tab view if you don't know how to use it but let's create a really simple one we'll just create a a blank tab view here open the brackets inside i'm just going to put let's do color.red color.color.green and color.blue these will be our three tabs each tab is gonna have a tab item click enter tab item we'll have an image we'll use a system name let's do heart.fill and a text that says let's just say hello for a second and we can see the tabs coming in here and i'm going to just copy and paste this tab item on all three and i want to point out again that the color in the tab bar is the color of the accent color in your project so my project right now has this orange tint if i go to the access if i go to the assets folder that's because our accent color is this orange if i were to get rid of this color come on back we'll get back to our native default blue uh but this video is all about the badges so really simply we can add a dot badge and we're gonna go down to the count option and let's just put in the number five and it's really that simple now we can add badges to our tab bar which is so convenient because normally because before this we could obviously not do this so we got badge here and all we have to do now is to update this number just like we update anything else in swift ui and it will update the badge automatically a really cool thing to point out here is that if the badge is zero it will just not display which is perfect because we don't want badges to pop up here if there's actually zero notifications but i do want to point out that generally we will use numbers here but we can also use strings so if we want the badge to say like new we could do something like that and we get that coming in the other place that we can use the badges of course and i'll comment this out is in a list let's put in a list choose text and let's just say hello world let's just paste a couple of these and we can call badge again with a count or a text usually on a list i think a text is more relevant now and we can say something like new items and the badge on the list looks a little different it's not a little red icon but it's some content on the right side that is in a secondary text color so our primary color is black here but our secondary badge here is light gray again we can use numbers here if we want and that's pretty much it and so now you guys know how to use badges which is pretty convenient when we're using lists or tab views thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music]

Channel: Swiftful Thinking

Views: 341

Keywords: SwiftUI Badge, Swiftui badge, swiftUI badges, SwiftUI tabbar, SwiftUI TabView, SwiftUI tab badge, SwiftUI tab icon, SwiftUI tab notification, SwiftUI tab alert

Id: Nt1loGvkQkM

Length: 5min 4sec (304 seconds)

Published: Mon Dec 13 2021