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()
}
Related
I am still learning SwiftUI and I have come across a small problem.
In my app, I have a main view. On the top is a search bar and at the bottom, a menu with different buttons. I want to change views when clicking those buttons. However, I only want to change the middle section.
No big deal, I will just put the middle part into a NavigationView. That works alright and I am able to change my views. My problem is that the buttons below do not have any impact on the new view.
To try to simplify: Let’s say I’m on home page. I then click the grocery list button (guess what I’m making school projects lol). My navigation link works just fine and goes to the list. So, now I’m on view 2 let’s say. When I press the home button, it doesn’t close that view and go to my main one. Here is my code setup:
import SwiftUI
struct ContentView: View {
#State private var searchText: String = ""
#State private var action: Int? = 0
var body: some View {
ZStack {
// Top Menu
VStack{
HStack {
Spacer()
TextField("Search",
text: $searchText)
.background(Color.white)
Button(action: {
self.action = 1
}, label: {
Image(systemName: "magnifyingglass.circle")
.font(.largeTitle)
})
Spacer()
}
// Body
NavigationView {
VStack {
Text("Can I See Something")
NavigationLink(destination: SearchView(), tag: 1, selection: $action) {
}
Text("Yes/No")
}
}
Spacer()
// Bottom Menu
HStack (alignment: .top) {
Spacer()
VStack {
Button(action: {
}, label: {
Image(systemName: "house.fill")
.font(.largeTitle)
})
.padding(.top)
Text("Home")
}
Divider()
.padding(.horizontal)
.frame(width: 2.5, height: 100)
VStack {
Button(action: {
}, label: {
Image(systemName: "newspaper")
.font(.largeTitle)
})
.padding(.top)
Text("Weekly\nAd")
.multilineTextAlignment(.center)
}
Divider()
.padding(.horizontal)
.frame(width: 2.5, height: 100)
VStack {
Button(action: {
}, label: {
Image(systemName: "checklist")
.font(.largeTitle)
})
.padding(.top)
Text("Grocery\nList")
.multilineTextAlignment(.center)
}
Divider()
.padding(.horizontal)
.frame(width: 2.5, height: 100)
VStack {
Button(action: {
}, label: {
Image(systemName: "person.crop.circle")
.font(.largeTitle)
})
.padding(.top)
Text("Account")
}
Spacer()
}
}
}
}
}
struct SearchView: View {
var body: some View {
ZStack {
Text("Nothing to see here!")
}
.navigationBarBackButtonHidden(true)
}
}
SearchView is a separate view (in its own file) in the app that opens up when the magnifying glass button is pressed. Currently it does not do anything. However I want to be able to press those buttons on this view above to still navigate the app.
Also, on another note, is there anyway to get rid of the back button?
In your code the buttons do not have any function.
Instead of creating a tab bar on your own, I'd rather take something like:
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
MainView()
.tabItem {
Label("Home", systemImage: "house.fill")
}
NewsView()
.tabItem {
Label("Weekly\nAd", systemImage: "newspaper")
}
OrderView()
.tabItem {
Label("Grocery\nList", systemImage: "checklist")
}
AccountView()
.tabItem {
Label("Account", systemImage: "person.crop.circle")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct MainView: View {
var body: some View {
Text("Home View")
}
}
struct NewsView: View {
var body: some View {
Text("News View")
}
}
struct OrderView: View {
var body: some View {
Text("Order View")
}
}
struct AccountView: View {
var body: some View {
Text("Account View")
}
}
In that case you'll have to create a view for each tab you are configuring (see the last 4 structs).
If you want to do it with a Stack with your own created buttons, I think you should create al 4 views as well and then you either hide them or put them out of focus by using an offset. In that case the buttons should hide/show the specific views or change the offset accordingly to move the specific views into the visible area. With the offset you also can add some animation.
Regarding the search bar on top of your app, since the views are all different, I wouldn't keep the same search bar everywhere, but if you really want to have it that way, you can embed the code + your search bar into a VStack (as you did it in your example).
I'm trying to change the brightness of a TabView in SwiftUI, but whenever the brightness toggles, the sub-views change their vertical position. This is highly mysterious to me, as it seems strange for brightness to have any influence at all on the position of views.
If you've been following my past few questions, you might recognize that I want to change the brightness because I want to dim the background view as a new view slides up (on the press of a button). That's why, in the sample code, we must include the Z-Stack.
Sample Code:
struct ContentView: View {
#State var press: Bool = Bool()
var body: some View {
ZStack {
TabView {
NavigationView {
Button(action: { press.toggle() }) {
Text("Toggle")
}
}
.tabItem {
Image(systemName: "square.stack").font(.title)
Text("View One")
}
NavigationView {
Button(action: { press.toggle() }) {
Text("Toggle")
}
}
.tabItem {
Image(systemName: "checkmark.square")
Text("View Two")
}
}
.brightness(press ? -0.1: 0)
}
}
}
The issue is with the multiple NavigationViews that are inside the TabView You really are supposed to have only 1 NavigationView at the root of the view hierarchy. Using multiple NavigationViews is discouraged and can lead to unexpected results, like this. Therefore, the inside of the body should be:
NavigationView {
ZStack {
TabView {
Button(action: { press.toggle() }) {
Text("Toggle")
}
.tabItem {
Image(systemName: "square.stack")
Text("View One")
}
Button(action: { press.toggle() }) {
Text("Toggle")
}
.tabItem {
Image(systemName: "checkmark.square")
Text("View Two")
}
}
.brightness(press ? -0.1: 0)
}
}
This question already has answers here:
How to put a logo in NavigationView in SwiftUI?
(8 answers)
Having Tab bar and Navigationbar in the same View in SwiftUI?
(2 answers)
Closed 1 year ago.
I want to use a logo image in the navigation bar's title, instead of plain text. Here some solution for UIKit, but I want to use for SwiftUI also. Any idea will be appreciated.
Screenshot:
ContentView:
struct ContentView: View {
#State private var isShowing = false
var body: some View {
ZStack {
if isShowing {
SideMenuView(isShowing: $isShowing)
}
TabView {
NavigationView {
HomeView()
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
.tabItem {
Image(systemName: "1.circle")
Text("Page 1")
}
NavigationView {
HomeTwoView()
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
.tabItem {
Image(systemName: "2.circle")
Text("Page 2")
}
}
.edgesIgnoringSafeArea(.bottom)
//.cornerRadius(isShowing ? 20 : 0) //<< disabled due to strange effect
.offset(x: isShowing ? 300 : 0, y: isShowing ? 44: 0)
.scaleEffect(isShowing ? 0.8 : 1)
}.onAppear {
isShowing=false
}
}
}
Solution is here. You can add .toolbar {ToolbarItem(placement: .principal) {Image(systemName: "star.fill")} } inside of the NavigationView.
NavigationView {
HomeView()
.toolbar {
ToolbarItem(placement: .principal) {
Image(systemName: "star.fill")
}
}
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()) {
isShowing.toggle()
}
} , label: {
Image(systemName: "list.bullet")
}))
}
Screenshot:
How can you dynamically change SwiftUI Navigation Bar Items?
I have a TabView within a NavigationView, and I would like the Navigation Bar Items to change depending on tab that is selected. However, I am having a hard time determining how to change this with .onAppear(), assuming that is even what you are suppose to do.
My code is currently laid out as follows:
var body: some View {
NavigationView {
TabView {
contentWithNavigationButtons()
.tabItem {
Image(systemName: "house")
Text("Buttons")
}
contentWithoutNavigationButtons()
.tabItem {
Image(systemName: "person")
Text("No Buttons")
}
.onAppear {
//Navigation Bar Items should be removed
}
}
.navigationBarItems(trailing: someButton)
}
Here is a demo of possible solution - add tracking selection for tabs and make button depending of tab selection. Tested with Xcode 12 / iOS 14
struct DemoView: View {
#State private var selection = 0 // << here !!
var body: some View {
NavigationView {
TabView(selection: $selection) {
contentWithNavigationButtons()
.tabItem {
Image(systemName: "house")
Text("Buttons")
}.tag(0) // << here !!
contentWithoutNavigationButtons()
.tabItem {
Image(systemName: "person")
Text("No Buttons")
}.tag(1)
}
.navigationBarItems(trailing: Group {
if selection == 0 { // << here !!
Button("Some"){}
}
})
}
}
}
Does anyone know how to change the background colour of a tabbed view bottom bar?
I have set the accent colour which changed the colour of my icons when I select each tab bar item.
I have tried setting the background to a colour but it doesn't change the back, and tried setting background to an image just to be sure but that also doesn't do anything.
Wondering if I need to specifically access the bottom bar somehow and then set a property on that?
Here is a solution. You can change appearance of the UITabBar and change the TabBar.
struct TabView: View {
init() {
UITabBar.appearance().backgroundColor = UIColor.blue
}
var body: some View {
return TabbedView {
Text("This is tab 1").tag(0).tabItemLabel(Text("tab1"))
Text("This is tab 2").tag(1).tabItemLabel(Text("tab2"))
Text("This is tab 3").tag(2).tabItemLabel(Text("tab3"))
}
}
}
SwiftUI 1.0 - Using named colors
Combining barTintColor and isTranslucent
For some reason I wasn't getting the full color of my named color when I used just barTintColor or even backgroundColor. I had to include isTranslucent too.
Here is my named color:
Setting Just barTintColor
(As you can see, it is slightly faded)
Setting Just backgroundColor
(This darkens the bar a little bit)
Setting barTintColor & isTranslucent to False
This combination is what did it for me:
UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor(named: "Secondary")
In the init() add UITabBar.appearance().barTintColor = UIColor.blue
struct ContentView: View {
#State private var selection = 1
init() {
UITabBar.appearance().barTintColor = UIColor.blue
}
var body: some View {
TabView (selection:$selection){
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
.tag(1)
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}.tag(2)
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}.tag(3)
}
.accentColor(.white)
}
}
This one looks like a working solution based on the latest version of Swift and SwiftUI
struct TabBar: View {
init() {
UITabBar.appearance().barTintColor = UIcolor.black
var body: some View {
TabView {
HomeView().tabItem {
Image(systemName: "house.fill")
Text("Home")
}
MapView().tabItem {
Image(systemName: "mappin.circle.fill")
Text("Map")
}
}
.edgesIgnoringSafeArea(.top)
}
}
where HomeView() and MapView() are just some other views created earlier that will be displayed on tap.
It is important to set the colors for UITabBar before the TabView is shown. If not using a custom view with initializer, then you must make sure it is called before the TabView is loaded, for instance in the AppDelegate (when using the "UIKit App Delegate" in the project life cycle or otherwise adding it for "SwiftUI App" life cycle).
Then you can configure it with a UITabBarAppearance() object, for instance like so:
let tabBarAppeareance = UITabBarAppearance()
tabBarAppeareance.shadowColor = .gray // For line separator of the tab bar
tabBarAppeareance.backgroundColor = .black // For background color
UITabBar.appearance().standardAppearance = tabBarAppeareance
TabbedView has been deprecated, for now you can try:
struct AppTabbedView: View {
#State private var selection = 3
init() {
UITabBar.appearance().backgroundColor = UIColor.blue
}
var body: some View {
TabView (selection:$selection){
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
.tag(1)
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}.tag(2)
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}.tag(3)
}
.font(.headline)
}
}
In case if you need change background of unselected item and top line as well then you can stuck. Next is what will work for me. We will start from this one:
In first iteration I change everything except top line:
struct ContentView: View {
#ObservedObject var model: ContentViewModel
init(model: ContentViewModel) {
self.model = model
UITabBar.appearance().isTranslucent = false
UITabBar.appearance().unselectedItemTintColor = UIColor(Color.primary)
UITabBar.appearance().barTintColor = UIColor(Color("tab_background"))
}
var body: some View {
NavigationView {
TabView(selection: $model.selectedTab) {...}
}
}
}
But after that, I realize that I can't change the color of this line in the same way. So I will use #atineoSE answer. But realize that set the UITabBar.appearance().standardAppearance will totally override my previous customization. So I need to change it - here is the final code and result:
init(model: ContentViewModel) {
self.model = model
let itemAppearance = UITabBarItemAppearance()
itemAppearance.normal.iconColor = UIColor(Color.primary)
let appeareance = UITabBarAppearance()
appeareance.shadowColor = UIColor(Color("tab_separator"))
appeareance.backgroundColor = UIColor(Color("tab_background"))
appeareance.stackedLayoutAppearance = itemAppearance
appeareance.inlineLayoutAppearance = itemAppearance
appeareance.compactInlineLayoutAppearance = itemAppearance
UITabBar.appearance().standardAppearance = appeareance
}
Its Work for me in latest Versions
var body: some View {
TabView{
Text("Zain ahmed")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Label("Home", systemImage: "house.fill")
}
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Label("Bookmark", systemImage: "bookmark.circle.fill")
}
}
.onAppear() {
UITabBar.appearance().backgroundColor = .lightGray
}
}
init() {
UITabBar.appearance().barTintColor = .white
UITabBar.appearance().backgroundColor = .white
}
While this is great for light mode, when you switch to dark mode, the background for the tabbar stays the color you have selected. Any way to make the bar go to black when dark mode is sl