The SwiftUI framework comes with a built-in checkbox, however it’s solely accessible on the macOS platform. If you wish to use checkboxes on iOS, it’s a must to construct your personal element. Beforehand, we’ve coated ToggleStyle to create customized toggles. By making use of the identical approach, it’s not onerous to construct a checkbox on your iOS initiatives.
Utilizing Checkbox on macOS
Let’s first have a look how you utilize checkbox on macOS. To create a checkbox, you create a Toggle view and alter it to the .checkbox type. Right here is an instance:
|
struct ContentView: View {
@State personal var isChecked = false
var physique: some View { VStack { Toggle(isOn: $isChecked) { Textual content(“Purchase a pack of Airtags”) } .toggleStyle(.checkbox) } .padding() } } |
If you happen to run the code on macOS, it renders an ordinary checkbox.
Creating Checkbox Toggle Model on iOS
The .checkbox type doesn’t include the iOS SDK. That mentioned, it’s fairly straightforward to create this kind of toggle type utilizing the ToggleStyle protocol. If you wish to know how you can work with ToggleStyle, please try our earlier tutorial.
On iOS, we will create a brand new type named CheckboxToggleStyle which adopts the ToggleStyle protocol and implement the required methodology:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
struct CheckboxToggleStyle: ToggleStyle { func makeBody(configuration: Configuration) –> some View { HStack {
RoundedRectangle(cornerRadius: 5.0) .stroke(lineWidth: 2) .body(width: 25, top: 25) .cornerRadius(5.0) .overlay { Picture(systemName: configuration.isOn ? “checkmark” : “”) } .onTapGesture { withAnimation(.spring()) { configuration.isOn.toggle() } }
configuration.label
} } } |
Within the makebody methodology, we used a RoundedRectangle view and overlay it with a “checkmark” picture when the toggle is enabled.
To make use of this toggle type, you merely connect the toggleStyle modifier and move an occasion of CheckboxToggleStyle like this:
|
Toggle(isOn: $isChecked) { Textual content(“Purchase a pack of Airtags”) } .toggleStyle(CheckboxToggleStyle()) |
If you wish to use the dot-syntax, you’ll be able to lengthen ToggleStyle and declare a corresponding static variable like this:
|
extension ToggleStyle the place Self == CheckboxToggleStyle {
static var checkmark: CheckboxToggleStyle { CheckboxToggleStyle() } } |
Now you’ll be able to apply the type utilizing the dot syntax.
|
Toggle(isOn: $isChecked) { Textual content(“Purchase a pack of Airtags”) } .toggleStyle(.checkmark) |
Founding father of AppCoda. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.
