Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extra navigational view above the tab bar with SwiftUI

Tags:

ios

swiftui

I want to do something similar to what's being done in the apps Photos and Podcasts in iOS 13.

Both of these apps have an extra view attached to the tab bar. In the Photos app it's a second row of navigation, like a sub menu and it's only present in one tab. In the Podcasts app it's a minified player and it's availble in all tabs.

What are my options for doing something like this when using SwiftUI? Is there a way to attach an extra view to the tab bar? Or should go with a ZStack inside each tabItem and duplicate my extra view within each ZStack?

Screenshot from Photos app in iOS 13.2.3

Screenshot from Podcasts app in iOS 13.2.3

like image 353
oivvio Avatar asked Nov 23 '19 21:11

oivvio


1 Answers

You can use .overlay modifier on the persist view (TabBar, NavigationView, etc.) for example:

TabView { ,,, }
.overlay(
    Rectangle()
    .foregroundColor(.red)
    .frame(width: 40, height: 40)
)

Of course with the correct configuration! This is just a demo to see how you can have a persistent view.

Also you can define your own custom modifier and apply it on the tabbar. The only thing matters here is to applying it on the persistent view. So you don't need to duplicate your extra view within each view.

like image 161
Mojtaba Hosseini Avatar answered Oct 29 '22 09:10

Mojtaba Hosseini