Navigation Tabs

[00:00:00]
>> Okay, so as I was mentioning here, it doesn't look like an app yet. So, things like tabs, I'm pretty sure you think like, that looks like a lot of work, creating the tabs at the bottom. You're going to see it's really simple, really simple, believe me. So look at this.

[00:00:18]
I'm going to ContentView, ContentView is my initial element that right now has just the OffersPage. It's rendering the OffersPage. Instead of doing that, I'm going to render a TabView, okay, TabView. And now, OffersPage will become one of the options in the TabView, okay, just that. So also apart from OffersPage, we have more options, I'm going to, for now, create a text that says Home Page.

[00:00:56]
Then we have OffersPage, and we say we have the Order Page, and we have the Info Page, okay, like so. So if I do this interactivity, so I see the Home Page and nothing else. What's the Home Page? A text, It's a text saying Home Page. That's all.

[00:01:23]
So something that I can add to each of these elements is, I can add quickly a tabItem. What is a tabItem? The icon and the text that we want for that particular element, okay? If you go to the website, we're actually working here in 4.1 using TabViews, okay?

[00:01:52]
So we want a tabItem. So there are many ways to use a tabItem, one of those is this one. So if you create an image and a text, this is called Home Page, okay, like so. That's fine. And then I need an image, or do we need an icon, so we need the PNG or the SVG?

[00:02:18]
Well, Apple includes a collection of several thousands open source and free icons to use. So instead of how to use those, we create an image with a system name and our info. Look at the bottom, can you see that? Can you spot that thing that appear there that says Info?

[00:02:44]
So where can I find all the icons that I can use? Here at the bottom, you have a link in the Companion website that goes to the Apple website, to an app called SF Symbols. SF Symbols, It's SF from San Francisco, because that's the name of the font that Apple is using in IOS.

[00:03:11]
So this is the name of an app that you can install on your Mac, so you can download that app from here, where you can browse. It's not in the App Store, the app, it's just an installer that you download from here. You can browse all the icons, By topic or you can search, okay?

[00:03:32]
And then, for example, if I want that one, this is the string that I have to use, pencil.circle.fill. I don't want that one but just for testing this, if I use pencil.circle.fill, it appears there. Okay, I have already picked a couple of icons, so I will just apply the tabItem modifier to each children of the TabView.

[00:04:07]
And we have homepage, we have offers, we have order, and we have info, okay? Well, for info, I think I do want the icon info. And for the others, I have already spent some time searching for the right icon. So I have cup and saucer for the homepage,, Tag for offers and cart.

[00:04:42]
So, sure for doing this, if you have the preview in an interactive mode, you can actually change the tab. And you see that. And I can get into the offer section, that is the one that is ready. The cart, info, and homepage, they are just text for now.

[00:05:10]
But here, you can see how easy is to have an app. Now, with tab navigation, you just create a TabView with children, each children having a modifier with the name tabItem that sets the image and the text. You can use images from here or you can have your own PNG or SVG files with your own icon.

[00:05:32]
What about the blue color? So you can see the tabs. They are blue. Where is this blue coming from? So I didn't set any color anywhere. And in my assets, I don't have any blue. So that's the default, tint or accent color. If you wanna change that, probably you haven't seen that or you didn't pay attention.

[00:05:56]
There was a color already set in my AccentColor that has no content, no color. So because it has no color, actually the tab is taking that AccentColor. If it's empty, the default is blue, okay? But I can change that, and I can use the same secondary color or any color that you like.

[00:06:22]
So we can copy and paste. It has to have the name AccentColor, okay? So it's taking the color from there. So I'm going to click here, and the color, I can select one from here. Or I can even select a custom color and I'm going to see hexadecimal.

[00:06:47]
So it can also be the green one, anyone will work. And now from here, let's resume. And now, you can see it's not blue anymore. And the icon is changing as well, because the icon, SF Symbols icons, will actually take foreground colors, because they are like fonts. We're gonna apply font properties to it.

[00:07:13]
So you change the accent color. Of course, we have ways to manipulate that color and set the color individually per item. But we have, quickly, a nice behavior.