ButtonStyle

Table of Contents

1. Overview
2. Features
3. Requirements
4. Installation
5. Usage
6. Author

Overview

In SwiftUI, a ButtonStyle is a protocol that allows developers to define custom appearances and interactions for buttons. By conforming to this protocol, we can encapsulate styling logic into reusable components, ensuring a consistent look and feel across our application.

Instead of individually styling each button, a ButtonStyle defines how a button appears and responds to user interactions (such as taps or presses) in a single place. This approach not only simplifies maintenance but also promotes a cohesive user interface design.

<img src="https://github.com/user-attachments/assets/89fcae09-da1b-4470-96b1-b01bd75a692f" width="220"> <img src="https://github.com/user-attachments/assets/bd90bcd0-3510-4796-903e-4f78ac4b12c3" width="220"> <img src="https://github.com/user-attachments/assets/c6d4ba82-51a0-4f93-8632-6e564839e7cb" width="220">

Our SDK leverages the power of ButtonStyle to provide a suite of ready-to-use, customizable button styles. These styles—such as CapsuleButtonStyle, ShapeButtonStyle, BouncyButtonStyle, GrowingButtonStyle, and LoadingButtonStyle are designed to cover a wide range of use cases, from modern, rounded buttons to dynamic, interactive effects.

Features

Addresses common challenges in UI design by offering:

• Pre-defined Button Designs: A library of thoughtfully crafted button styles that cover a range of aesthetics and use cases, saving time and design effort.
• Flexibility: Easy-to-adjust parameters allow for a high degree of customization without the need to rewrite or deeply understand the underlying implementation.
• Improved User Experience: Interactive effects and visual feedback not only make the UI more appealing but also guide users intuitively through their interactions, enhancing overall satisfaction.
• Seamless Integration and Multi-Platform Support: Designed to work out of the box with SwiftUI across iOS, macOS, tvOS, watchOS, and visionOS, our button styles can be applied with a single modifier. This makes it straightforward for developers to upgrade their app's UI with minimal effort while ensuring a consistent look and feel across all Apple platforms.

Requirements

| Platform | Minimum Version | |----------|-----------------| | iOS | 15.0 | | macOS | 12.0 | | tvOS | 15.0 | | watchOS | 8.0 | | visionOS | 1.0 |

Installation

This project can be installed using Swift Package Manager and CocoaPod.

Swift Package Manager

1. Open your project in Xcode.
2. Navigate to File > Swift Packages > Add Package Dependency.
3. Paste the repository URL: https://github.com/Enryun/ButtonStyle
4. Follow the prompts to add the package to your project.

For more details on using Swift Package Manager, visit Apple's Swift Package Manager documentation.

CocoaPods

CocoaPods is a dependency manager for Objective-C, which automates and simplifies the process of using 3rd-party libraries in your projects. See the Get Started section for more details.

Add the following entry to your Podfile:

pod 'ButtonStyle'

Then run pod install.

Don't forget to import ButtonStyle in every file you'd like to use it.

Usage

CapsuleButtonStyle:

A ButtonStyle for SwiftUI that applies a Capsule Shape with customizable color styles.

CapsuleButtonStyle(textColor: Color.white, backgroundColor: gradient)

Parameters:

• textColor: The color or style applied to the text inside the button. Defaults to .white.
• backgroundColor: The background color or style of the button, conforming to ShapeStyle. Defaults to .blue.
• verticalPadding: The vertical padding inside the button. Defaults to 10.
• horizontalPadding: The horizontal padding inside the button. Defaults to 20.

Example:

let gradient = LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)

var body: some View {
    VStack(spacing: 25) {
        Button("Capsule 1") { }
            .buttonStyle(.capsule)
//          .buttonStyle(CapsuleButtonStyle())
    
        Button("Capsule 2") { }
            .buttonStyle(CapsuleButtonStyle(textColor: .black, backgroundColor: .green))

        // Alternatively, we have shortcut enumcase usage
        Button("Capsule 3") { }
            .buttonStyle(.capsule(textColor: .white, backgroundColor: gradient))
    
        Button(action: {}, label: {
            HStack {
                Image(systemName: "cloud.sun")
                Text("Capsule 4")
            }
        })
        .buttonStyle(.capsule(textColor: Color.white, backgroundColor: gradient))
    }
}

<img src="https://github.com/user-attachments/assets/89fcae09-da1b-4470-96b1-b01bd75a692f" width="220">

This style gives buttons a modern, rounded look suitable for various UI contexts.

ShapeButtonStyle:

A ButtonStyle for SwiftUI that allows customization of the button's shape and color.

ShapeButtonStyle(textColor: .white, backgroundColor: gradient, shape: .circle)

Parameters:

• textColor: The color or style applied to the text inside the button. Default is .primary.
• backgroundColor: The background color or style of the button, conforming to ShapeStyle. Default is .secondary.
• shape: The custom shape for the button, conforming to Shape. The default shape is Capsule().
• verticalPadding: The vertical padding inside the button. Defaults to 10.
• horizontalPadding: The horizontal padding inside the button. Defaults to 20.

Example:

let gradient = LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)

var body: some View {
    VStack(spacing: 25) {
        Button("ShapeButton 1") { }
            .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .blue, shape: .rect))
    
        Button("ShapeButton 2") { }
            .buttonStyle(ShapeButtonStyle(textColor: .primary, backgroundColor: .green, shape: .rect(cornerRadius: 8)))
    
        Button("ShapeButton 3") { }
            .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .red, shape: .capsule))
                
        Button("ShapeButton 4") { }
            .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .orange, shape: .ellipse))
    
        Button(action: {}, label: {
            Image(systemName: "heart.fill")
                .font(.title)
                .padding(5)
            })
            .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: gradient, shape: .circle))
    }
}

<img src="https://github.com/user-attachments/assets/bd90bcd0-3510-4796-903e-4f78ac4b12c3" width="220">

This style modifies the appearance of buttons to fit within a specified shape, with customizable foreground, background colors and padding. It is highly flexible, accommodating various shapes and color styles.

BouncyButtonStyle

A customizable ButtonStyle for SwiftUI that simulates a bouncy 3D press effect.

BouncyButtonStyle()

Parameters:

• textColor: The color of the text when the button is not pressed.
• pressedTextColor: The color of the text when the button is pressed.
• backgroundColor: The background color of the button when it's not pressed.
• pressedBackgroundColor: The background color of the button when pressed.
• shape: The shape of the button, conforming to the Shape protocol.
• verticalPadding: The vertical padding inside the button.
• horizontalPadding: The horizontal padding inside the button.

Example:

Button("Cartoon Button") { }
    .buttonStyle(BouncyButtonStyle())

Button("Cartoon Button") { }
    .buttonStyle(BouncyButtonStyle(shape: .rect(cornerRadius: 4)))

Button(action: { }, label: {
    Image(systemName: "heart.fill")
        .font(.title)
        .padding(5)
})
.buttonStyle(BouncyButtonStyle(shape: .circle))

Button("Cartoon Button") { }
    .buttonStyle(BouncyButtonStyle(textColor: .black,
                                   pressedTextColor: .black,
                                   backgroundColor: .green,
                                   pressedBackgroundColor: .orange))

BouncyButtonStyle applies a dynamic and interactive visual effect to button presses, enhancing user experience with a noticeable 'pop'. It's ideal for adding a playful and engaging touch to UI components:

https://github.com/user-attachments/assets/f4d5dd43-3781-4311-a53d-5a5304d86779

This style configures the button to exhibit a bouncy animation upon interaction, with adjustable visual properties.

GrowingButtonStyle:

A ButtonStyle for SwiftUI that scales the button on press, with customizable shape and color styles.

GrowingButtonStyle(textColor: .primary, backgroundColor: .green, shape: .rect(cornerRadius: 4))

Parameters:

• textColor: The color or style for the text inside the button, defaulting to .white.
• backgroundColor: The background color or style of the button, conforming to ShapeStyle, with a default of .blue.
• shape: The custom shape for the button, conforming to Shape. The default shape