Last updated on March 9, 2023
Button allows you to perform an action when triggered.
The method of “triggering” the button may vary. For example, on iOS a button is triggered by tapping it onscreen, whereas on tvOS it’s triggered by pressing “select” on an external remote while the button is focused.
Apple Documentation
In this tutorial, you’ll learn what it takes to build a button with SwiftUI.
Prerequisites
To follow along this tutorial, you’ll need some basic knowledge in:
- A basic familiarity with Swift.
- At least Xcode 11 with at least iOS 9.1.
Normal Button
The basic way of building a button is as following.
Text
is where you set your own text
Button(action: { }, label: {
Text("This is a button")
})
Button Customization
The following button uses:
Button(action: { }, label: {
Text("This is a button")
.padding()
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(8)
})
Padding
which creates the rectangle of the button.ForegroundColor
which sets the color of the text.background
which sets the background color.cornerRadius
which sets rounded curve on each corner.
Shadow
Button(action: { }, label: {
...
})
.shadow(color: Color.blue, radius: 20, y: 5)
shadow
adds color of the shadow, radius and the position of x and y.
Infinity Corner Radius
infinity
will always give you the perfect corner.
.cornerRadius(.infinity)
Border
.border
allows you to create a line around the button. You will still need padding
to have a good looking rectangle shape.
.padding()
.border(Color.blue)
Another way of achieving border with the rounded corner is as following:
.padding()
.background(RoundedRectangle(cornerRadius: 10).stroke(Color.blue, lineWidth: 2))
RoundedRectangle
which create a corner radius for a rectangle.stroke
allows you to adjust the width and color of the border.
Button With Image
Perhaps, showing only text could be a little dull. Why not add some image on it?
Button(action: {}) {
HStack{
Text("This is a button")
.padding(.horizontal)
Image(systemName: "person.crop.circle.fill")
}
.padding()
}
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(8)
padding(.horizontal)
widens the width of the button. You may disable this if you don’t need it.Image(systemName)
allows you to utilize the built in images given by Apple. You may download SF Symbols to better utilize this tool.
In case you would like this image to be of the left. This can be done really easier with a switch of code by moving the image code up one line.
Image(systemName: "person.crop.circle.fill")
Text("This is a button")
What about just image?
Button(action: {}) {
Image("tesla")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 50)
.cornerRadius(40)
}
renderingMode
allows the image to be shown. If you take this line out, you won’t be able to see the image.resizeable
allows you to resize the button.aspectRatio
allow you to control the content of the image.frame
lets you set the width and height.
Where to go From Here
Check out some other tutorials using SwiftUI as well:
Comments are closed.