Is there a way to increase the height of the SwiftUI toolbar? My toolbar items are quite squished together and if I add any padding then they are cut off from the view.
What I have done is created an empty text since I just want the toolbar, I then have one ItemGroup and some other Items of the toolbar. Each Item in the group has an image on top of the text. The text is very bunched up with the picture there
Below is the code for the toolbar:
Text("").toolbar{
ToolbarItemGroup{
Button(action: printD){
Label{
Text("Current Location")
.font(.caption2)
} icon: {
Image(systemName: "paperplane.fill")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Spacer()
Button(action: printD){
Label{
Text("Get Route")
.font(.caption2)
} icon: {
Image(systemName: "car.fill")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Button(action: printD){
Label{
Text("Add Place")
.font(.caption2)
} icon: {
Image(systemName: "plus")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Button(action: printD){
Label{
Text("Delete Place")
.font(.caption2)
} icon: {
Image(systemName: "trash.fill")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Button(action: printD){
Label{
Text("Tinted Area")
.font(.caption2)
} icon: {
Image(systemName: "square.split.bottomrightquarter")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Spacer()
Button(action: printD){
Label{
Text("Zoom Map")
.font(.caption2)
} icon: {
Image(systemName: "map.fill")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
Spacer()
Button(action: printD){
Label{
Text("Share Actions")
.font(.caption2)
} icon: {
Image(systemName: "arrowshape.turn.up.right.fill")
.foregroundColor(.orange)
.scaleEffect(1.5)
}.labelStyle(VerticalLabelStyle())
}
}
ToolbarItem{
Menu {
Button {
} label: {
Text("Linear")
Image(systemName: "arrow.down.right.circle")
}
Button {
} label: {
Text("Radial")
Image(systemName: "arrow.up.and.down.circle")
}
} label: {
Text("Style")
Image(systemName: "tag.circle")
}
}
ToolbarItem {
Text("").searchable(text: $searchText)
}
}.frame(height: 0)
Photo of toolbar
Related
I'm making a MacOS app and a list of Mission with its own toolbar, and when clicking on a Mission, some informations about it are displayed with also its own toolbar.
The thing is that sometimes the border is here, sometimes not depending on the size of my Mission list -> here with border and here with no border.
Here is a sample of my code :
Entry point
ZStack {
NavigationLink(
isActive: Binding(
get: { selectedItem == nil },
set: { _ in }),
destination: { NoSelectionView() },
label: { EmptyView() })
List {
ForEach(missionsClients) { missionClient in
NavigationLink(), tag: missionClient.id, selection: $selectedItem, label: { MissionRow() })
}
}
}
.navigationTitle("Missions")
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button(action: { createNewMission = true },
label: { Image(systemName: "plus") })
}
}
NoSelectionView
struct NoSelectionView: View {
var body: some View {
Text("No Selection")
.foregroundColor(.gray)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
.background()
.ignoresSafeArea()
.toolbar {
ToolbarItem(placement: .destructiveAction) {
Button(action: { }, label: { Image(systemName: "trash") }).disabled(true)
}
ToolbarItem(placement: .primaryAction) {
Button(action: { }, label: { Image(systemName: "square.and.pencil") }).disabled(true)
}
}
}
}
MissionRow
struct MissionRow: View {
var missionClient: MissionClient
var body: some View {
VStack(alignment: .leading) {
if let name = missionClient.mission.name.presence {
Text(name)
} else {
NoNameText()
}
if let clientName = missionClient.client.name.presence {
Text(clientName).foregroundStyle(.secondary)
}
}
}
}
Is it possible to have an expanding menu that does not expand the HStack it is in?
I want a "menu bar" on top of my app and on the right is an expanding menu with all my objects in. But when I expand the menu all of the HStack expands which looks bad.
I tried putting a .fixedsize() on the HStack but it didn't help.
Do I have to move the menu or is it possible?
This is my code:
HStack{
Text("Input searchfunction here")
.foregroundColor(Color.white)
.padding()
Spacer()
Button(action: {
createViewIsActive = true
}, label: {
Text("Lägg till tecken.")
.foregroundColor(Color.white)
.onAppear {
if signs.count != 0 {
activeSign = signs[0]
}
}
Image(systemName: "plus")
.foregroundColor(Color.white)
})
.padding()
Button(action: {
deleteItems()
}, label: {
Text("Delete")
})
Spacer()
DisclosureGroup("Tecken", isExpanded: $isExpanded) {
ScrollView{
VStack{
ForEach(signs, id: \.self) { sign in
HStack{
Text(sign.name!)
.font(.title3)
.padding(.all)
.onTapGesture {
self.isExpanded.toggle()
self.activeSign = sign
}
}
}
}
}
}
.accentColor(.white) // Arrow color
.font(.title3)
.foregroundColor(.white) // Text color
.padding(.all)
.cornerRadius(8)
.frame(minWidth: 10, maxWidth: 300)
}
.background(Color.gray)
.padding()
Goal
Like the app Maps, views appear to be full frame size when Sidebar is open. Views are under Sidebar.
What I've tried
In order to maximize View's size, I've set the size to be infinity and add view modifier .ignoresSafeArea() but it's still not full frame like Maps
You will see the frame of view will be adjusted when I turn on the sidebar
var body: some View {
NavigationView {
List(0 ..< 5) { item in
NavigationLink("Test") {
VStack {
Text("Test")
}
.navigationTitle("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.ignoresSafeArea()
}
}
ScrollView {
Text("Hello, world!")
.padding()
}
}
.frame(minWidth: 400, minHeight: 400)
.toolbar {
ToolbarItem(placement: .navigation) {
Button(action: toggleSidebar, label: {
Image(systemName: "sidebar.leading")
})
}
}
}
Just use transparent content for right side and place map below NavigationView.
Here is a demo of approach. Tested with Xcode 13 / macOS 12
var body: some View {
ZStack {
MapView() // << content here !!
NavigationView {
List(0 ..< 5) { item in
NavigationLink("Test") {
VStack {
Text("Test")
}
.navigationTitle("Test")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.ignoresSafeArea()
}
}
Color.clear // << transparent right !!
}
.frame(minWidth: 400, minHeight: 400)
.toolbar {
ToolbarItem(placement: .navigation) {
Button(action: toggleSidebar, label: {
Image(systemName: "sidebar.leading")
})
}
}
}
}
I'd like to add a "compose" button onto the .bottomBar of a .toolbar in my NavigationView.
Adding a Spacer() simply almost center aligns the item:
struct HomeView: View {
var body: some View {
NavigationView {
Text("Hello, World!")
.navigationTitle("Hello, World!")
.toolbar {
ToolbarItem(placement: .bottomBar) {
HStack {
Spacer()
Button(action: { print("Pressed") }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
.font(.title)
}
}
}
}
}
}
}
This produces the following:
Not what I would have expected. What's even stranger is that that's not exactly center aligned, it's off by a few pixels.
So how do I:
Right align?
Center align?
Thanks
I had this same problem, here's what I found (Xcode 12.0 Beta 6)
Right Aligned
One way to do this is to use two .bottomBar items.
.toolbar(content: {
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}) {
Text("Add List")
}
}
})
A bit cleaner is to use a ToolbarItemGroup with a Spacer().
.toolbar(content: {
ToolbarItemGroup(placement: .bottomBar) {
Spacer()
Button(action: {}) {
Text("Add List")
}
}
})
Centered
To center an item you can use .status as the placement.
.toolbar(content: {
ToolbarItem(placement: .status) {
Button(action: {}) {
Text("Add List")
}
}
})
Every ToolbarItem have to include single view, so just move Spacer into separated toolbar item
Tested with Xcode 12b3
.toolbar {
ToolbarItem(placement: .bottomBar) {
Spacer()
}
ToolbarItem(placement: .bottomBar) {
Button(action: { print("Pressed") }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
.font(.title)
}
}
}
Note: to have it centered remove toolbar item with spacer
I am new to SwiftUI and I would some assistance with regards positioning of a Custom Button which I am unable to to centre.
I have used VStack and HStack to try and get the button bottom centered, but button keeps aligning left.
Any assistance will be appreciated.
struct ContentView: View {
var body: some View {
VStack {
NavigationView {
Section {
VStack(alignment: .leading) {
Text("Meal Description").foregroundColor(.green)
Spacer()
NavigationLink(destination: PoundedYam()) {
Text("Pounded Yam & Egusi Soup")
}
NavigationLink(destination: YamPepSoup()) {
Text("Yam and Pepper Soup")
}
NavigationLink(destination: JollofRice()) {
Text("Jollof Rice & Plantain")
}
Spacer()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
}.padding()
}
Section {
Image("africanfoods")
.resizable()
.frame(width: 275.0, height: 250.0)
.clipShape(Circle())
.overlay(Circle().stroke(Color.black, lineWidth: 5))
.scaledToFit()
}
VStack { //For Button
Spacer()
Button( action: {},
label: { Text("Create Order") })
}
.navigationBarTitle(Text("Menu"))
} //NavView End
} //VStack End
}
}
You can add .frame(maxWidth: .infinity) to the Button. This will also increase teachability.
Button("Create Order") { }
.frame(maxWidth: .infinity)
May be not most elegant solution but it works:
HStack() {
Spacer()
Button( action: {},
label: { Text("Create Order") })
Spacer()
}
First fast idea: set your button in HStack between Spacers:
// ...
VStack { //For Button
Spacer()
HStack {
Spacer()
Button( action: {}, label: { Text("Create Order") })
Spacer()
}
}
.navigationBarTitle(Text("Menu"))
// ...
and the result is: