I am trying to completely remove the background of a TabView in SwiftUI, but I can't seem to find a solution.
I've implemented my own background to the TabView like this:
TabView {
ZStack {
DriveView()
BackgroundTabBar()
}.tabItem {
Image("tab_drive")
Text("Drive")
}
}
And then:
init() {
UITabBar.appearance().unselectedItemTintColor = .white
UITabBar.appearance().backgroundColor = .clear
}
But, when I implement a ScrollView I get the default opaque background also:
How do I get completely rid of the background in the TabBar, also when scrolling?
I managed to find another solution where I was still able to control the appearance of the tab items using this:
init() {
let appearance = UITabBarAppearance()
appearance.configureWithTransparentBackground() // <- HERE
appearance.stackedLayoutAppearance.normal.iconColor = .white
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
appearance.stackedLayoutAppearance.selected.iconColor = UIColor(Color.accentColor)
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(Color.accentColor)]
UITabBar.appearance().standardAppearance = appearance
}
Use .toolbarBackground(.hidden, for: .tabBar) on the view you are presenting in the tab to control the tab bar visibility. The default is .automatic which makes the background visible when scroll bar content is behind it.
Related
I trying to change the color of the chevron indicator that appears on the section headers in a List view likest one shown here:
I tried to do that by setting the tint color on the list view:
List {
...
}
.tint(.red)
...
That is not working.
How can I change the color of that indicator?
You haven't provided much code but some change with accentColor instead of tint
The chevron can't react on any color changing modifiers.
You have to disable standard chevron and use own, custom, (behaviour of the List is the same), like below
HStack {
Text(text)
NavigationLink(destination: Text("D")) { EmptyView() } // disabled !
Image(systemName: "chevron.right") // << custom !!
.foregroundColor(Color.red) // any color !!!
}
New iOS 15 makes navigation bar background completely transparent if there is no element behind, if there is a List and you scroll the elements to be behind the navigation bar this obtains a white translucent background, but if I use a TabView where every TabItem have a List inside the navigation bar background did not update correctly when switching between tab items, the navigation bar keep always transparent background.
Im using SwiftUI and my basic code looks like this:
struct Main: View {
var body: some View {
WindowGroup {
NavigationView {
TabView {
TabElement()
TabElement()
TabElement()
TabElement()
TabElement()
}.navigationBarTitle(Text("Main"), displayMode: .inline).navigationBarBackButtonHidden(true)
}
}
}
}
struct TabElement: View {
var body: some View {
VStack {
List {
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
Text("empty")
}.listStyle(InsetGroupedListStyle())
}.tabItem {
Image(systemName: "star.fill")
Text("dummy")
}
}
}
So, this code makes a tabed view with five tabs, each tab have a list of ten Text views, if I switch to any other tab and scroll the elements to the top, the list can be seen through navigation bar instead of behind.
What is causing this behavior? It's some kind of bug or my code is wrong? This problem is not happening in iOS 14.* since navigation bar always have white background.
NOTE:
I found that it is possible to use:
if #available(iOS 15, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
}
...in my ApDelegate but it's look like a tricky way to get rid of the transparency in navigation bar. If Apple decide to use this new design in iOS 15 I wanna implement it in my app, but only if the transparency update correctly.
Yes apple has changed that in iOS 15.
If you want to change the appearance of the navigation bar in a single ViewController, you can use this code: https://stackoverflow.com/a/69493819/9263676
I find that .listRowBackground(Color.Red.Blush) can set the list row column, but in the List there are some empty row are still white. When I scroll on the List, it also show some white area. Can somebody help to slove this peoblem? It's also appreciated for telling me how to change the color with the SegmentedPickerStyle. This video shows my problem. https://youtu.be/aEPw5hHBkFE
Thank you!
struct UserNotificationCellView: View {
#ObservedObject var userNotification: UserNotification
#ObservedObject var userNotifications: UserNotifications
var body: some View {
{
......
}
.padding(.horizontal,20)
.cornerRadius(14)
.listRowBackground(Color.Red.Blush)
// .background(Color.Red.Blush)
}
}
Below is my List code
List {
ForEach(userNotifications1.userNotificationsArray, id: \.notifyId) { (userNotification) in
UserNotificationCellView(userNotification: userNotification,userNotifications: self.userNotifications1)
// .listRowBackground(Color.Red.Blush)
}.colorMultiply(Color.Red.Blush)
Spacer()
}.environment(\.defaultMinListRowHeight, 80)
I'd recommend adding a global style in your AppDelegate class. From here you can change class properties that are currently inaccessible by SwiftUI via appearance.
UITableView.appearance().backgroundColor = .clear
UISegmentedControl.appearance().....
From here you can change your list background color and any segmented control properties you need to.
For the empty cells you can try adding an empty footer
List {
Section(footer: self.footer) {
ForEach(userNotifications1.userNotificationsArray, id: \.notifyId) { (userNotification) in
UserNotificationCellView(userNotification: userNotification,userNotifications: self.userNotifications1)
// .listRowBackground(Color.Red.Blush)
}.colorMultiply(Color.Red.Blush)
}
}.environment(\.defaultMinListRowHeight, 80)
If the content of the ScrollView is bigger than the screen, while scrolling, the scrollbar on the side appears. I couldn't find anything to help me hide it.
You can use showsIndicators: false to hide the indicator:
ScrollView(showsIndicators: false) {
// ...
}
You just have to use the scrollView initializer and set the parameter showsIndicators property to false within the initializer only.
ScrollView(.vertical, showsIndicators: false) {
//your content for scrollView
}
Hope this has resolved your query.
Show / Hide Indicators in ScrollView SwiftUI
Hide Indicators in ScrollView SwiftUI
ScrollView(.horizontal,showsIndicators: false) {
//your code
}
Show Indicators in ScrollView SwiftUI
ScrollView(.horizontal,showsIndicators: true) {
//your code
}
if you need to hide both scrollers:
ScrollView(showsIndicators: false) {
//your code
}
__
If you need to hide only one scroller, but to have ability to scroll in both directions:
need to use Introspect:
ScrollView() {
// Some Content
}
.introspectScrollView{
$0.hasHorizontalScroller = false
$0.hasVerticalScroller = true
}
as result:
horisontal scroller invisible
vertical scroller visible;
I am playing around with SwiftUI and I am stuck on this View. everything is working fine but this little bug is very frustrating.I am trying to display the images as a vertical view and it won't show on the view . I know the Images are loaded but the view is not showing it . Its covered in blue color.
import SwiftUI
struct PlanetHome : View {
var planets : [Planet]
var body : some View {
NavigationView {
ScrollView {
ZStack {
Color.black .edgesIgnoringSafeArea (.all)
VStack (alignment: .center)
{
ForEach (self.planets.identified(by: \.imageName))
{
planet in NavigationLink (destination: PlanetDetail(planets: planet))
{
PlanetsView (planets: planet)
.frame (width: 500, height: 500)
.padding (.vertical, 5)
}
}
}
}
}
.navigationBarTitle (Text("Planets"))
}
}
}
I tried to put the NavigationView under the ZStack but it did not work.I have no Idea what I did wrong on the code. No error message on the debugger. just doesn't show the images.
The NavigationLink applies a button style to the objects it holds. Button does the same. To remove the blue color, add the buttonStyle modifier:
NavigationLink(destination: ...) {
...
}
.buttonStyle(PlainButtonStyle())
You can create and apply your own button style as well.
Its covered in blue color.
You can change blue color to whatever you want with .foregroundColor(.YourColor) or just change Render as Default to Render as Original Image at Assets.xcassets -> Pick Any Image -> Show the Attribute inspector
To fix other problem you should include PlanetsView because when i put Image(systemName: "photo") instead your view it's shows correctly