From the course: Complete Guide to SwiftUI

Toolbars

From the course: Complete Guide to SwiftUI

Start my 1-month free trial Buy for my team

Toolbars

“

- [Instructor] Some of our navigation bars are hard to see, like the back button here. The bars are also taking up lots of UI real estate, compressing our pepperoni title. You can also see something similar if you go over here to menu. And let's go pick up another deep dish here. You can see back is okay up here, but the tab bars down here aren't. So we're going to go fix some of these issues and learn a little bit more about toolbars now. So let's start here in menu item view and go to menu item view and go to the bottom of the code for that. And just above where it says the backgrounds here, we can start putting some code in. And the first one we're going to look at is the navigation bar back button hidden. And what this will do, let's just put this in here, is it hides your navigation bars. Go ahead and run that now and see what happens. Go to content view and click a Huli check. And you can see that our back button now disappears. We still got the tab bars down here, but we got the back button. I can get rid of the tab bars. You can hide whatever you want with the toolbar visibility modifier. And this has a visibility. So we can do this, we can see the options here and it's automatic, hidden, invisible. I'm going to hide it and say, okay, I just don't want it here. And then for toolbar placement, I'll put a period here and you'll see that there are different places where you can put this. So we got automatic bottom bar, navigation bar, and we want the tab bar. So we can just put like that and it will make the tab bar disappear. Now if we were to run it, let's take a look. You can see what happens. We don't have anything up here. And so we've got plenty of space there and we don't have anything down here. So we've got just our buttons here for some things like say a detailed view like this, you may want to do something like that. But let's go to a next issue that we might want to see. And that is what if you wanted to display something on there? And I'm going to go ahead and go over to order detail view for this. And in order detail view, we're going to look at a couple things. Let's go down to the bottom of the code here again and just below on up here and right here, I'm going to put some code. The first one I want to show you is that you can use navigation titles and those are titles that will have the context of whatever's going on in your view that you're going to put on the navigation bar. So for example, I can put navigation title, order item, item names. So I have the name of the item. Okay. And let's go ahead and try that and we'll pick a Hawaiian pizza and we'll start with that. Okay, now we go over here to orders. Go to Hawaiian. You can see that it says Hawaiian right here, which is the title. I can go one step further with this. Let's go back over here to order detail view. And this has the ability to change due to context, which is how it's set now for its size. I'm going to change it using navigation bar title display mode to a different mode. And you can see we've got a whole bunch of different issues here. We can use inline, large, automatic here. And I'm going to use the large, we're currently seeing the inline, so we're going to do large and then automatic figures out which one to use depending on what the device is. But we go ahead and go back over here, give another shot. And now we have a big title here. This of course crunches this one a little bit and they are kind of redundant here, but I'm just doing it to show you how this would work. Navigation titles are an effective way of explaining what view you are on, often using the real estate already allocated for other navigation functions.

Contents