I have a swiftUI project and I want to place a circular progressView in the navigation bar doing the following:
.toolbar {
ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
Button {
// some action
} label: {
HStack {
ProgressView()
.frame(width: 20, height: 20)
.progressViewStyle(CircularProgressViewStyle())
Text("Save Edits")
}
}
}
}
The "Save Edits" appears but the progressView does not. I'm guessing SwiftUI only allows text or images in the navigationBar as a toolbarItem. Was wondering if there is any other approach to get the circular progressView in the navigationBar. I see this in many apps that want to let the user know something is happening when they press the navigation bar button.
It seems the problem was having an HStack in the button.
Here is the solution in case somebody else had this problem:
.toolbar {
ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle())
}
ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
Button {
// some action
} label: {
Text("Save Edits")
}
}
}
Related
I want to achieve behavior close to native iOS reminders app on iPad.
There is dropdown Menu in NavigationBar that shows tags in it. I thought that I can do it with Picker but as I see there is now multiple selection support in it.
I did it using
...
.toolbar {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Menu {
MenuView()
} label: {
Image(systemName: "number")
}
Button("Done") {}
}
}
And MenuView's code is
struct MenuView: View {
#State var tags = ["#tag1", "#tag2", "#tag3", "#tag4"]
var body: some View {
ForEach(tags, id:\.self) { tag in
Button {
} label: {
if selectedTags.contains(tag) {
Label(tag, systemImage: "checkmark")
} else {
Text(tag)
}
}
}
Section {
Button {
} label: {
Label("Configure", systemImage: "ellipsis")
}
}
}
}
The main problem right now is when I press any of this buttons, drop down is closed, while I want this button to only toggle selected status.
I tried to use Text instead of buttons but didn't find way to handle tap gestures from them, they look like being disabled by some view modifier.
What is the optimal way to handle it?
I can't seem to find how to bring a view to the center like a popup and blur background like when you long press a message in the messages app.
I know there is a simple native way to do this but I can't seem to find out how.
You are looking for contextMenu(menuItems:). It shows those buttons you see, and automatically blurs the background content to focus the selected view.
Example:
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 30) {
ForEach(0 ..< 20) { _ in
Text(String(Int.random(in: 1 ... 100000000)))
.padding()
.contextMenu {
Button {
//
} label: {
Label("Reply", systemImage: "arrowshape.turn.up.left")
}
Button {
//
} label: {
Label("Copy", systemImage: "doc.on.doc")
}
Button {
//
} label: {
Label("Translate", systemImage: "arrow.left.arrow.right")
}
Button {
//
} label: {
Label("More…", systemImage: "ellipsis.circle")
}
}
}
}
}
}
}
Result:
My currently have a NavigationView with an embedded ToolbarItemGroup containing buttons with SF Symbols. I'm attempting to change the Trash button's color to that of red.
var body: some View {
NavigationView {
Text("Hello, World!")
.navigationTitle("Today")
.toolbar {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button(action: {
print("Add button was tapped")
}) {
HStack {
Image(.add)
}
}
Button(action: {
print("Trash button was tapped")
}) {
HStack {
Image(.trash)
.foregroundColor(.red)
.accentColor(.red)
}
}
.foregroundColor(.red)
.accentColor(.red)
}
}
}
}
I can't seem to set the color of the Trash image symbol to red. Image(.trash) is no typo, I'm using this extension I wrote!
Thanks :)
You can add .accentColor(.red) to the NavigationView. Although it will change the color of all ToolBar Items. An example would be
NavigationView {
SomeViews
}
.accentColor(.red)
It did the trick, as shown here
An other way to work on NavigationView. Although it will change the color of all ToolBar Items, too.
struct ContentView: View {
init() {
UINavigationBar.appearance().tintColor = UIColor.magenta
}
// your code follows
}
I have menu items at the leading and trailing edges of the NavigationBar. I am not able to change the color of the menu items. I am, however able to change the color of the icon of the Navigation bar itself but not the menu items that are under the navigation bar. For example, I would like the "delete" to show up in red.
I tried to create a ConfigurationStyle but with no luck.
I have two menu items on each side: On the leading edge, I have a "New" and "Edit" and was trying to change the color to green
On the trailing edge, I have "Add" and "Delete"
What am I doing wrong? Any help is very much appreciated. Thanks.
Here is an example code of what I am trying to do.
struct HomeView: View {
var body: some View {
NavigationView {
Text("Hello World")
.navigationTitle("Title")
.navigationBarItems(leading: {
Menu {
Button(action: {}) {
Label {
Text("New")
} icon: {
Image(systemName: "pencil")
}
}.foregroundColor(.green) //tried on the Menu item but does not work
Button(action: {}) {
Label {
Text("Edit").foregroundColor(.green) //tried to change color for individual elements (does not work)
} icon: {
Image(systemName: "square.and.pencil") // tried to change just for the image (does not work)
.foregroundColor(.green)
}
}
} label: {
Image(systemName: "ellipsis.circle").foregroundColor(.green) //this works!!!
}
}(), trailing: {
Menu {
Button(action: { }) { // tried to change color on the whole button with a MenuStyle (does not work)
Label("Add", systemImage: "plus")
}.menuStyle(RedMenu())
Button(action: { }) {
Label("Delete", systemImage: "trash") // tried to change the color on the Label (does not work)
.foregroundColor(.red)
}
} label: {
Image(systemName: "plus")
}
}())
}
.navigationBarTitleDisplayMode(.inline)
.navigationViewStyle(StackNavigationViewStyle())
}
}
tried with MenuStyle but no luck
struct RedMenu: MenuStyle {
func makeBody(configuration: Configuration) -> some View {
Menu(configuration)
.foregroundColor(.red)
}
}
I want to set one button in left(leading) of navigation bar and one button in right(trailing) of navigation bar in swift ui.
Please help me to do it.
.navigationBarItems(leading:
HStack {
Button("About") {
print("About tapped!")
}
}
)
Use the following modifier
.navigationBarItems(leading:
Button("About") {
print("About tapped!")
},
trailing:
Button("Settings") {
print("Settings tapped!")
}
)
Try this code for set multiple buttons:
.navigationBarItems(
leading:
HStack {
Button("About") {
print("About tapped!")
}
Button("Call") {
print("Call tapped!")
}
},
trailing:
HStack {
Button("Settings") {
print("Settings tapped!")
}
Button("Contacts") {
print("Contacts tapped!")
}
}
)
navigationBarItems is deprecated. Hence below code will work.
.toolbar {
ToolbarItem(placement:.navigationBarTrailing) {
HStack{
Button("Add"){
saveDetails()
dismiss()
}
}
}
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel"){
dismiss()
}
}
}
In this Add button will be shown as right button and cancel as left.