How to add space in toolbar items (SwiftUI) - swiftui

the Spacer() has no effect in the ToolbarItem, I want to let items spread out rather than clustering. Do you know how to solve this? Thank you.
This is the code.
struct ContentView: View {
var body: some View {
NavigationView {
VStack{
Image("searchbar")
Text("Test")
}
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Text("9scoretrain")
Spacer()
NavigationLink(
destination: Text("SearchView"),
label: {
Image("searchbar")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width:200)
})
Spacer()
NavigationLink(
destination: Text("CameraView"),
label: {
Image(systemName: "camera.viewfinder")
})
}
}
}
}
}
}
This is the current effect.
This is the effect I want in which items are evenly distributed.

This method might solve, but there is still some space between the centered item and the trailing item.
This is still not what I want, I want items are evenly distributed.
This is the effect.
This is the code.
struct ContentView: View {
var body: some View {
NavigationView {
VStack{
Image("searchbar")
Text("Test")
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Text("9scoretrain")
}
ToolbarItem(placement: .principal) {
NavigationLink(
destination: Text("SearchView"),
label: {
Image("searchbar")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width:200)
})
}
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(
destination: Text("CameraView"),
label: {
Image(systemName: "camera.viewfinder")
})
}
}
}
}
}

Related

iOS15 Navigation title Not Showing Properly in Some Devices SwiftUI

I'm trying to figure out why the navigation title is not working with some devices, but I'm not able to figure out this issue. Can any one please help me to find out this issue, why the navigation title shows only the first 3 letters and after showing?
I have attached the Screenshot also please check.
iPhone 11 Device
iPhone 11 Simulator
Code:-
var body: some View {
ZStack {
Color.init(ColorConstantsName.MainThemeBgColour)
.ignoresSafeArea()
GeometryReader { geo in
ScrollView(.vertical) {
Text("Testing")
}
}
}
.navigationBarBackButtonHidden(true)
.navigationTitle(CommonAllString.BlankStr)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading:AnyView(leadingButton),trailing:AnyView(self.trailingButton))
.foregroundColor(Color.white)
}
var trailingButton: some View {
HStack {
Image(systemName: ImageConstantsNameForChatScreen.PersonImg)
.padding(.trailing)
Image(ImageConstantsName.DTRShareIconImg)
.resizable().frame(width: 20, height: 20)
}
}
Below Code Working:-
struct PSScreen: View {
var body: some View {
ZStack {
Color.init("Colour")
.ignoresSafeArea()
VStack{
Text("PSScreen")
}
}
.navigationBarBackButtonHidden(true)
.navigationBarTitle("", displayMode: .inline)
.navigationViewStyle(.stack)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
leadingButton.frame(width: 50, alignment: .leading)
}
ToolbarItem(placement: .navigationBarTrailing) {
trailingButton
}
}.foregroundColor(Color.white)
}
var leadingButton: some View {
HStack{
Text("Profile")
}
}
var trailingButton: some View {
HStack {
Image(systemName: "Person")
.padding(.trailing)
Image("Share")
.resizable().frame(width: 20, height: 20)
}
}
}

Navigation Title Issue

I have a navigation title for a list view. After navigating back and forth, my navigation title is missing. I am new to swiftui and unable to debug. Kindly help.
var body: some View {
NavigationView {
VStack {
TabView(selection: $choice,
content: {
OPListCell()
IPListCell()
})
.tabViewStyle(PageTabViewStyle())
}
.listStyle(PlainListStyle())
.navigationBarTitle("My Patients")
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Picker(selection: self.$choice, label: Text("")) {
ForEach(0 ..< self.choices.count) {
Text(self.choices[$0])
}
}
.frame(width: 175)
.pickerStyle(SegmentedPickerStyle())
.padding(.leading, 10)
}
}
}
}
}
}

SwiftUI 2.0: Close button is not dismissing the view - how do I get the Close button to return to the previous view?

I have tried to use Buttons and Navigation Links from various examples when researched on this channel and on the net. The NavigationLink would be ok, except that the NavigationView is pushing everything down in my view.
I have a view that contains an image and a text like this: ( x Close) but when I use the code below, the Close button is not doing anything.
In ContentView() I have a (?) button that takes me from WalkthroughView(), then to the PageTabView, then to this view, TabDetailsView:
ContentView():
ZStack {
NavigationView {
VStack {
Text("Hello World")
.padding()
.font(.title)
.background(Color.red)
.foregroundColor(.white)
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
withAnimation {
showOnBoarding = true
}
} label: {
Image(systemName: "questionmark.circle.fill")
}
}
}
}
.accentColor(.red)
.disabled(showOnBoarding)
.blur(radius: showOnBoarding ? 3.0 : 0)
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
}
}
.onAppear {
if !isWalkthroughViewShowing {
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
withAnimation {
showOnBoarding.toggle()
isWalkthroughViewShowing = true
}
}
}
}
WalkthroughView():
var body: some View {
ZStack {
GradientView()
VStack {
PageTabView(selection: $selection)
// shows Previous/Next buttons only
ButtonsView(selection: $selection)
}
}
.transition(.move(edge: .bottom))
}
PageTabView():
var body: some View {
TabView(selection: $selection) {
ForEach(tabs.indices, id: \.self) { index in
TabDetailsView(index: index)
}
}
.tabViewStyle(PageTabViewStyle())
}
below, is the TabDetailsView():
At the top of the view is this Close button, when pressed, should send me back to ContentView, but nothing is happening.
struct TabDetailsView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
let index: Int
then, inside the body:
VStack(alignment: .leading) {
Spacer()
VStack(alignment: .leading) {
// Button to close each walkthrough page...
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Image(systemName: "xmark.circle.fill")
Text("Close")
}
.padding(.leading)
.font(.title2)
.accentColor(.orange)
Spacer()
VStack {
Spacer()
Image(tabs[index].image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 415)
.padding(.leading, 10)
Text(tabs[index].title)
.font(.title)
.bold()
Text(tabs[index].text)
.padding()
Spacer()
}
.foregroundColor(.white)
}
}
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
}
Inserting view like above is not a presentation in standard meaning, that's why provided code does not work.
As this view is shown via showOnBoarding it should be hidden also via showOnBoarding, thus the solution is to pass binding to this state into view where it will be toggled back.
Due to deep hierarchy the most appropriate way is to use custom environment value. For simplicity let's use ResetDefault from https://stackoverflow.com/a/61847419/12299030 (you can rename it in your code)
So required modifications:
if showOnBoarding {
WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
.environment(\.resetDefault, $showOnBoarding)
}
and in child view
struct TabDetailsView: View {
#Environment(\.resetDefault) var showOnBoarding
// .. other code
Button(action: {
self.showOnBoarding.wrappedValue.toggle()
}) {
Image(systemName: "xmark.circle.fill")
Text("Close")
}

Too much space left between items when using ToolbarItemGroup

When I use toolbar group in SwiftUI, there is too much space between elements. I put it with HStack in iOS 13, it is ok. But when I put it with toolbar in iOS 14, there is a problem. How can I fix this?
var muteUser: some View {
NavigationLink(destination: Text("dddd").environmentObject(CurrentUser)) {
Image(systemName: "speaker.slash")
.frame(width: 22, height: 22)
}
}
var friendSetting: some View {
NavigationLink(destination: FriendSettings().environmentObject(CurrentUser)) {
Image(systemName: "gear")
.frame(width: 22, height: 22)
}
}
var body: some View {
GeometryReader { geometry in
if #available(iOS 14.0, *) {
chatView
.toolbar {
ToolbarItem(placement: .principal) {
centerNavBar()
.frame(maxWidth: geometry.size.width*0.75)
}
ToolbarItemGroup(placement: .navigationBarTrailing) {
muteUser
friendSetting
}
}
} else {
chatView
.navigationBarItems(trailing:
HStack(){
centerNavBar()
Spacer()
rightNavBar
}
.frame(width: geometry.size.width*0.75)
)
}
}
}
It looks like this is the standard appearance of two buttons inside ToolbarItemGroup.
You can use a HStack instead:
.toolbar {
ToolbarItem(placement: .principal) {
Image(systemName: "star.fill")
}
ToolbarItem(placement: .navigationBarTrailing) {
HStack {
NavigationLink(destination: Text("dddd").environmentObject(CurrentUser)) {
Image(systemName: "speaker.slash")
.imageScale(.large)
}
NavigationLink(destination: FriendSettings().environmentObject(CurrentUser)) {
Image(systemName: "gear")
.imageScale(.large)
}
}
}
}
Try omitting the .frame(width: 22, height: 22) on the toolbar item Images. I think that’s causing the iOS 14 toolbar to create UIToolbarItems with embedded views instead of simple images.

SwiftUI .toolbar disappears after following NavigationLink and coming back

I've added a .toolbar to the top level of a NavigationView that will eventually be used to select items in a list without using swipe gestures (up button, down button, etc.). I also have a .navigationBar going on, to access other views for Account and Settings.
For the most part it's looking really good, but when I follow a NavigationLink (in .navigationBarItems) within NavigationView, and then use the built-in back navigation, my .toolbar disappears from the top level.
Am I putting the .toolbar in the wrong place? It feels like a problem with .navigationViewStyle(StackNavigationViewStyle()) because when I comment that out, the toolbar will not disappear upon navigation... but I don't like how the default behavior works in landscape so I'm relying on it.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
Group {
Section(header: Text("List Items").foregroundColor(.gray).font(.footnote)) {
Text("List Item One")
Text("List Item Two")
Text("List Item Three")
}
}
}.navigationTitle("Top Level List").navigationBarTitleDisplayMode(.inline)
.ignoresSafeArea(.all)
// MARK: NAVBAR
.navigationBarItems(
leading:
NavigationLink(destination: UserView()) {
Image(systemName: "person.crop.circle").font(.title2)
},
trailing:
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear").font(.title2)
})
//MARK: - CONTENT NAV
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button(action: {}, label: {Label("Mute", systemImage: "speaker.slash.fill")})
Spacer()
Button(action: {}, label: {Label("Repeat", systemImage: "arrow.clockwise")})
Spacer()
Button(action: {}, label: {Label("Previous", systemImage: "arrow.up")})
Spacer()
Button(action: {}, label: {Label("Next", systemImage: "arrow.down")})
Spacer()
Button(action: {}, label: {Label("Select", systemImage: "arrow.right")})
}
}
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct UserView: View {
#State private var username: String = ""
#State private var password: String = ""
var body: some View {
Form {
TextField("Username", text: $username)
SecureField("Password", text: $password)
}
.navigationBarTitle("Account").font(.subheadline)
}
}
struct SettingsView: View {
#State private var setting1: String = ""
#State private var setting2: String = ""
var body: some View {
Form {
TextField("Setting One", text: $setting1)
SecureField("Setting Two", text: $setting2)
}
.navigationBarTitle("Settings").font(.subheadline)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You right, it's in a wrong place. Here is how it should be if you need a toolbar always shown:
struct ContentView: View {
var body: some View {
NavigationView {
List {
Group {
Section(header: Text("List Items").foregroundColor(.gray).font(.footnote)) {
Text("List Item One")
Text("List Item Two")
Text("List Item Three")
}
}
}.navigationTitle("Top Level List").navigationBarTitleDisplayMode(.inline)
.ignoresSafeArea(.all)
// MARK: NAVBAR
.navigationBarItems(
leading:
NavigationLink(destination: UserView()) {
Image(systemName: "person.crop.circle").font(.title2)
},
trailing:
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear").font(.title2)
})
//MARK: - CONTENT NAV
}.navigationViewStyle(StackNavigationViewStyle())
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button(action: {}, label: {Label("Mute", systemImage: "speaker.slash.fill")})
Spacer()
Button(action: {}, label: {Label("Repeat", systemImage: "arrow.clockwise")})
Spacer()
Button(action: {}, label: {Label("Previous", systemImage: "arrow.up")})
Spacer()
Button(action: {}, label: {Label("Next", systemImage: "arrow.down")})
Spacer()
Button(action: {}, label: {Label("Select", systemImage: "arrow.right")})
}
}
}
}