How could I add 'skyfloatLabelText' in my swift UI view? - swift

Question

I would like to use skyfloatingLabelText in swift UI. Their example show like below
let textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Name"
textField.title = "Your full name"
self.view.addSubview(textField)
I have no idea how I could implement the above code in my swift UI. Below are my swift UI.
import SwiftUI
import SkyFloatingLabelTextField
struct Login: View {
var body: some View {
VStack() {
HeaderBar()
Spacer()
HStack {
VStack {
Text("Login Page")
.fontWeight(.bold)
TextField("Name", text: Value) //default input is ok
Button(action: /*#START_MENU_TOKEN#*/{}/*#END_MENU_TOKEN#*/) {
Text("Login")
}
}
}
Spacer()
}
}
}
struct Login_Previews: PreviewProvider {
static var previews: some View {
Login()
}
}
Thanks in advance.

Answer 1

Like #Asperi mentioned, you need to be using UIViewRepresentable for this.
The delegate example is taken from the github example.
import SwiftUI
import SkyFloatingLabelTextField
struct SkyFloatingContentView: UIViewRepresentable {
class Coordinator: NSObject, UITextFieldDelegate {
var parent: SkyFloatingContentView
init(_ parent: SkyFloatingContentView) {
self.parent = parent
}
func textFieldDidChangeSelection(_ textField: UITextField) {
if let text = textField.text {
if let floatingLabelTextField = textField as? SkyFloatingLabelTextField {
if (text.count < 3 || !text.contains("#")) {
floatingLabelTextField.errorMessage = "Invalid email"
} else {
// The error message will only disappear when we reset it to nil or empty string
floatingLabelTextField.errorMessage = ""
}
}
}
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
func makeUIView(context: Context) -> SkyFloatingLabelTextField {
return SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
}
func updateUIView(_ textField: SkyFloatingLabelTextField, context: Context) {
textField.placeholder = "Name"
textField.title = "Your full name"
textField.delegate = context.coordinator
}
}
struct ContentView: View {
var body: some View {
VStack() {
Spacer()
HStack {
VStack {
Text("Login Page")
.fontWeight(.bold)
SkyFloatingContentView()
Button(action: /*#START_MENU_TOKEN#*/{}/*#END_MENU_TOKEN#*/) {
Text("Login")
}
}
}
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}