Floating text field in SwiftUI
SwiftUI has brought about a paradigm shift in UI development, allowing developers to create declarative and user-friendly interfaces effortlessly. When it comes to crafting forms or login screens, a floating text field can significantly improve the user experience by offering a clear and interactive input method. In this article, we will delve into a Swift implementation of a floating text field using SwiftUI.
Understanding the Code
Let's dissect the essential components of the provided Swift code.
enum TextFieldType {
case secureField
case textField
}
This enum defines two cases, secureField and textField, representing the types of text fields that can be created using this implementation.
struct SkyFloatingTextField: View {
// Properties
var placeholder: String
@Binding var text: String
var textFieldType: TextFieldType
@State private var isEditing = false
@State var isSecured: Bool = true
@FocusState var isSecureFieldFocused: Bool
@FocusState var isTextFieldFocused: Bool
@Environment(\.sizeCategory) var sizeCategory
// Computed Property
var shouldPlaceHolderMove: Bool {
isEditing || (text.count != 0)
}
// Body
var body: some View {
// Main VStack
VStack {
// Inner VStack for text field
VStack(alignment: .leading, spacing: 4) {
// HStack for text field and toggle button
HStack(spacing: 15) {
// Depending on the field type, render either SecureField or TextField
Group {
if isSecured {
// SecureField
SecureField("", text: $text, onCommit: {
withAnimation(.easeIn) {
isEditing = false
}
})
.focused($isSecureFieldFocused)
// Additional styling for SecureField
} else {
// TextField
TextField("", text: $text, onEditingChanged: { isEdit in
withAnimation(.easeIn) {
isEditing = isEdit
}
})
.accentColor(AppColors.textColor)
.font(.poppinsRegular(size: 16, category: sizeCategory))
.focused($isTextFieldFocused)
// Additional styling for TextField
}
}
.padding(.top, 12)
// Toggle button for secure field visibility
.overlay(alignment: .trailing) {
if textFieldType == .secureField {
Button {
isSecured.toggle()
} label: {
Image(systemName: isSecured ? "eye.slash" : "eye")
.foregroundColor(AppColors.textColor)
.frame(width: 15, height: 15)
.padding(13)
}
}
}
}
// Placeholder text animation
.background(
Text(placeholder)
.offset(y: shouldPlaceHolderMove ? -12 : 0)
.foregroundStyle(AppColors.textColor)
.font(.poppinsRegular(size: shouldPlaceHolderMove ? 11 : 15, category: sizeCategory))
, alignment: .leading
)
}
// Styling for the text field container
.frame(height: 50)
.padding(.horizontal, 8)
.background(
RoundedRectangle(cornerRadius: 8)
.stroke(AppColors.textColor, style: StrokeStyle(lineWidth: 0.5))
)
// Tap gesture to toggle focus on appearance
.onTapGesture {
withAnimation(.linear(duration: 8.0)) {
isSecureFieldFocused.toggle()
isTextFieldFocused.toggle()
}
}
// Set initial state for SecureField
.onAppear(perform: {
isSecured = textFieldType == .secureField
})
}
}
}
Deeper Dive into Key Features
Focus State and Dynamic Interaction
The use of @FocusState allows for dynamic management of focus states, ensuring a seamless transition between text fields and a responsive user interface. Tapping the text field triggers a focus state toggle, accompanied by a smooth animation.
Adaptive Font Sizing with SizeCategory
The @Enviroment(\.SizeCategory) property facilitates dynamic font sizing based on the user's preferred content size. This adaptability ensures optimal readability and accessibility across different device configurations.
SecureField and Eye Icon Toggle
The implementation incorporates a secure text field (SecureField) for password input, complete with an eye icon toggle button. This button dynamically switches between obscured and readable text, offering users control over password visibility.
Placeholder Animation
The shouldPlaceHolderMove computed property orchestrates an elegant animation that adjusts the position and size of the placeholder text. This subtle touch enhances the user experience by providing visual cues about the active state of the text field.
Rounded Aesthetics with RoundedRectangle
The use of RoundedRectangle provides a visually appealing border around the text field, contributing to a polished and modern design. The stroke style further refines the appearance, adding a delicate outline to the text input area.
Tap Gesture Interaction
A tap gesture is employed to toggle focus states on appearance, creating a user-friendly interaction that seamlessly integrates with the overall design. The duration of the animation is carefully calibrated to ensure a delightful and engaging experience.
Implementing the Floating TextField
To integrate this floating text field into your SwiftUI project, follow these steps.
- Copy the
SkyFloatingTextField struct and the TextFieldType enum into your SwiftUI project.
- Create an instance of
SkyFloatingTextField within your view, providing the necessary parameters like placeholder, text, and textFieldType.
- Customize the appearance and behavior by adjusting the styling and animations within the
SkyFloatingTextField struct.
- Utilize the preview code as a visual reference to tailor the floating text field to your application's aesthetics.
By incorporating this Swift implementation of a floating text field, you can elevate the overall look and feel of your SwiftUI app. Tailor the design and behavior to align with your specific requirements, delivering a seamless and visually pleasing user experience.
Conclusion
This comprehensive guide provides a thorough exploration of the Swift implementation for a floating text field in SwiftUI. Embrace the provided code, experiment with customization options, and empower your users with an enhanced and interactive text input experience.