SwiftUI-VPSwitch

1.0.1

Star
VansonLeung/SwiftUI-VPSwitchToggle

What's New

2023-07-13T05:49:48Z

SwiftUI-VPSwitchToggle

This package was inspired by an Instagram post: https://www.instagram.com/reel/Criem1rLI9P/?igshid=YzcxN2Q2NzY0OA%3D%3D

Yet another SwiftUI Toggle, but fully customizable!

Supports iOS 14 or above

Supports the following background transition animations:

  • Fade
  • Horizontal
  • HorizontalReverse
  • Vertical
  • VerticalReverse
xSimulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-08.at.21.59.36.mov

Installation

Install Swift Package in SPM, URL:

.package(url: "https://github.com/VansonLeung/SwiftUI-VPSwitchToggle.git", from: "1.0.0")

Usage

//
//  ContentView.swift
//  SwiftUI-VPSwitch Demo
//
//  Created by Vanson Leung on 8/7/2023.
//

import SwiftUI
import SwiftUI_VPSwitch

struct ContentView: View {
    
    @State var isOn: Bool = false
    
    var body: some View {
        ZStack {
            VStack {
                
                // No config, default
                SUIVPSwitch(
                    isOn: $isOn
                )


                // Custom Sized
                SUIVPSwitch(
                    isOn: $isOn,
                    widgetSize: CGSize(width: 100, height: 40),
                    widgetForegroundMargin: 6
                )

                // Custom image and color
                SUIVPSwitch(
                    isOn: $isOn,
                    widgetSize: nil,
                    widgetForegroundMargin: nil,
                    state_on: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: .init("f_switch_bg_moon"),
                        backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                        foregroundImage: .init("f_switch_button_moon"),
                        foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                    ),
                    state_off: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: .init("f_switch_bg_sun"),
                        backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                        foregroundImage: .init("f_switch_button_sun"),
                        foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                    ),
                    backgroundImageOrder: .verticalReversed
                )

                // Custom image, color and size
                SUIVPSwitch(
                    isOn: $isOn,
                    widgetSize: CGSize(width: 100, height: 40),
                    widgetForegroundMargin: 6,
                    state_on: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: .init("f_switch_bg_moon"),
                        backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                        foregroundImage: .init("f_switch_button_moon"),
                        foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                    ),
                    state_off: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: .init("f_switch_bg_sun"),
                        backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                        foregroundImage: .init("f_switch_button_sun"),
                        foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                    ),
                    backgroundImageOrder: .fade
                )
                
                HStack {
                    
                    // Custom image, color and size
                    SUIVPSwitch(
                        isOn: $isOn,
                        widgetSize: CGSize(width: 100, height: 60),
                        widgetForegroundMargin: 6,
                        state_on: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_moon"),
                            backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                            foregroundImage: .init("f_switch_button_moon"),
                            foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                        ),
                        state_off: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_sun"),
                            backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                            foregroundImage: .init("f_switch_button_sun"),
                            foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                        ),
                        backgroundImageOrder: .horizontal
                    )
                    
                    
                    // Custom image, color and size
                    SUIVPSwitch(
                        isOn: $isOn,
                        widgetSize: CGSize(width: 100, height: 60),
                        widgetForegroundMargin: 6,
                        state_on: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_moon"),
                            backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                            foregroundImage: .init("f_switch_button_moon"),
                            foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                        ),
                        state_off: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_sun"),
                            backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                            foregroundImage: .init("f_switch_button_sun"),
                            foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                        ),
                        backgroundImageOrder: .horizontalReversed
                    )
                    
                }
                HStack {

                    // Custom image, color and size
                    SUIVPSwitch(
                        isOn: $isOn,
                        widgetSize: CGSize(width: 100, height: 60),
                        widgetForegroundMargin: 6,
                        state_on: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_moon"),
                            backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                            foregroundImage: .init("f_switch_button_moon"),
                            foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                        ),
                        state_off: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_sun"),
                            backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                            foregroundImage: .init("f_switch_button_sun"),
                            foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                        ),
                        backgroundImageOrder: .vertical
                    )

                    
                    // Custom image, color and size
                    SUIVPSwitch(
                        isOn: $isOn,
                        widgetSize: CGSize(width: 100, height: 60),
                        widgetForegroundMargin: 6,
                        state_on: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_moon"),
                            backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                            foregroundImage: .init("f_switch_button_moon"),
                            foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                        ),
                        state_off: SUIVPSwitch.SUIVPSwitchState(
                            backgroundImage: .init("f_switch_bg_sun"),
                            backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                            foregroundImage: .init("f_switch_button_sun"),
                            foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                        ),
                        backgroundImageOrder: .verticalReversed
                    )

                }

                
                // Custom color only
                SUIVPSwitch(
                    isOn: $isOn,
                    widgetSize: nil,
                    widgetForegroundMargin: nil,
                    state_on: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: nil,
                        backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                        foregroundImage: nil,
                        foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                    ),
                    state_off: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: nil,
                        backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                        foregroundImage: nil,
                        foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                    ),
                    backgroundImageOrder: .fade
                )

                
                
                // Custom color and size but not image
                SUIVPSwitch(
                    isOn: $isOn,
                    widgetSize: CGSize(width: 100, height: 40),
                    widgetForegroundMargin: 6,
                    state_on: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: nil,
                        backgroundColor: .init(red: 29.0/255.0, green: 32.0/255.0, blue: 47.0/255.0),
                        foregroundImage: nil,
                        foregroundColor: .init(red: 203.0/255.0, green: 207.0/255.0, blue: 215.0/255.0)
                    ),
                    state_off: SUIVPSwitch.SUIVPSwitchState(
                        backgroundImage: nil,
                        backgroundColor: .init(red: 71.0/255.0, green: 125.0/255.0, blue: 182.0/255.0),
                        foregroundImage: nil,
                        foregroundColor: .init(red: 244.0/255.0, green: 201.0/255.0, blue: 81.0/255.0)
                    ),
                    backgroundImageOrder: .fade
                )
                
                

            }
            .padding()
        }
        .background(
            Color(uiColor: UIColor(red: 0.8, green: 0.8, blue: 0.8, alpha: 1))
        )
        .frame(minWidth: 0, maxWidth: .infinity,
               minHeight: 0, maxHeight: .infinity,
               alignment: .center)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Description

  • Swift Tools 5.8.0
View More Packages from this Author

Dependencies

  • None
Last updated: Sun Apr 14 2024 21:44:28 GMT-0900 (Hawaii-Aleutian Daylight Time)