Fix shift in position of Label when focused in TextField and SecureField

maxakash · Mar 22, 2020 · f552923 · f552923
1 parent f504a51
commit f552923
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 41 deletions.
diff --git a/Sources/FloatingLabelTextField/FloatingLabelSecureField.swift b/Sources/FloatingLabelTextField/FloatingLabelSecureField.swift
@@ -31,38 +31,42 @@ public struct FloatingLabelSecureField: View {
     }
 
     public var body: some View {
-        let lineHeight: CGFloat = self.isActive ? 2 : 1
-        let lineColor = self.isActive ? Color.blue : Color.gray
-
-        return VStack(alignment: .leading) {
-            Text(placeHolderLabel).font(.footnote).foregroundColor(.gray)
-
-
-            //is TextField is secure , using SecureField . Button is used as there is no onEditingChanged funtion for SecureField yet in SwiftUI
-            Button(action: {
-                self.updateEditMode(edit: true)
-            }) {
-                SecureField(placeHolder, text: $text)
-                    .foregroundColor(Color("textColor"))
-
-                    .onAppear {
-                        self.placeHolder = self.placeHolderValue
-                }
-            }
-            .font(Font.custom("poppins", size: 20))
-            .onAppear {
-                self.placeHolder = self.placeHolderValue
+
+       return ZStack(alignment: .leading) {
+
+
+        Button(action: {
+            self.updateEditMode(edit: true)
+        }) {
+            SecureField(placeHolder, text: $text)
+                .font(.system(size: 20))
+                .padding()
+                .overlay( RoundedRectangle(cornerRadius: 8)
+                    .stroke(Color.gray, lineWidth: 1)
+                    .frame(height: 55))
+                .foregroundColor(Color.black)
+                .accentColor(.gray)
+                .onAppear {
+                    self.placeHolder = self.placeHolderValue
             }
-
-            Rectangle()
-                .fill(lineColor)
-                .frame(minHeight: lineHeight, idealHeight: lineHeight, maxHeight: lineHeight, alignment: .center)
-
         }
-        .padding(.horizontal,20)
-        .padding(.vertical, 15)
+
+
+
+           Text("\(placeHolderLabel)")
+                .font(.system(size: 15))
+               .foregroundColor(.gray)
+               .animation(.interactiveSpring())
+               .background(Color.white)
+               .padding(EdgeInsets(top: 0, leading:16, bottom: 55
+                   , trailing: 0))
+
+       }
     }
-
 }
 
 
+
+
+
+
diff --git a/Sources/FloatingLabelTextField/FloatingLabelTextField.swift b/Sources/FloatingLabelTextField/FloatingLabelTextField.swift
@@ -30,30 +30,36 @@ public struct FloatingLabelTextField: View {
     }
 
     public var body: some View {
-        let lineHeight: CGFloat = self.isActive ? 2 : 1
-        let lineColor = self.isActive ? Color.blue : Color.gray
 
-        return VStack(alignment: .leading) {
-            Text(placeHolderLabel).font(.footnote).foregroundColor(.gray)
+        return ZStack(alignment: .leading) {
+
 
             TextField(placeHolder, text: $text, onEditingChanged: { (edit) in
                 self.updateEditMode(edit: edit)
             })
-                .font(Font.custom("poppins", size: 20))
+                .font(.system(size: 20))
+                .padding()
+                .overlay( RoundedRectangle(cornerRadius: 8)
+                    .stroke(Color.gray, lineWidth: 1)
+                    .frame(height: 55))
+                .foregroundColor(Color.black)
+                .accentColor(.gray)
                 .onAppear {
                     self.placeHolder = self.placeHolderValue
 
             }
 
-
-
-            Rectangle()
-                .fill(lineColor)
-                .frame(minHeight: lineHeight, idealHeight: lineHeight, maxHeight: lineHeight, alignment: .center)
+            Text("\(placeHolderLabel)")
+                .font(.system(size: 15))
+                .foregroundColor(.gray)
+                .animation(.interactiveSpring())
+                .background(Color.white)
+                .padding(EdgeInsets(top: 0, leading:16, bottom: 55
+                    , trailing: 0))
 
         }
-        .padding(.horizontal,20)
-        .padding(.vertical, 15)
+
+
     }
 
 }