Article directory
-
- Preface
- Create a floating action button
- The floating button appears at the front of the screen
- The floating button is located in the lower right corner of the screen
- Make the floating button appear circular
- add shadow
- Summarize
Foreword
Floating Action Button (FAB) is a UI element used in Android and Material Design. It is used to trigger the main action of a specific screen.
Although it comes from Android, this pattern can also be seen in some iOS apps.
Here is an example of a floating action button in the Twitter app. The Twitter App uses floating action buttons for the most important action step, publishing a tweet. As shown in the picture below, there is a button with a plus sign in the middle on a blue background in the lower right corner.
Next, let’s introduce in detail how to implement this floating button requirement.
Create a floating action button
How to create a floating button similar to Twitter App in SwiftUI.
There may be many ways to implement floating operation buttons. Here are some simple requirements for implementing buttons, as follows:
- Floating buttons should appear in front of the main content of the screen.
- The floating button is located in the lower right corner of the screen.
- Floating buttons have a rounded shape and an icon in the center.
- Floating buttons have a slight shadow.
This is to implement all the behaviors of floating buttons. Let’s implement these requirements step by step.
Before that, you need to create and initialize a screen to host this floating button.
Below is a simple list view, nested in a navigation view and a tab view, showing item plus index content in the list.
And added the Home button and icon to the menu bar. The core code is as follows:
struct ContentView: View {<!-- -->
var body: some View {<!-- -->
TabView {<!-- -->
NavigationStack {<!-- -->
List(0..<100) {<!-- --> i in
Text("Item \(i)")
}
.navigationTitle("Home")
}
.tabItem {<!-- -->
Label("Home", systemImage: "house")
}
}
}
}
The sample running screenshot is as follows:
The floating button appears at the front of the screen
First of all, it is the first step to implement the requirements. The floating button should appear in front of the main content of the screen.
To make a view appear in front of another view, you can use the ZStack or overlay modifier.
In this case, choose to use ZStack, the core code is as follows:
struct ContentView: View {<!-- -->
var body: some View {<!-- -->
TabView {<!-- -->
NavigationStack {<!-- -->
// 1
ZStack {<!-- -->
List(0..<100) {<!-- --> i in
Text("Item \(i)")
}
.navigationTitle("Home")
// 2
Button {<!-- -->
// operate
} label: {<!-- -->
Image(systemName: "plus")
}
}
}
.tabItem {<!-- -->
Label("Home", systemImage: "house")
}
}
}
}
- Wrap the content view (List) in a ZStack.
- Place a button on the content view.
This will add a plus image button on the list view.
The sample running screenshot is as follows:
The floating button is located in the lower right corner of the screen
Next, we need to implement the second step in the requirement, aligning the button and content view to the lower right corner.
Here you can use ZStack’s alignment parameter in the code to align the button with the lower right corner. The core code is as follows:
struct ContentView: View {<!-- -->
var body: some View {<!-- -->
TabView {<!-- -->
NavigationStack {<!-- -->
// 1
ZStack(alignment: .bottomTrailing) {<!-- -->
List(0..<100) {<!-- --> i in
Text("Item \(i)")
}
.navigationTitle("Home")
Button {<!-- -->
// operate
} label: {<!-- -->
Image(systemName: "plus")
}
// 2
.padding()
}
}
.tabItem {<!-- -->
Label("Home", systemImage: "house")
}
}
}
}
ZStack(alignment: .bottomTrailing)aligns the smaller view (Button) to the bottom right of the larger view (List).- We also added padding around the button so that it’s not too close to the edge.
The sample running screenshot is as follows:
Make the floating button appear circular
Next, the third step in the requirement needs to be implemented, so that the floating button has a rounded shape and an icon in the center.
The current situation is that the location is correct, but the appearance is not up to par yet.
You can use a series of modifiers to make it round and bold. The core code is as follows:
struct ContentView: View {<!-- -->
var body: some View {<!-- -->
TabView {<!-- -->
NavigationStack {<!-- -->
ZStack(alignment: .bottomTrailing) {<!-- -->
List(0..<100) {<!-- --> i in
Text("Item \(i)")
}
.navigationTitle("Home")
Button {<!-- -->
// operate
} label: {<!-- -->
// 1
Image(systemName: "plus")
.font(.title.weight(.semibold))
.padding()
.background(Color.pink)
.foregroundColor(.white)
.clipShape(Circle())
}
.padding()
}
}
.tabItem {<!-- -->
Label("Home", systemImage: "house")
}
}
}
}
- Changed the font style, added padding, background and foreground colors, and cropped it into a circle.
Add shadow
Finally, the fourth step in the requirement needs to be implemented to make the floating button have a slight shadow.
We spiced it up by adding shadows to make it look like it was floating.
SwiftUI has a built-in method of adding shadows through the shadow modifier. The core code is as follows:
struct ContentView: View {<!-- -->
var body: some View {<!-- -->
TabView {<!-- -->
NavigationStack {<!-- -->
ZStack(alignment: .bottomTrailing) {<!-- -->
List(0..<100) {<!-- --> i in
Text("Item \(i)")
}
.navigationTitle("Home")
Button {<!-- -->
// operate
} label: {<!-- -->
Image(systemName: "plus")
.font(.title.weight(.semibold))
.padding()
.background(Color.pink)
.foregroundColor(.white)
.clipShape(Circle())
.shadow(radius: 4, x: 0, y: 4)
}
.padding()
}
}
.tabItem {<!-- -->
Label("Home", systemImage: "house")
}
}
}
}
The sample running screenshot is as follows:
That’s all the steps required to create a floating action button in SwiftUI.
Summary
In this article, we learned how to create a floating action button in SwiftUI, which is a commonly used UI element in Android and Material Design. Complete this process by gradually implementing each feature of the floating button.
I hope the content of this article will be helpful to you in SwiftUI development, and you can easily implement beautiful floating operation buttons to enhance the application interface and user interaction experience.