{"id":70,"date":"2022-07-20T14:50:52","date_gmt":"2022-07-20T13:50:52","guid":{"rendered":"https:\/\/techjourney.me\/?p=70"},"modified":"2022-07-25T16:45:30","modified_gmt":"2022-07-25T15:45:30","slug":"swiftui-button","status":"publish","type":"post","link":"https:\/\/techjourney.me\/index.php\/2022\/07\/20\/swiftui-button\/","title":{"rendered":"SwiftUI Button\ufffc"},"content":{"rendered":"\n

Tested on Xcode 13.4 with iOS 14<\/p>\n\n\n\n

Button<\/a> is one of the most fundamental building block for mobile apps. SwiftUI provides a very flexible way to create and customise buttons in your app.<\/p>\n\n\n\n

Creating a Button<\/h2>\n\n\n\n

Button in SwiftUI can simply be created as below:<\/p>\n\n\n\n

Button("Button Title") {\n    \/\/ Action to perform on tap\n}<\/code><\/pre><\/div>\n\n\n\n
This creates a button that simply consists of the text Button Title<\/code> and performs the action specified in the closure.<\/p>\n\n\n
\n
\"iPhone
The most basic SwiftUI button with only text<\/figcaption><\/figure><\/div>\n\n\n
You can create more complicated layout in the button as below:<\/p>\n\n\n\n
Button {\n    \/\/ Action to perform on tap\n} label: {\n    \/\/ Contents of the button\n    HStack {\n        Image(systemName: "command")\n        Text("Button Title")\n    }\n}<\/code><\/pre><\/div>\n\n\n
\n
\"iPhone
A SwiftUI button with image and text<\/figcaption><\/figure><\/div>\n\n\n
This still doesn’t look like much of a button though. We want to be able to specify more aspects of the button with things like background colour, foreground colour, border etc.<\/p>\n\n\n\n
Customising a Button<\/h2>\n\n\n\n
SwiftUI provides .buttonStyle(_ style: ButtonStyle)<\/code> method to allow us to define how the button should be styled. Lets create a custom style that we can apply to buttons for quick styling:<\/p>\n\n\n\n
struct CustomButtonStyle: ButtonStyle {\n    public let enabledBackgroundColor: Color\n    public let disabledBackgroundColor: Color\n    public let enabledForegroundColor: Color\n    public let disabledForegroundColor: Color\n    public let cornerRadius: CGFloat\n    public let borderColor: Color?\n\n    init(\n        enabledBackgroundColor: Color,\n        disabledBackgroundColor: Color,\n        enabledForegroundColor: Color,\n        disabledForegroundColor: Color,\n        cornerRadius: CGFloat = 12.0,\n        borderColor: Color? = nil\n    ) {\n        self.enabledBackgroundColor = enabledBackgroundColor\n        self.disabledBackgroundColor = disabledBackgroundColor\n        self.enabledForegroundColor = enabledForegroundColor\n        self.disabledForegroundColor = disabledForegroundColor\n        self.cornerRadius = cornerRadius\n        self.borderColor = borderColor\n    }\n\n    @Environment(\\.isEnabled) private var isEnabled\n\n    func makeBody(configuration: Configuration) -> some View {\n        configuration.label\n            .font(.system(size: 18.0, weight: .semibold))\n            .padding()\n            .background(backgroundColor)\n            .foregroundColor(foregroundColor)\n            .cornerRadius(cornerRadius)\n            .overlay(\n                RoundedRectangle(cornerRadius: cornerRadius)\n                    .stroke(\n                        borderColor ?? .clear,\n                        lineWidth: 1.0\n                    )\n            )\n            .contentShape(RoundedRectangle(cornerRadius: cornerRadius))\n    }\n\n    var backgroundColor: Color {\n        isEnabled ? enabledBackgroundColor : disabledBackgroundColor\n    }\n\n    var foregroundColor: Color {\n        isEnabled ? enabledForegroundColor : disabledForegroundColor\n    }\n}<\/code><\/pre><\/div>\n\n\n\n
configuration.label<\/code> in the<\/code> makeBody<\/code> method above is the content that is passed as the button’s body. Most of the modifiers above are self explanatory but lets have a quick look at each of them individually:<\/p>\n\n\n\n