Day 21: Custom Toggle Button, anyone? ⚙️
Today, we’re going to create a custom toggle button in SwiftUI.
Implementing a Custom Toggle Button
In this example, we’ll create a visually appealing custom toggle button that switches between on and off states.
Code Example
Here’s how you can implement a custom toggle button in SwiftUI:
import SwiftUI
struct CustomToggle: View {
@Binding var isOn: Bool // Binding variable for toggle state
var body: some View {
HStack {
Text("Toggle Setting")
.foregroundColor(.primary) // Text color
Spacer()
// Custom square toggle design
RoundedRectangle(cornerRadius: 5) // Rounded corners
.fill(isOn ? Color.blue : Color.gray) // Toggle color based on state
.frame(width: 60, height: 30) // Toggle size
.overlay(
Rectangle() // Square knob design
.fill(Color.white)
.frame(width: 26, height: 26)
.offset(x: isOn ? 15 : -15) // Move the square based on state
.animation(.easeInOut(duration: 0.2), value: isOn) // Animation for smooth transition
)
.onTapGesture {
isOn.toggle() // Toggle the state on tap
}
}
.padding() // Padding for the entire toggle
}
}
struct ContentView: View {
@State private var isToggleOn = false // State to manage toggle status
var body: some View {
VStack {
CustomToggle(isOn: $isToggleOn) // Custom toggle instance
Text(isToggleOn ? "Setting is ON" : "Setting is OFF") // Display current state
.padding()
}
.padding()
}
}
@main
struct CustomToggleApp: App {
var body: some Scene {
WindowGroup {
ContentView() // Main content view
}
}
}
The full series is available on my profile and the components can also be found at shipios.app/components.
Happy Coding! 🎈
Top comments (0)