I am using Xcode to create an app that requires buttons. Right now, when I create a button, I get the text label, which I want, but I also get a background with rounded corners around it. I want to have the button with just the label but without the background. I was using Swift Playgrounds before Xcode and did not have this problem.
Here is my code:
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.frame(width: 1000, height: 500)
.foregroundColor(.red)
Button(action: {
}) {
Text("Button")
}
}
}
}
Customize the button's style with the .buttonStyle view modifier:
Button(action: {}) {
Text("Button")
}
.buttonStyle(.borderless)
.borderless, .plain, and .link are the options that will result in no border.
Here is a Button without any background or border.
Button("Click") {
//do something
}
.background(.clear) //this
Related
Newbie at SwiftUI here. I am trying to show a dialog built in SwiftUI on top of an existing UIKit View. The idea is to be able to see the content of the UIKit view behind the SwiftUI dialog (like the default behaviour of an alert dialog box). But no what I try, I am unable to see the contents of the UIKit view. Is this even achievable?
I want an alert style dialog with background opacity adjusted somehow to see the contents of the UIKit view. Here is my output:
alert content hides the view behind it
Can somebody please point me in the right direction.
Here is my code sample:
The dialog in SwiftUI:
struct TestDialog: View {
var body: some View {
ZStack {
Rectangle().foregroundColor(Color.black.opacity(0.5))
.frame(maxHeight: .infinity)
VStack(alignment: .center, spacing: 15) {
Text(.init("Some Text"))
.multilineTextAlignment(.center)
.padding()
Button(action: {}) {
Text("Button 1")
.padding(10)
}
Button(action: {}) {
Text("Button 2")
.padding(10)
}
}
.padding()
.background(
RoundedRectangle(cornerRadius: 12)
.foregroundColor(.white))
.padding(40)
}
}
}
and the method called in my viewDidLoad():
func showTestDialog() {
let testView = TestDialog()
let testchildView = UIHostingController(rootView: testView)
addChild(testchildView)
let titleBarOffset: CGFloat = 11
testchildView.view.frame = view.frame.offsetBy(dx: 0, dy: -titleBarOffset)
view.addSubview(testchildView.view)
testchildView.didMove(toParent: self)
}
In order to see through the SwiftUI, you need to make sure it's host view has a transparent background:
testchildView.view.backgroundColor = .clear
This must be done at the host view level, since it is the parent/container.
I want to change the discoverability title of a keyboard shortcut in SwiftUI.
As you can see below the title shows in the popup if used in text button, but if you use an image for the button it doesn't show in the popup (when holding cmd on the keyboard to view supported shortcuts by the app).
struct ContentView: View {
var body: some View {
VStack {
Button("Save to Favorites") {
}
.keyboardShortcut("a")
Button {
} label: {
Image(systemName: "heart.fill")
}
.keyboardShortcut("s")
}
}
}
How can I add a title to the shortcuts help popup?
Note that I have tried all accessibility stuff, i.e. label, identifier, hint, etc... and It didn't work.
Not a super elegant solution but I got it working by adding a Text with a .frame size of width: 0, height: 0. This effectively hides the Text from view but ensures it appears when the user holds down the ⌘ key.
Consider putting it in a ZStack too as the default arrangement could have it ever so slightly off centre.
VStack {
Button("Save to Favorites") {
}
.keyboardShortcut("a")
Button {
} label: {
ZStack {
Text("heart")
.frame(width: 0, height: 0) // <- this part
Image(systemName: "heart.fill")
}
}
.keyboardShortcut("s")
}
How do you get the same focus effect in SwiftUI for images as you can with UIKit? I see you can use the card button style and it does provide motion effects but not the parallax that adjustsImageWhenAncestorFocused provides.
struct ContentView: View {
var body: some View {
Button {
print("tapped")
} label: {
AsyncImage(url: URL(string: "Image-URL"))
.frame(width: 300, height: 300)
}
.buttonStyle(.card)
}
}
I know this question is pretty old, but I ran into the same problem and found that wrapping your UIImageView in a UIViewRepresentable works just fine.
I am new in swift ui. I want to put image button on the side of the NavigationBar title.
I want to be able to click the user image and navigate to another view. How?
You need to use navigationBarItems for putting image to navigation bar and you should add NavigationLink to that image. For center the title you need to set navigation bar title's displayMode to .inline or you can use new Toolbar api
struct ContentView: View {
var body: some View {
NavigationView {
Text("Welcome to Stack Overflow")
.navigationBarTitle("Header", displayMode: .inline)
.navigationBarItems(leading: NavigationLink(destination: Text("Destination")) {
Image(systemName: "person.crop.circle.fill")
.font(.title)
})
}
}
}
Screenshot
Another way using toolbar item.
I am adding TapGesture on image icon, and keeping it out of navigation link, as the image is not getting circular inside the NavigationLink in ToolbarItemGroup.
By leveraging isActive property of NavigationLink which monitors onTap state we can determine either we want to push our view or not.
import SwiftUI
struct WeatherView: View {
#State var onTap = false
var borderColor: Color = Color("Black")
var addProjectToolbarItem: some ToolbarContent {
ToolbarItemGroup(placement: .navigationBarLeading) {
NavigationLink(destination:Text("Welcome"), isActive: self.$onTap) {
EmptyView()
}
Image("yourImage")
.resizable()
.frame(width: 32, height: 32)
.clipShape(Circle())
.onTapGesture {
onTap.toggle()
}
}
}
var body: some View {
NavigationView {
VStack {
Text("First view")
}
.toolbar{
addProjectToolbarItem
}
.navigationTitle("Header")
.navigationBarTitleDisplayMode(.inline)
}
}
}
I am playing around with SwiftUI and I am stuck on this View. everything is working fine but this little bug is very frustrating.I am trying to display the images as a vertical view and it won't show on the view . I know the Images are loaded but the view is not showing it . Its covered in blue color.
import SwiftUI
struct PlanetHome : View {
var planets : [Planet]
var body : some View {
NavigationView {
ScrollView {
ZStack {
Color.black .edgesIgnoringSafeArea (.all)
VStack (alignment: .center)
{
ForEach (self.planets.identified(by: \.imageName))
{
planet in NavigationLink (destination: PlanetDetail(planets: planet))
{
PlanetsView (planets: planet)
.frame (width: 500, height: 500)
.padding (.vertical, 5)
}
}
}
}
}
.navigationBarTitle (Text("Planets"))
}
}
}
I tried to put the NavigationView under the ZStack but it did not work.I have no Idea what I did wrong on the code. No error message on the debugger. just doesn't show the images.
The NavigationLink applies a button style to the objects it holds. Button does the same. To remove the blue color, add the buttonStyle modifier:
NavigationLink(destination: ...) {
...
}
.buttonStyle(PlainButtonStyle())
You can create and apply your own button style as well.
Its covered in blue color.
You can change blue color to whatever you want with .foregroundColor(.YourColor) or just change Render as Default to Render as Original Image at Assets.xcassets -> Pick Any Image -> Show the Attribute inspector
To fix other problem you should include PlanetsView because when i put Image(systemName: "photo") instead your view it's shows correctly