From 481198c5a713225b20640b5b6fc7a6877a68126d Mon Sep 17 00:00:00 2001 From: Ryo Tsuzukihashi Date: Fri, 16 Aug 2024 22:52:29 +0900 Subject: [PATCH] add: NeumophismButtonStyle --- DemoApp/DemoApp/BaseView.swift | 70 ++++++------- DemoApp/DemoApp/ContentView.swift | 130 ++++++++++++------------ DemoApp/DemoApp/DemoApp.swift | 4 +- NeumorphismUI.xcodeproj/project.pbxproj | 4 + Sources/NeumophismButtonStyle.swift | 41 ++++++++ 5 files changed, 147 insertions(+), 102 deletions(-) create mode 100644 Sources/NeumophismButtonStyle.swift diff --git a/DemoApp/DemoApp/BaseView.swift b/DemoApp/DemoApp/BaseView.swift index bebbdc4..a8ad238 100644 --- a/DemoApp/DemoApp/BaseView.swift +++ b/DemoApp/DemoApp/BaseView.swift @@ -2,44 +2,44 @@ import SwiftUI import NeumorphismUI struct BaseView: View { - @EnvironmentObject var neumorphism: NeumorphismManager - var name: String = "SimpleView" - var desc: String = "" - - var body: some View { - ZStack { - RoundedRectangle(cornerRadius: 8) - .fill(self.neumorphism.color) - .neumorphismShadow() - HStack { - VStack (alignment: .leading){ - Text(name) - .foregroundColor(self.neumorphism.fontColor()) - .font(.headline) - Text(desc) - .foregroundColor(self.neumorphism.fontColor()) - .font(.subheadline) - } - .padding(.leading) - Spacer() - Image(systemName: "arrowtriangle.right.fill") - .resizable() - .frame(width: 16, height: 16) - .foregroundColor(self.neumorphism.fontColor()) - .padding(.trailing, 24) - } - .frame(width: nil, height: 80) + @EnvironmentObject var neumorphism: NeumorphismManager + var name: String = "SimpleView" + var desc: String = "" + + var body: some View { + ZStack { + RoundedRectangle(cornerRadius: 8) + .fill(self.neumorphism.color) + .neumorphismShadow() + HStack { + VStack (alignment: .leading){ + Text(name) + .foregroundColor(self.neumorphism.fontColor()) + .font(.headline) + Text(desc) + .foregroundColor(self.neumorphism.fontColor()) + .font(.subheadline) } + .padding(.leading) + Spacer() + Image(systemName: "arrowtriangle.right.fill") + .resizable() + .frame(width: 16, height: 16) + .foregroundColor(self.neumorphism.fontColor()) + .padding(.trailing, 24) + } + .frame(width: nil, height: 80) } + } } struct BaseView_Previews: PreviewProvider { - static let neumorphism = NeumorphismManager( - lightColor: Color(hex: "C1D2EB"), - darkColor: Color(hex: "2C292C") - ) - static var previews: some View { - BaseView() - .environmentObject(neumorphism ) - } + static let neumorphism = NeumorphismManager( + lightColor: Color(hex: "C1D2EB"), + darkColor: Color(hex: "2C292C") + ) + static var previews: some View { + BaseView() + .environmentObject(neumorphism ) + } } diff --git a/DemoApp/DemoApp/ContentView.swift b/DemoApp/DemoApp/ContentView.swift index f78d573..4f7e4d6 100644 --- a/DemoApp/DemoApp/ContentView.swift +++ b/DemoApp/DemoApp/ContentView.swift @@ -2,72 +2,72 @@ import SwiftUI import NeumorphismUI struct ContentView: View { - @EnvironmentObject var neumorphism: NeumorphismManager - @State private var showView: Bool = false - @State var isDark = false - var body: some View { - NavigationView { - ScrollView(.vertical, showsIndicators: false) { - VStack (spacing: 0){ - HStack { - ZStack { - RoundedRectangle(cornerRadius: 24) - .fill(self.neumorphism.color) - .neumorphismShadow() - .frame(width: 300, height: 64, alignment: .center) - - Text("NeumorphismUI") - .shadow(color: self.neumorphism.color.darkerColor(), radius: 4, x: 4, y: 4) - .shadow(color: self.neumorphism.color.lighterColor(), radius: 4, x: -4, y: -4) - .foregroundColor(self.neumorphism.color.darkerColor()) - .font(.system(size: 36, weight: .bold, design: .rounded)) - } - - NeumorphismBindingButton(isSelected: $isDark, shapeType: .circle, normalImage: Image(systemName: "sun.max"), selectedImage: Image(systemName: "moon"), width: 44, height: 44, imageWidth: 20, imageHeight: 20, shadowRadius: 4) { - self.neumorphism.changeMode() - }.onAppear() { - self.isDark = self.neumorphism.isDark - } - } - - Spacer() - - NavigationLink(destination: SimpleView()) { - BaseView(name: "SimpleView", desc: "most simple neumorphism") - }.padding() - - NavigationLink(destination: Concave()) { - BaseView(name: "Concave", desc: "concave neumorphism") - }.padding() - - NavigationLink(destination: NeumorphismButtonView()) { - BaseView(name: "NeumorphismButtonView", desc: "neumorphism button") - }.padding() - - NavigationLink(destination: BindingButtonView()) { - BaseView(name: "NeumorphismBindingButton", desc: "neumorphism binding button") - }.padding() - - NavigationLink(destination: NeumorphismSliderView()) { - BaseView(name: "NeumorphismSlider", desc: "custom slider") - }.padding() - - Spacer() - } - }.background(self.neumorphism.color.edgesIgnoringSafeArea(.all)) - }.navigationViewStyle(StackNavigationViewStyle()) - } + @EnvironmentObject var neumorphism: NeumorphismManager + @State private var showView: Bool = false + @State var isDark = false + + var body: some View { + NavigationView { + ScrollView(.vertical, showsIndicators: false) { + VStack (spacing: 0){ + HStack { + ZStack { + RoundedRectangle(cornerRadius: 24) + .fill(self.neumorphism.color) + .neumorphismShadow() + .frame(width: 300, height: 64, alignment: .center) + + Text("NeumorphismUI") + .shadow(color: self.neumorphism.color.darkerColor(), radius: 4, x: 4, y: 4) + .shadow(color: self.neumorphism.color.lighterColor(), radius: 4, x: -4, y: -4) + .foregroundColor(self.neumorphism.color.darkerColor()) + .font(.system(size: 36, weight: .bold, design: .rounded)) + } + + NeumorphismBindingButton(isSelected: $isDark, shapeType: .circle, normalImage: Image(systemName: "sun.max"), selectedImage: Image(systemName: "moon"), width: 44, height: 44, imageWidth: 20, imageHeight: 20, shadowRadius: 4) { + self.neumorphism.changeMode() + }.onAppear() { + self.isDark = self.neumorphism.isDark + } + } + + Spacer() + + NavigationLink(destination: SimpleView()) { + BaseView(name: "SimpleView", desc: "most simple neumorphism") + }.padding() + + NavigationLink(destination: Concave()) { + BaseView(name: "Concave", desc: "concave neumorphism") + }.padding() + + NavigationLink(destination: NeumorphismButtonView()) { + BaseView(name: "NeumorphismButtonView", desc: "neumorphism button") + }.padding() + + NavigationLink(destination: BindingButtonView()) { + BaseView(name: "NeumorphismBindingButton", desc: "neumorphism binding button") + }.padding() + + NavigationLink(destination: NeumorphismSliderView()) { + BaseView(name: "NeumorphismSlider", desc: "custom slider") + }.padding() + Spacer() + } + }.background(self.neumorphism.color.edgesIgnoringSafeArea(.all)) + }.navigationViewStyle(StackNavigationViewStyle()) + } } struct ContentView_Previews: PreviewProvider { - static let neumorphism = NeumorphismManager( - isDark: false, - lightColor: Color(hex: "C1D2EB"), - darkColor: Color(hex: "131A20") - ) - - static var previews: some View { - ContentView() - .environmentObject(neumorphism) - } + static let neumorphism = NeumorphismManager( + isDark: false, + lightColor: Color(hex: "C1D2EB"), + darkColor: Color(hex: "131A20") + ) + + static var previews: some View { + ContentView() + .environmentObject(neumorphism) + } } diff --git a/DemoApp/DemoApp/DemoApp.swift b/DemoApp/DemoApp/DemoApp.swift index ecbdcc2..f46884b 100644 --- a/DemoApp/DemoApp/DemoApp.swift +++ b/DemoApp/DemoApp/DemoApp.swift @@ -4,8 +4,8 @@ import NeumorphismUI @main struct DemoApp: App { let neumorphism = NeumorphismManager( - lightColor: Color(hex: "C1D2EB"), - darkColor: Color(hex: "2C292C") + lightColor: Color(hex: "C1D2EB"), + darkColor: Color(hex: "2C292C") ) var body: some Scene { diff --git a/NeumorphismUI.xcodeproj/project.pbxproj b/NeumorphismUI.xcodeproj/project.pbxproj index 3adb06e..c8275f9 100644 --- a/NeumorphismUI.xcodeproj/project.pbxproj +++ b/NeumorphismUI.xcodeproj/project.pbxproj @@ -22,6 +22,7 @@ /* Begin PBXBuildFile section */ AA5875A325263BD40015AF11 /* NeumorphismContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = AA5875A225263BD40015AF11 /* NeumorphismContent.swift */; }; + AAD714E92C6F8D7600D78AE6 /* NeumophismButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = AAD714E82C6F8D7600D78AE6 /* NeumophismButtonStyle.swift */; }; DA14F56F2458DEFF008BCD97 /* NeumorphismConcaveModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA14F56E2458DEFF008BCD97 /* NeumorphismConcaveModifier.swift */; }; DA5AFAC9241691210098E0BB /* NeumorphismButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA5AFAC8241691210098E0BB /* NeumorphismButton.swift */; }; DA5AFACD2418332A0098E0BB /* ShapeType.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA5AFACC2418332A0098E0BB /* ShapeType.swift */; }; @@ -64,6 +65,7 @@ /* Begin PBXFileReference section */ AA5875A225263BD40015AF11 /* NeumorphismContent.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = NeumorphismContent.swift; sourceTree = ""; }; + AAD714E82C6F8D7600D78AE6 /* NeumophismButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumophismButtonStyle.swift; sourceTree = ""; }; DA14F56E2458DEFF008BCD97 /* NeumorphismConcaveModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumorphismConcaveModifier.swift; sourceTree = ""; }; DA1A6B5F240B76D9001EA5EB /* .gitignore */ = {isa = PBXFileReference; lastKnownFileType = text; path = .gitignore; sourceTree = ""; }; DA5AFAC8241691210098E0BB /* NeumorphismButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumorphismButton.swift; sourceTree = ""; }; @@ -206,6 +208,7 @@ DA5AFACE241833430098E0BB /* AnyShape.swift */, DA5AFACC2418332A0098E0BB /* ShapeType.swift */, AA5875A225263BD40015AF11 /* NeumorphismContent.swift */, + AAD714E82C6F8D7600D78AE6 /* NeumophismButtonStyle.swift */, DA987319240BDE580083EB5E /* CustomViews */, OBJ_10 /* Extensions */, DA5AFAD0241834A70098E0BB /* Modifier */, @@ -304,6 +307,7 @@ OBJ_31 /* ColorExtension.swift in Sources */, DA98731B240BDE7D0083EB5E /* HighlightableButton.swift in Sources */, DA90AF682412D0EE00E759A9 /* NeumorphismManagerMock.swift in Sources */, + AAD714E92C6F8D7600D78AE6 /* NeumophismButtonStyle.swift in Sources */, DA954C782411D9740052B8FF /* NeumorphismManager.swift in Sources */, DA5AFAC9241691210098E0BB /* NeumorphismButton.swift in Sources */, DAD9549B241BCFBE00D3F56E /* NeumorphismBindingButton.swift in Sources */, diff --git a/Sources/NeumophismButtonStyle.swift b/Sources/NeumophismButtonStyle.swift new file mode 100644 index 0000000..0eeb4b6 --- /dev/null +++ b/Sources/NeumophismButtonStyle.swift @@ -0,0 +1,41 @@ +// +// NeumophismButtonStyle.swift +// NeumorphismUI +// +// Created by Ryo Tsuzukihashi on 2024/08/16. +// + +import SwiftUI + +@available(iOS 13.0, *) +@available(macOS 12.0, *) +public struct NeumophismButtonStyle: ButtonStyle { + @EnvironmentObject var neumorphism: NeumorphismManager + + private var shapeType: ShapeType + + init(shapeType: ShapeType) { + self.shapeType = shapeType + } + + public func makeBody(configuration: Configuration) -> some View { + configuration.label + .background( + Rectangle() + .clipShape(shapeType.anyShape) + .foregroundColor(neumorphism.color) + .modifier( + configuration.isPressed + ? NeumorphismShadowModifier(baseColor: neumorphism.color, radius: 8, isAnimation: configuration.isPressed) + : NeumorphismShadowModifier(baseColor: neumorphism.color, radius: 8, isAnimation: configuration.isPressed) + ) + ) + .animation(.spring(response: 0.2, dampingFraction: 0.9), value: configuration.isPressed) + } +} + +public extension ButtonStyle where Self == NeumophismButtonStyle { + static func neumophismButton(shapeType: ShapeType) -> Self { + .init(shapeType: shapeType) + } +}