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()
Related
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
I have something like that for the first time. The preview and the simulator do not look identical. I really have no idea how to fix it. Normally the simulator and the preview should be identical?
But it may be that I've nested something but I don't know what exactly.
The images and code are below:
Simulator
Preview Layout
var body: some View {
ZStack {
Image("bg-official")
.resizable()
.edgesIgnoringSafeArea(.all)
VStack {
Spacer()
Text("NUMBER MATCH")
.fontWeight(.bold)
.font(.title)
GeometryReader { (geometry : GeometryProxy) in
ZStack {
RoundedRectangle(cornerRadius: 30)
.foregroundColor(Color("bg-roundedrectangle"))
.frame(width: 295, height: 310)
VStack(spacing: 3){
HStack(spacing: 3) {
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.black.opacity(0.7))
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.topLeft])
Text("60 Seconds")
.font(.title3)
.foregroundColor(.white)
}
}
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.black.opacity(0.7))
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.topRight])
Text("Endless")
.font(.title3)
.foregroundColor(.white)
}
}
}
HStack(spacing: 3) {
Spacer()
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.white)
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.bottomLeft])
Text("Game Center")
.font(.title3)
.foregroundColor(.black)
}
}
Button {
withAnimation() {
sheetManager.present(with: .init(
systemName: "info",
title: "Game Info",
content: "The aim of this game is to match as many tiles as you can with the same number and earn points. Tap a tile to select it and tap another tile with matching number of the first tile you tapp ed. Be careful and quick; the game will end if you tap a wrong tile, if the timer runs out or if th board gets filled by tiles!"))
}
} label: {
ZStack {
Rectangle()
.fill(Color.white)
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.bottomRight])
Text("Game Info")
.font(.title3)
.foregroundColor(.black.opacity(0.9))
}
}
Spacer()
}
}
}
}
.popup(with: sheetManager)
}
}
}}
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: