I have a tabView and I'm trying to change it's color. Using accentColor(:_) works but it's going to be deprecated.
TabView {
AppetizerListView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
AccountView()
.tabItem {
Image(systemName: "person")
Text("Account")
}
OrderView()
.tabItem {
Image(systemName: "bag")
Text("Order")
}
}
.accentColor(Color("brandPrimary"))
Instead I've tried to use .tint(:_) as Apple suggests but is not working (it builds but does not change the color).
TabView {
AppetizerListView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
AccountView()
.tabItem {
Image(systemName: "person")
Text("Account")
}
OrderView()
.tabItem {
Image(systemName: "bag")
Text("Order")
}
}
.tint(Color("brandPrimary"))
I also tried using .tint(_:) in each TabItem but it's also not working.
Any idea of what's going on or which is the correct way of making my code work as expected without using deprecated functions?
Maybe I'm using tint in a wrong way
Thanks!
I've found the solution to the problem, but I'll leave the post here for anyone who has the same problem.
What you have to do is to go to the Assets folder and define the AccentColor (that it has to be already created) as the color that you want your bar to be.
No modifiers have to be added to the tabView and it will automatically be showing the tabView with the color you defined as the AccentColor in your Assets folder.
Related
Not sure if I am doing something wrong or if this is just how the TabView in SwiftUI appears now, but it seems to me that the images at the bottom seem much closer to the top border than in previous iOS versions (I am testing on iOS 16).
Here is the code I am using to render this:
struct MainView: View {
var body: some View {
TabView {
NavigationView {
ScrollView {
RoundedRectangle(cornerRadius: 16)
.frame(height: 1000)
.padding()
}
.background(.green)
}
.tabItem {
Image(systemName: "house.fill")
}
.toolbarBackground(.background, for: .tabBar)
NavigationView {
LikesView()
}
.tabItem {
Image(systemName: "heart")
}
NavigationView {
MatchesView()
}
.tabItem {
Image(systemName: "bubble.left")
}
NavigationView {
ProfileView()
}
.tabItem {
Image(systemName: "person")
}
}
.tint(.primary)
}
}
Am I missing something that would cause the images to be higher up in the tab bar or is that just how the standard tab bar looks now?
It looks default to me, just from a brief judgement between a couple other simulators and iOS versions. It does look maybe slightly higher on the 14 Pro Max, compared to something like the 11 Pro Max, since the symbols seem to be a little larger.
There is the ability to add text below the Image with a label which you may be used to seeing:
Label("Messages", systemImage: "bubble.left")
This question already has an answer here:
How to change taskbar color and sf symbol colors?
(1 answer)
Closed 7 months ago.
I have an app with a tab bar that I would like to customize. The background color for the tab bar should be hex color #DC4848, and the icons white.
struct ContentView: View {
var body: some View {
TabView {
// Home page tab
NavigationView {
HomeView()
}
.tag(0)
.tabItem {
Image(systemName: "house")
.resizable().aspectRatio(contentMode: .fit)
.foregroundColor(.white)
Text("Home")
}
// Explore Page
NavigationView {
PreviewView()
}
.tag(1)
.tabItem {
Image(systemName: "magnifyingglass")
Text("Explore")
}
// Library Page
NavigationView {
HomeView()
}
.tag(2)
.tabItem {
Image(systemName: "ellipsis")
Text("More")
}
}
}
}
I tried accent color but it didn't work.
I ran into this problem myself. Just add this code to the top of your content view and it should fix it.
init() {
UITabBar.appearance().unselectedItemTintColor = UIColor.white
UITabBar.appearance().backgroundColor = UIColor(Color(hex: "DC4848"))
UITabBar.appearance().backgroundImage = UIImage()
}
I have a TabView in SwiftUI with tabs. When I scroll list from one FirstView and tap another tab, and switch back to FirstView, my List in FirstView automatically redraws and scrolls to top. How to fix that.
enter link description here
This is FirstView
var body: some View {
NavigationView {
List {
ForEach(feed) { game in
FeedCardItem(gameModel: game)
.frame(width: UIScreen.main.bounds.width - 30, height: 400)
}
}
.navigationBarTitle(Text("Новое сегодня"))
}
}
This is TabView implementation
TabView (selection: $currentTab) {
FeedView().tabItem {
Image(systemName: currentTab == 0 ? "house.fill" : "house")
.renderingMode(.original)
.imageScale(.large)
}.tag(0)
RecommendationsView().tabItem {
Image(systemName: currentTab == 1 ? "gamecontroller.fill" : "gamecontroller")
.renderingMode(.original)
.imageScale(.large)
}.tag(1)
SearchView().tabItem {
Image(systemName: currentTab == 2 ? "flame.fill" : "flame")
.renderingMode(.original)
.imageScale(.large)
}.tag(2)
NotificationsView().tabItem {
Image(systemName: currentTab == 3 ? "bell.fill" : "bell")
.renderingMode(.original)
.imageScale(.large)
}.tag(3)
ProfileView().tabItem {
Image(systemName: currentTab == 4 ? "person.fill" : "person")
.renderingMode(.original)
.imageScale(.large)
}.tag(4)
}.edgesIgnoringSafeArea(.top)
}
I don't think it is possible via SwiftUI. The alternate to do this is to create the tabview in UIKit and use it in SwiftUI.
I have created a quick sample of how this can be achieved and how it solves your issue. Let me know if you have any other questions.
I have uploaded the code to GitHub.
https://github.com/subhan5/TabTest
In the uploaded code, the folder UITab contains the tabview created via UIKit.
In ContentView, I convert the same as UIViewControllerRepresentable and use it.
I have the same problem, and found this solution: https://kavsoft.dev/SwiftUI_2.0/Tab_Bar
Basically, you could just hide the content of one tab instead of replace it with another content view. I thought this solution is a little tricky but works.
it is possible with the UITableViewConfigurator which is described here: Scroll SwiftUI List to new selection
But of course...this uses UIViewControllerRepresentable....
So I created a tabview in SwiftUI but it keeps showing the 'three dots more' tab. How do I remove that?
TabView{
Text("")
.tabItem {
Image(systemName: "house")
Text("Home")
}
Text("")
.tabItem {
Image(systemName: "magnifyingglass")
Text("Search")
}
Text("")
.tabItem {
Image(systemName: "plus")
Text("Add")
}
Text("")
.tabItem {
Image(systemName: "suit.heart")
Text("Likes")
}
Text("")
.tabItem {
Image(systemName: "person")
Text("Profile")
}
}//end tabview
Without more code it is not easy, to determine the reason for this behavior.
Check if the SceneDelegate window.rootcontroller points to your struct, where the TabView is located, not to the normal contentView
Replace the Textstrings with Views like:
TabView{
FirstView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
}
Check, that there is no Text between Tabview and the first TabItem, because the TabView interprets this as an additional Tabitem
TabView{
Text("this causes the error")
FirstView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
With these three tips your Tabbar should work
I'm working with Xcode 11.3
I am trying to open one Contentview with NavigationLink.
But I dont get how to hide bottom tab bar when some view gets appear. I tried looking for code everywhere. but couldn't find anything helpful.
NavigationLink(destination: ItemDetail(item: item)){
}
that is how i open new view
This is to little code, but assuming you have a TabView and inside one of the TabView elements you have an NavigationLink, then you can hide the TabView for a specific view by adding the .navigationBarHidden(_ hidden: Bool) modifier.
https://developer.apple.com/documentation/swiftui/view/3338624-navigationbarhidden
Example:
struct ContentView: View {
var body: some View {
NavigationView {
TabView {
NavigationLink(destination: Text("NavigationLinkView")){
Text("NavigationLink")
}
.navigationBarHidden(true)
.tabItem {
Text("First View")
}.tag(0)
Text("Second View")
.tabItem {
Text("Second View")
}.tag(1)
}
}
}
}