Created
September 16, 2019 17:45
-
-
Save programmingwithswift/1d4e580797c30d2a524b7d864ff8c70c to your computer and use it in GitHub Desktop.
Custom ViewModifier in SwiftUI - https://programmingwithswift.com/viewmodifier-in-swiftui/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct GreenButtonStyle: ViewModifier { | |
func body(content: Content) -> some View { | |
return content | |
.foregroundColor(.white) | |
.background(Color.green) | |
.border(Color(red: 7/255, | |
green: 171/255, | |
blue: 67/255), | |
width: 5) | |
} | |
} | |
struct BlueButtonStyle: ViewModifier { | |
func body(content: Content) -> some View { | |
return content | |
.foregroundColor(.white) | |
.background(Color.blue) | |
.border(Color(red: 7/255, | |
green: 42/255, | |
blue: 171/255), | |
width: 5) | |
} | |
} | |
struct StyledButton: ViewModifier { | |
enum ButtonColor { | |
case green | |
case blue | |
func backgroundColor() -> Color { | |
switch self { | |
case .green: | |
return Color.green | |
case .blue: | |
return Color.blue | |
} | |
} | |
func borderColor() -> Color { | |
switch self { | |
case .green: | |
return Color(red: 7/255, | |
green: 171/255, | |
blue: 67/255) | |
case .blue: | |
return Color(red: 7/255, | |
green: 42/255, | |
blue: 171/255) | |
} | |
} | |
} | |
let buttonColor: ButtonColor | |
func body(content: Content) -> some View { | |
return content | |
.foregroundColor(.white) | |
.background(buttonColor.backgroundColor()) | |
.border(buttonColor.borderColor(), | |
width: 5) | |
} | |
} | |
struct Track: ViewModifier { | |
let eventName: String | |
func body(content: Content) -> some View { | |
return content.simultaneousGesture(TapGesture().onEnded({ | |
print(self.eventName) | |
})) | |
} | |
} | |
struct BorderChange: ViewModifier { | |
enum BorderColor: CaseIterable { | |
case black | |
case blue | |
case red | |
func color() -> Color { | |
switch self { | |
case .black: | |
return .black | |
case .blue: | |
return .blue | |
case .red: | |
return .red | |
} | |
} | |
func next() -> BorderColor { | |
// 1 | |
let allColors = BorderColor.allCases | |
// 2 | |
if let lastIndex = allColors.lastIndex(of: self) { | |
// 3 | |
if lastIndex + 1 == allColors.count { | |
return allColors[0] | |
} | |
// 4 | |
return allColors[lastIndex + 1] | |
} | |
// 5 | |
return self | |
} | |
} | |
@State var currentState = BorderColor.black | |
func body(content: Content) -> some View { | |
return content.border(self.currentState.color(), | |
width: 5).simultaneousGesture(TapGesture().onEnded({ | |
self.currentState = self.currentState.next() | |
})) | |
} | |
} | |
struct ContentView: View { | |
var body: some View { | |
Button(action: { | |
print("Button Pressed") | |
}, label: { | |
Text("Button").padding() | |
}) | |
.modifier(BorderChange()) | |
} | |
} | |
struct ContentView_Previews: PreviewProvider { | |
static var previews: some View { | |
ContentView() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment