SwiftUI Color Picker Example with SheetyColors
// Created by Wendt, Christoph on 14.03.20. | |
// Copyright © 2020 Wendt, Christoph. All rights reserved. | |
import SwiftUI | |
import SheetyColors | |
struct ColorPickerOverlay: View { | |
@State private var pickerColor: UIColor = UIColor.white | |
@Binding var isShown: Bool | |
@Binding var selectedColor: UIColor | |
var currentColor: UIColor | |
let isTextColor: Bool | |
var body: some View { | |
GeometryReader { geometry in | |
VStack(alignment: .center, spacing: 8) { | |
/// Area above the picker. See Spacer extension at the bottom of the file. | |
Spacer() | |
.onTapGesture { | |
self.dismissButtonPressed() | |
} | |
/// Headline, color picker, and action buttons. | |
VStack(alignment: .center, spacing: 0) { | |
Text("Headline") | |
.font(Font.caption) | |
.foregroundColor(Color.gray) | |
ColorPicker(config: SheetyColorsConfig(alphaEnabled: self.isTextColor, hapticFeedbackEnabled: true, initialColor: self.currentColor, title: nil, message: nil, type: .rgb), color: self.$pickerColor) | |
.frame(height: self.pickerHeight) | |
Divider() | |
Button(action: { | |
self.selectButtonPressed() | |
}, label: { | |
HStack { | |
Spacer() | |
Text("Select Color") | |
.font(Font.system(size: 20.0)) | |
Spacer() | |
} | |
}) | |
.buttonStyle(ColorPickerButtonStyle()) | |
} | |
.padding(.top) | |
.background(Color.white) | |
.cornerRadius(13) | |
Button(action: { | |
self.dismissButtonPressed() | |
}, label: { | |
HStack { | |
Spacer() | |
Text("Cancel") | |
.font(Font.system(size: 20.0).bold()) | |
Spacer() | |
} | |
}) | |
.buttonStyle(ColorPickerButtonStyle()) | |
.cornerRadius(13) | |
} | |
.padding(8) | |
.frame(height: self.overlayHeight(for: geometry)) | |
.offset(x: 0, y: self.isShown ? 0 : self.overlayHeight(for: geometry)) | |
.background(self.isShown ? Color.black.opacity(0.2) : nil) | |
.animation(.default) | |
} | |
} | |
private func overlayHeight(for geometry: GeometryProxy) -> CGFloat { | |
return UIScreen.main.bounds.height - geometry.safeAreaInsets.top | |
} | |
private var pickerHeight: CGFloat { | |
return isTextColor ? 330.0 : 280.0 | |
} | |
private func selectButtonPressed() { | |
selectedColor = pickerColor | |
isShown = false | |
} | |
private func dismissButtonPressed() { | |
isShown = false | |
} | |
} | |
struct ColorPickerButtonStyle: ButtonStyle { | |
func makeBody(configuration: Self.Configuration) -> some View { | |
configuration.label | |
.foregroundColor(.blue) | |
.padding() | |
.background(configuration.isPressed ? Color.buttonPressedBackground : Color.white) | |
.animation(.none) | |
} | |
} | |
extension Spacer { | |
/// https://stackoverflow.com/a/57416760/3393964 | |
public func onTapGesture(count: Int = 1, perform action: @escaping () -> Void) -> some View { | |
ZStack { | |
Color.black.opacity(0.001).onTapGesture(count: count, perform: action) | |
self | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.