I made a list similar to the apple one seen below but I really don't like how the UInavigation bar looks like. Ideally I would want it smaller or have it hidden so I could put my own view there.
I've tried to hide it by using the following from apple appearance api
init() {
UINavigationBar.appearance().backgroundColor = .green
UINavigationBar.appearance().isHidden = true
}
even having the navigation bar like this would be more ideal compared to having the giant title
but this has no impact, does anyone have any suggestions or ideas how I could customize this to be more how I want it?
This is what I have achieved using swiftUI and a bit of UINavigationView, I believe those modifiers will be implemented to swiftUI after beta.
I achieved this by tweaking max's idea about the UINavigationBar's appearance. How can the background or the color in the navigation bar be changed?
Aside from that, I just throw a toggle to the NavigationBar title's view
var body: some View {
VStack {
if displayImg {
Image("dontstarve")
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all)
} else {
Image(systemName: "play")
}
}
.navigationBarTitle(Text("Adjustment"), displayMode: .inline)
.navigationBarItems(trailing:
HStack {
Toggle(isOn: $displayImg) {
Text("\(self.displayImg ? "on" : "off")")
.foregroundColor(Color.white)
}
})
}
Below are the only code that isn't SwiftUI. Which I just throw all of them in init():
init() {
UINavigationBar.appearance().tintColor = .systemGray6
UINavigationBar.appearance().barTintColor = .systemTeal
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white, NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 25)]
}
And yes, remember to set the navigation bar title mode to inline:
.navigationBarTitle(Text("Home"), displayMode: .inline)
You can do something like this to make it like previous iOS 13 Navigation Bar, which then removes the large title and places it on the bar in the middle all the time:
.navigationBarTitle(Text("Landmark"), displayMode: .inline)
Related
I’m trying to add an accessory view embedded in a navigation bar below the title, which can be seen in the default iOS calendar app (the “s m t w t f s” row) or the GitHub mobile app:
And I’d like it to work along with the large title style navigation bar like the GH mobile.
LazyVStack’s pinnedView with a section header almost work, but I can’t get the background color to make it seemless with the navigation bar, even with the ultraThinMaterial. It also leaves the divider line between the pinned view and the bar.
Is there a way to achieve this layout?
Solutions in SwiftUI, SwiftUI+Introspect, and UIKit are all welcome!
Have you tried setting a .safeAreaInset view? This will have the stickiness you're looking for, and items in the "main" part of the view will take its height into account when rendering, so won't get obscured.
Here's a quick example I knocked up:
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0 ..< 30) { item in
Text("Hello, world!")
}
}
.navigationTitle("Accessory View")
.safeAreaInset(edge: .top) {
AccessoryView()
}
}
}
}
struct AccessoryView: View {
var body: some View {
HStack {
Button("Button") { }
Button("Button") { }
Button("Button") { }
Spacer()
}
.padding()
.background(Color(uiColor: .systemGroupedBackground))
.buttonStyle(.bordered)
.controlSize(.mini)
}
}
You have to give the view a background otherwise it'll be transparent – but that background will (as long as it's a colour or a material) automatically extend into the navigation bar itself. Here's a GIF of the above code in action, where I've set the background to match the grouped list's background:
It's not perfect, especially as it looks distinct from the nav bar on scroll, but it might be useable for you?
Another idea is to replace the navigation bar with a custom one like this:
{
...
}
.safeAreaInset(edge: .top) {
VStack(alignment: .leading, spacing: 8) {
HStack() {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Image(systemName: "chevron.backward")
}
Spacer()
Text(navigationTitle).font(.title2).bold()
.multilineTextAlignment(.center)
.foregroundColor(.accentColor)
.frame(maxWidth: .infinity)
Spacer()
}
HStack {
Button("Button") { }
Button("Button") { }
Button("Button") { }
Spacer()
}
}
.padding()
.background(
.bar
)
}
You will also have to set:
.navigationBarBackButtonHidden(true)
and do not set a navigation title:
// .navigationTitle("....")
I have a screen with two List side by side, inside a NavigationView. The layout is rendered correctly, and I can independently scroll both lists. The problem is that, when I scroll the first list, it goes behind the navigation bar without triggering the effect of applying a background color to it. Here's a gif showing what's going on:
And this is the code I'm using for this view:
struct ContentView: View {
var body: some View {
NavigationView {
HStack(spacing: 0) {
List {
Section(header: Text("Header left")) {
ForEach(0..<600) { integer in
Text("\(integer)")
}
}
}
.listStyle(InsetGroupedListStyle())
.frame(minWidth: 0, maxWidth: .infinity)
List {
Section(header: Text("Header right")) {
ForEach(0..<400) { integer in
Text("\(integer)")
}
}
}
.listStyle(InsetGroupedListStyle())
.frame(minWidth: 0, maxWidth: .infinity)
}
.navigationTitle("Example")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
Would this be a SwiftUI bug? If not, how can I make the first list correctly interact with the navigation bar when scrolling?
It's a bug. The way the NavigationView and NavigationStack work, they only consider the last occurring List or ScrollView in its content to animate the navigation bar.
The only workarounds I can think of now are to:
Hide the navigation bar with
.navigationBarHidden(true)
or
.toolbar(.hidden) (for iOS 16+) modifiers
Fix the navigation bar in place
.navigationBarTitleDisplayMode(.inline)
.toolbarBackground(Color.white, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
for iOS 16+ or the UIKit-ish way for older iOS versions by playing with UINavigationBarAppearance
Implement your own navigation bar, track the lists with geometry readers, and do the animation based on the list positions but the effort here will not be worth it.
I've ended up with disabling UINavigationBar's large title and transparency.
import Introspect
#State private var navigationBar: UINavigationBar?
HStack(spacing: 0) {
...
}
.navigationBarTitleDisplayMode(.inline)
.introspectNavigationController {
$0.navigationBar.scrollEdgeAppearance = $0.navigationBar.standardAppearance
navigationBar = $0.navigationBar
}
.onDisappear {
navigationBar?.scrollEdgeAppearance = nil
navigationBar = nil
}
To access UINavigationController I used SwiftUI Introspect lib
No matter what I've tried I cannot get this navigation bar item to align with the large title on this View? I have tried padding or placing it in a VStack with a Spacer() but neither push it down. How can I properly align it?
var body: some View {
NavigationView {
//omitted
.navigationTitle("Exertion")
}
.navigationBarItems(
trailing:
Button(action: {
self.isShowingExertionCalendarSheet.toggle()
}) {
Image(systemName: "calendar")
.font(.system(size: 30, weight: .bold))
}
)
}
}
You can't. Because the Navigation Title is dynamic as it can change from small to big on scroll, at least you say otherwise, the UI does not allow you to set up the navigation items aligned vertically in other position other than the expected. That is right below the safe area. Is like giving a leading navigation item hides the back button. This is how Cocoa Touch either via SwiftUI or UIKIt works.
Well I think that you can do something like this:
.navigationBarItems(
leading: Text("Exertion")
.fontWeight(.bold)
.font(.largeTitle),
trailing: Button(action: {
... your code here ...
}, label: {
Image(systemName: "calendar")
.foregroundColor(Color("Some Blue"))
})
)
I want to remove the NavigationTitle Space without removing the back button.
I have already tried this:
.navigationBarItems(trailing:
NavigationLink(destination: Preferences(viewModel: viewModel).navigationBarHidden(true)) {
Image(systemName: "gear")
.font(.title2)
}
)
but that removes the back button as well.
Standard Back button cannot be shown without navigation bar, because it is navigation item, so part of navigation bar. I assume you just need transparent navigation bar.
Here is demo of possible solution (tested with Xcode 12.1 / iOS 14.1) / images are used for better visibility /
struct ContentView: View {
init() {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithTransparentBackground()
UINavigationBar.appearance().standardAppearance = navBarAppearance
}
var body: some View {
NavigationView {
ZStack {
Image("large_image")
NavigationLink(destination: Image("large_image")) {
Text("Go to details ->")
}
}
.navigationBarItems(trailing: Button(action: {}) {
Image(systemName: "gear")
.font(.title2)
}
)
.navigationBarTitle("", displayMode: .inline)
}.accentColor(.red)
}
}
I'm trying to change background color of the NavigationView (not navigation bar) using this code:
NavigationView {
Text("Text")
}
.background(Color.clear)
But it doesn't work.
Also, I tried to change UIView appearance:
UIView.appearance().backgroundColor = UIColor.black
But it doesn't work too.
The actual result is presented below:
The desired result is:
Does anyone know how to do this?
First look at this result:
As you can see, you can set the color of each element in the View hierarchy like this:
struct ContentView: View {
init(){
UINavigationBar.appearance().backgroundColor = .green
//For other NavigationBar changes, look here:(https://stackoverflow.com/a/57509555/5623035)
}
var body: some View {
ZStack {
Color.yellow
NavigationView {
ZStack {
Color.blue
Text("Some text")
}
}.background(Color.red)
}
// iOS 16 - No need for tweaking the appearance
/* .toolbarBackground(.green, in: .navigationBar) */
}
}
And the first one is window:
window.backgroundColor = .magenta
The issue you faced is we can not remove the background color of SwiftUI's HostingViewController (yet), so you can't see the navigationView (What you called) through the views hierarchy. You should wait for the API or try to fake the navigation view (not recommended).
If you just embed your content in the NavigationView within a ZStack you should be able to throw the color in underneath your main content.
struct ContentView : View {
var body: some View {
NavigationView {
ZStack {
Color.red.edgesIgnoringSafeArea(.all)
ScrollView {
Text("Fatemeh")
}
.navigationBarTitle("title")
}
}
}
}
Happy coding ;)