CODEWITHSUNDEEP
xcodeswiftuiswift-extensionsswiftui-texteditor
Filip Jurković
Filip Jurković

Reputation: 39

SwiftUI Text Editor with a floating label

I am trying to style a Text Editor in SwiftUI to look like a Material Design element. Currently, I'm struggling with the floating label. I cannot figure out how to capture the editing state of Text Editor. This is the code of the app:

struct FloatingTextEditor: View {
let textFieldHeight: CGFloat = 168
private let placeHolderText: String
@Binding var text: String
@State private var isEditing = false
public init(placeHolder: String,
            text: Binding<String>) {
    self._text = text
    self.placeHolderText = placeHolder
}
var shouldPlaceHolderMove: Bool {
    isEditing || (text.count != 0)
}
var body: some View {
    ZStack(alignment: .topLeading) {
        TextEditor(text: $text)
            .onTapGesture {
            isEditing = true
        }
            .padding()
            .frame(height: textFieldHeight)
            .paragraph()
            .overlay(RoundedRectangle(cornerRadius: 4)
                        .stroke(Color.medium, lineWidth: 1))
            .animation(.linear)
        
        Text(placeHolderText)
        .foregroundColor(Color.medium)
            .background(Color(UIColor.systemBackground))
        .padding(shouldPlaceHolderMove ?
                 EdgeInsets(top: 0, leading:15, bottom: (textFieldHeight+30), trailing: 0) :
                 EdgeInsets(top: 0, leading:15, bottom: (textFieldHeight-10), trailing: 0))
            .scaleEffect(shouldPlaceHolderMove ? 1.0 : 0.8)
        .animation(.linear)
    }
}}

Essentially I need help with figuring out then the Text Editor is tapped out of.

This is the design of it for reference: Text Editor

Upvotes: 2

Views: 702

Answers (1)

Ian
Ian

Reputation: 45

Looks like you are already handling when it gets clicked originally, just failing to handle when it loses focus. You need to use something like onCommit as well as onTapGesture.

Upvotes: 0

Related Questions