The problem: When I lunch the app, the first tabview doesn't display the name below. I have to go to another view and come back for it to show. Why?
struct MotherView : View {
var body: some View {
VStack {
if viewRouter.currentPage == "onboardingView" {
OnboardingView()
} else if viewRouter.currentPage == "homeView" {
TabView {
HomeView()
.tabItem {
Image(systemName: "house")
Text("Menu")
}
SettingsView()
.tabItem {
Image(systemName: "slider.horizontal.3")
Text("Order")
}
}
}
}
}
}
We can just guess, because you didn't show us the code of your HomeView.
Nevertheless I guess in your HomeView you have this line .navigationBarTitle("", displayMode: .inline).
Remove it and it will work as expected.
Related
I have a problem. I have empty space on the top of my views, and I think that the problem is the Navigation View. View Image
I figured it out to make it work and hide that empty space with this line of code, but if I'm using this approach, my toolbar items dissapears too, and I do not want this.
.navigationBarHidden(true)
I'll share my code below. Thanks !
TabView{
NavigationView{
VStack {
MeniuriView()
NavigationLink(isActive: $optionsActive) {
WaitingOrderView()
.environmentObject(syncViewModel)
} label: {
EmptyView()
}
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
ToolbarButtons(numberOfProducts: menus.count) {
optionsActive = true
}
}
ToolbarItem(placement: .navigationBarLeading) {
Text(Texts.mainViewText1)
.font(.system(size: 24))
.fontWeight(.bold)
.padding()
}
}
}
.tabItem {
Text(Texts.mainViewText2)
Image(systemName: "fork.knife")
}
}
struct MeniuriView: View {
#EnvironmentObject var syncViewModel : SyncViewModel
var body: some View {
List {
ForEach(syncViewModel.menuType) { type in
SectionView(menuType: type)
}
}
.listStyle(PlainListStyle())
}
}
The space is reserved for the (large) NavigationTitle. You can use
.navigationBarTitleDisplayMode(.inline)
on the NavigationView to make it small. And if its empty, it won't show.
I'm trying to create a tabview for a macOS 10.15 app.
TabView {
BookmarksView()
.tabItem {
Text("Bookmark Settings")
}
DisplaySettings()
.tabItem {
Text("Display Settings")
}
}
And in any of my views included in the tab that has one element in the body it renders properly in the tab view.
struct BookmarksView: View {
var body: some View {
Text("Bookmarks View")
.font(.title)
.font(Font.body.bold())
}
}
But if i add any other element in the view, the tab repeats and shows the added element in its own tab.
struct BookmarksView: View {
var body: some View {
Text("Bookmarks View")
.font(.title)
.font(Font.body.bold())
Text("Testing")
.font(.system(size: 15))
}
}
Try to wrap them in container (stack or something) explicitly, like
struct BookmarksView: View {
var body: some View {
VStack { // << this !!
Text("Bookmarks View")
.font(.title)
.font(Font.body.bold())
Text("Testing")
.font(.system(size: 15))
}
}
}
I have the following in problem.
If I try to give a view a color (Color.red for example)
I get the following output:
I can just add .edgesignoressafearea(.top) and the top also gets red. But when I want to add an clickable item, the user won't be able to click it since there still is this invisible bar on the top of the screen. Does Anyone know what my problem is? The problem is in all the tabable views(Timeline, Favorits, Discover, Account). So It must be in either the first code or in tabview (second code) that I send in this post.
When the user clicks on the app first they get this view sending the user to the signin view or the app itself:
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: tabView().navigationBarHidden(true), isActive: $tabview, label: { EmptyView() })
NavigationLink(destination: loginView().navigationBarHidden(true), isActive: $login, label: { EmptyView() })
if tabview == false && login == false {
Text("loading")
.onAppear(perform: checklogin)
}
}
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
}
Then the apps sends them to tabview:
var body: some View {
TabView(selection: $selection) {
Timeline()
.tabItem {
Label("timeline", systemImage: "house")
}
.tag(0)
Favorits()
.tabItem {
Label("favorits", systemImage: "heart")
}
.tag(1)
Discover()
.tabItem {
Label("discover", systemImage: "network")
}
.tag(2)
Account()
.tabItem {
Label("account", systemImage: "person")
}
.tag(3)
}
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
The problem happens on all of this views.
This is the view where I made the screenshot of:
var body: some View {
ZStack {
Color.red
Text("Hello fav!")
}
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
add .edgesIgnoringSafeArea(.top) and remove your navigation bar if you don't want to be able to get back to your login view anytime.
That's the full code with a login page, now it depends what you want on that login page :
import SwiftUI
struct ContentView: View {
#State var showLoginView: Bool = false
var body: some View {
VStack {
if showLoginView {
MainView()
} else {
Button("Login") {
self.showLoginView = true
}
}
}
}
}
struct MainView: View {
var body: some View {
TabView {
TimeLine()
.tabItem {
Label("timeline", systemImage: "house")
}
Favorits()
.tabItem {
Label("favorits", systemImage: "heart")
}
Discover()
.tabItem {
Label("discover", systemImage: "network")
}
Account()
.tabItem {
Label("account", systemImage: "person")
}
}
}
}
struct TimeLine: View {
var body: some View {
Color.blue
.edgesIgnoringSafeArea(.top)
}
}
struct Favorits: View {
var body: some View {
ZStack {
Color.red
.edgesIgnoringSafeArea(.top)
Text("Hello fav!")
}
}
}
struct Discover: View {
var body: some View {
Color.yellow
.edgesIgnoringSafeArea(.top)
}
}
struct Account: View {
var body: some View {
Color.purple
.edgesIgnoringSafeArea(.top)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You need to set the navigation Title to "" because your View is embedded in NavigationView
Create a ViewModifier like this and apply it to your VStack
struct HiddenNavBarModifier: ViewModifier {
func body(content: Content) -> some View {
content
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
}
}
The app I am working on is based around a TabBar, and when I am on a tab I want to be able to click the tabItem again to reset the view, similar to how Twitter does it in their tabBar.
I do not know how to recognize that action though. Adding a button to the TabItem is not working, addidng a tapGesture modifier isn't either, and I can't think of anything else I could try.
struct ContentView: View {
var body: some View {
TabView() {
Text("Tab 1")
.tabItem {
Image(systemName: "star")
.onTapGesture {
print("Hello!")
}
Text("One")
}
.tag(0)
Text("Tab 2")
.tabItem {
Button(action: {
print("Hello!")
}, label: {
Image(systemName: "star.fill")
})
}
.tag(1)
}
}
}
It should't automatically reset when opening the tab again, which I have seen discussed elsewhere, but when tapping the tabItem again.
What other things am I possibly missing here?
Here is possible solution - inject proxy binding around TabView selection state and handle repeated tab tapped before bound value set, like below.
Tested with Xcode 12.1 / iOS 14.1
struct ContentView: View {
#State private var selection = 0
var handler: Binding<Int> { Binding(
get: { self.selection },
set: {
if $0 == self.selection {
print("Reset here!!")
}
self.selection = $0
}
)}
var body: some View {
TabView(selection: handler) {
Text("Tab 1")
.tabItem {
Image(systemName: "star")
Text("One")
}
.tag(0)
Text("Tab 2")
.tabItem {
Image(systemName: "star.fill")
}
.tag(1)
}
}
}
I can't change the TabBar Color in SwiftUI. I try it with the TabbedView, with the Image/Text and with a Stack. Nothing works for me.
using .foregroundColor doesn't work.
TabbedView(selection: $selection){
TextView()
.tag(0)
.tabItemLabel(
VStack {
Image("Calendar")
.foregroundColor(.red)
Text("Appointments")
.foregroundColor(.red)
}
).foregroundColor(.red)
}.foregroundColor(.red)
Solution 1
Use renderingMode(.template)
struct MainView: View {
var body: some View {
TabView {
LoginView().tabItem {
VStack {
Text("Login")
Image("login").renderingMode(.template)
}
}
HomeView().tabItem {
VStack {
Text("Home")
Image("home").renderingMode(.template)
}
}
}.accentColor(.orange)
}
}
Solution 2
Make tabItem type
enum TabViewItemType: String {
case login = "login"
case home = "home"
case search = "search"
var image: Image {
switch self {
case .login: return Image("login")
case .home: return Image("home")
case .search: return Image("search")
}
}
var text: Text {
Text(self.rawValue)
}
}
struct MainView: View {
var body: some View {
TabView {
LoginView()
.tabItem { TabViewItem(type: .login) }
HomeView()
.tabItem { TabViewItem(type: .home) }
SearchView()
.tabItem { TabViewItem(type: .search) }
}.accentColor(.orange)
}
}
struct TabViewItem: View {
var type: TabViewItemType
var body: some View {
VStack {
type.image.renderingMode(.template)
type.text
}
}
}
Use accentColor:
TabView(selection: $selection) {
NavigationView {
HomeView()
}.navigationBarTitle("Home")
.tabItem {
VStack {
if selection == 0 {
Image(systemName: "house.fill")
} else {
Image(systemName: "house")
}
Text("Home")
}
}
.tag(0)
NavigationView {
SettingsView()
}.navigationBarTitle("Settings")
.tabItem {
VStack {
Image(systemName: "gear")
Text("Settings")
}
}
.tag(1)
}.accentColor(.purple)
You can use UITabBar.appearance() to do some customisation until Apple comes with a more standard way of updating SwiftUI TabView
Change TabItem (text + icon) color
init() {
UITabBar.appearance().unselectedItemTintColor = UIColor.white
}
Change TabView background color
init() {
UITabBar.appearance().backgroundColor = UIColor.red
UITabBar.appearance().backgroundImage = UIImage()
}
Overall code looks like this -
struct ContentView: View {
init() {
// UITabBar customization
}
var body: some View {
TabView(selection: $selection) {
FirstTabView()
.tabItem {
VStack {
Image(systemName: "map")
Text("Near Me")
}
}
}
}
}
Use .accentColor modifier for changing color of selected tabItem
After trying many options this worked for me..
I think you can just use the accentColor of TabView，it works for me :]
TabView {
...
}.accentColor(Color.red)
I made an extension for Image which initialises with a UIImage with a tint color:
extension Image {
init(_ named: String, tintColor: UIColor) {
let uiImage = UIImage(named: named) ?? UIImage()
let tintedImage = uiImage.withTintColor(tintColor,
renderingMode: .alwaysTemplate)
self = Image(uiImage: tintedImage)
}
}
On iOS16 .accentColor(Color) is deprecated.
You can use .tint(Color) on the TabView instead.
TabView {
Text("First Tab")
.tabItem {
Image(systemName: "1.circle")
Text("First")
}
}.tint(Color.yellow)
Currently SwiftUI does not have a direct method for that.
We've to use the UIKit method for that unless SwiftUI introduces any new solution.
try below code:
struct ContentView: View {
init() {
UITabBar.appearance().backgroundColor = UIColor.purple
}
var body: some View {
return TabbedView {
Text("This is tab 1")
.tag(0)
.tabItem {
Text("tab1")
}
Text("This is tab 2")
.tag(1)
.tabItem {
Text("tab1")
}
Text("This is tab 3")
.tag(2)
.tabItem {
Text("tab1")
}
}
}
}
In case you need to set up accent color for entire app with SwiftUI interface, you just need to define AccentColor in Assets.xcassets file like in the picture below. TabBar icons will get it without any additional code.