Skip to content

Commit

Permalink
Update softSwitchToggleStyle
Browse files Browse the repository at this point in the history
  • Loading branch information
costachung committed Dec 12, 2020
1 parent 7c81ebb commit defef63
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 47 deletions.
71 changes: 35 additions & 36 deletions Sources/Neumorphic/SoftDynamicToggleStyle.swift
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ public struct SoftDynamicToggleStyle<S: Shape> : ToggleStyle {
}



public struct SoftSwitchToggleStyle : ToggleStyle {

var tintColor : Color
Expand All @@ -71,42 +72,40 @@ public struct SoftSwitchToggleStyle : ToggleStyle {
var mainColor : Color
var darkShadowColor : Color
var lightShadowColor : Color


var hideLabel : Bool

public func makeBody(configuration: Self.Configuration) -> some View {
return HStack {
configuration.label
.font(.body)
Spacer()

Capsule()
.fill(mainColor)
.softOuterShadow()
.frame(width: 75, height: 45)
.overlay(
Capsule()
.fill(configuration.isOn ? tintColor : offTintColor)
.softInnerShadow(Capsule(), darkShadow: configuration.isOn ? tintColor : darkShadowColor, lightShadow: configuration.isOn ? tintColor : lightShadowColor, spread: 0.35, radius: 3)
.frame(width: 70, height: 40)
.overlay(
HStack{
Circle()
.fill(mainColor)
.softOuterShadow(darkShadow: darkShadowColor, lightShadow: lightShadowColor, offset: 2, radius: 1)
.offset(x: configuration.isOn ? 15 : -15)
}.padding(7)

)
.onTapGesture {
withAnimation(.easeInOut(duration: 0.2)) {
configuration.isOn.toggle()
}
}
)


if !hideLabel {
configuration.label
.font(.body)
Spacer()
}
ZStack {
Capsule()
.fill(mainColor)
.softOuterShadow()
.frame(width: 75, height: 45)

Capsule()
.fill(configuration.isOn ? tintColor : offTintColor)
.softInnerShadow(Capsule(), darkShadow: configuration.isOn ? tintColor : darkShadowColor, lightShadow: configuration.isOn ? tintColor : lightShadowColor, spread: 0.35, radius: 3)
.frame(width: 70, height: 40)

Circle()
.fill(mainColor)
.softOuterShadow(darkShadow: darkShadowColor, lightShadow: lightShadowColor, offset: 2, radius: 1)
.frame(width: 30, height: 30)
.offset(x: configuration.isOn ? 15 : -15)
.animation(.easeInOut(duration: 0.2), value: configuration.isOn)
}
.onTapGesture {
withAnimation(.easeInOut(duration: 0.2)) {
configuration.isOn.toggle()
}
}
}
.font(.title)
.padding(.horizontal)
}

}
Expand All @@ -119,9 +118,9 @@ extension Toggle {
public func softToggleStyle<S : Shape>(_ content: S, padding : CGFloat = 16, mainColor : Color = Neumorphic.shared.mainColor(), textColor : Color = Neumorphic.shared.secondaryColor(), darkShadowColor: Color = Neumorphic.shared.darkShadowColor(), lightShadowColor: Color = Neumorphic.shared.lightShadowColor(), pressedEffect : SoftButtonPressedEffect = .hard) -> some View {
self.toggleStyle(SoftDynamicToggleStyle(content, mainColor: mainColor, textColor: textColor, darkShadowColor: darkShadowColor, lightShadowColor: lightShadowColor, pressedEffect : pressedEffect, padding:padding))
}
public func softSwitchToggleStyle(tint: Color, offTint: Color = Neumorphic.shared.mainColor(), mainColor : Color = Neumorphic.shared.mainColor(), darkShadowColor: Color = Neumorphic.shared.darkShadowColor(), lightShadowColor: Color = Neumorphic.shared.lightShadowColor()) -> some View {
return self.toggleStyle(SoftSwitchToggleStyle(tintColor: tint, offTintColor: offTint, mainColor: mainColor, darkShadowColor: darkShadowColor, lightShadowColor: lightShadowColor))

public func softSwitchToggleStyle(tint: Color = .green, offTint: Color = Neumorphic.shared.mainColor(), mainColor : Color = Neumorphic.shared.mainColor(), darkShadowColor: Color = Neumorphic.shared.darkShadowColor(), lightShadowColor: Color = Neumorphic.shared.lightShadowColor(), labelsHidden : Bool = false) -> some View {
return self.toggleStyle(SoftSwitchToggleStyle(tintColor: tint, offTintColor: offTint, mainColor: mainColor, darkShadowColor: darkShadowColor, lightShadowColor: lightShadowColor, hideLabel: labelsHidden))
}

}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
AA1C8442240CDD090082F452 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = AA1C8441240CDD090082F452 /* Assets.xcassets */; };
AA1C8445240CDD090082F452 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = AA1C8444240CDD090082F452 /* Preview Assets.xcassets */; };
AA1C8448240CDD090082F452 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA1C8446240CDD090082F452 /* LaunchScreen.storyboard */; };
AA5420E925847A7A007A3665 /* SoftSwitchToggleDemoView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AA5420E825847A7A007A3665 /* SoftSwitchToggleDemoView.swift */; };
AA5ABDD624E0B3EF00622BAF /* SoftButtonDemoView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AA5ABDD524E0B3EF00622BAF /* SoftButtonDemoView.swift */; };
AAB9DDA82480D0500047A0DC /* Neumorphic in Frameworks */ = {isa = PBXBuildFile; productRef = AAB9DDA72480D0500047A0DC /* Neumorphic */; };
AAEAE0CF258315AA00D79970 /* SoftToggleDemoView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AAEAE0CE258315AA00D79970 /* SoftToggleDemoView.swift */; };
Expand All @@ -27,6 +28,7 @@
AA1C8444240CDD090082F452 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
AA1C8447240CDD090082F452 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
AA1C8449240CDD090082F452 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
AA5420E825847A7A007A3665 /* SoftSwitchToggleDemoView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoftSwitchToggleDemoView.swift; sourceTree = "<group>"; };
AA5ABDD524E0B3EF00622BAF /* SoftButtonDemoView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoftButtonDemoView.swift; sourceTree = "<group>"; };
AAB9DDA62480D03B0047A0DC /* neumorphic */ = {isa = PBXFileReference; lastKnownFileType = folder; name = neumorphic; path = ..; sourceTree = "<group>"; };
AAEAE0CE258315AA00D79970 /* SoftToggleDemoView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoftToggleDemoView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -70,6 +72,7 @@
AA1C843F240CDD090082F452 /* ContentView.swift */,
AA5ABDD524E0B3EF00622BAF /* SoftButtonDemoView.swift */,
AAEAE0CE258315AA00D79970 /* SoftToggleDemoView.swift */,
AA5420E825847A7A007A3665 /* SoftSwitchToggleDemoView.swift */,
AA1C8441240CDD090082F452 /* Assets.xcassets */,
AA1C8446240CDD090082F452 /* LaunchScreen.storyboard */,
AA1C8449240CDD090082F452 /* Info.plist */,
Expand Down Expand Up @@ -168,6 +171,7 @@
buildActionMask = 2147483647;
files = (
AA1C843C240CDD090082F452 /* AppDelegate.swift in Sources */,
AA5420E925847A7A007A3665 /* SoftSwitchToggleDemoView.swift in Sources */,
AA1C843E240CDD090082F452 /* SceneDelegate.swift in Sources */,
AA1C8440240CDD090082F452 /* ContentView.swift in Sources */,
AA5ABDD624E0B3EF00622BAF /* SoftButtonDemoView.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
//
// SoftSwitchToggleDemoView.swift
// neumorphic-ios-example
//
// Created by Costa Chung on 12/12/2020.
// Copyright © 2020 Costa Chung. All rights reserved.
//

import SwiftUI
import Neumorphic

extension Text {
public func demoViewSectionTitle() -> some View {
return self.font(.body)
.fontWeight(.bold)
.foregroundColor(Neumorphic.shared.secondaryColor())
}
}

struct SoftSwitchToggleDemoView: View {

@Environment(\.colorScheme) var colorScheme: ColorScheme
@State var toggleIsOn : Bool = false

var body: some View {
Neumorphic.shared.colorScheme = colorScheme
return ZStack {
Neumorphic.shared.mainColor().edgesIgnoringSafeArea(.all)
VStack(spacing:8){
Text("Demo")
.font(.title)
.fontWeight(.bold)

Text("System Default Toggle Button")
.demoViewSectionTitle()

//System Toggle Button
HStack(spacing:15) {
Spacer()
Toggle("Toggle", isOn: $toggleIsOn)
.toggleStyle(SwitchToggleStyle(tint: .red))
.labelsHidden()
Spacer()
}
.padding()

//softSwitchToggleStyle
Text("Neumorphic")
.demoViewSectionTitle()
Text("Soft Switch Toggle Style")
.demoViewSectionTitle()
HStack(spacing:15) {
Spacer()
Toggle("Toggle", isOn: $toggleIsOn)
.softSwitchToggleStyle(tint: .red, labelsHidden: true)
Spacer()
}
.padding()
}
.padding()
}
}

}

struct SoftSwitchToggleDemoView_Previews: PreviewProvider {
static var previews: some View {
SoftSwitchToggleDemoView()
.environment(\.colorScheme, .light)

}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,45 @@ struct SoftToggleDemoView: View {
Neumorphic.shared.mainColor().edgesIgnoringSafeArea(.all)
ScrollView {
VStack(spacing:8){
Text("softSwitchToggleStyle")
//System Toggle Button
HStack(spacing:15) {
Spacer()
Toggle(isOn: $toggleIsOn, label: {
Text("Toggle Switch")
Text("Toggle")
})
.softSwitchToggleStyle(tint: .green)
Spacer()
}
.padding()


Text("softToggleStyle")
//softSwitchToggleStyle
Text("softSwitchToggleStyle()")
HStack(spacing:15) {
Spacer()
Toggle(isOn: $toggleIsOn, label: {
Text("Toggle")
})
.softSwitchToggleStyle()

Spacer()
}
.padding()

//softToggleStyle
Text("softToggleStyle()")
//Play Button
HStack(spacing:15) {
Toggle(isOn: $toggleIsOn, label: {
if toggleIsOn {
Image(systemName: "stop.fill")
.font(.title)
}
else{
Image(systemName: "play.fill")
.font(.title)
}
})
.softToggleStyle(Circle())
.softToggleStyle(Circle(), padding: 20)
}


//Rect
HStack(spacing:15) {

Expand All @@ -62,7 +73,6 @@ struct SoftToggleDemoView: View {
.softToggleStyle(Rectangle(), pressedEffect: .flat)
}
.padding()

//Rounded
HStack(spacing:15) {
Toggle(isOn: $toggleIsOn, label: {
Expand All @@ -76,7 +86,6 @@ struct SoftToggleDemoView: View {
.softToggleStyle(RoundedRectangle(cornerRadius: 8), pressedEffect: .flat)
}
.padding()

//Capsule
HStack(spacing:15) {
Toggle(isOn: $toggleIsOn, label: {
Expand All @@ -90,7 +99,6 @@ struct SoftToggleDemoView: View {
.softToggleStyle(Capsule(), pressedEffect: .flat)
}
.padding()

//Circle
HStack(spacing:15) {
Toggle(isOn: $toggleIsOn, label: {
Expand Down

0 comments on commit defef63

Please sign in to comment.