FloatingLabelTextFieldSwiftUI 是一个小型轻量级的 SwiftUI 框架，完全使用 SwiftUI 编写（未使用 UIViewRepresentable），允许创建美观且可定制的浮动标签文本框！该库支持 RTL 文本（例如阿拉伯语），并且可以轻松地向文本框添加左视图和右视图，并且可自定义。
如果您喜欢这个项目，请不要忘记给这个仓库 star ★ 并且在 GitHub 上关注我。
- iOS 13.0+
- Xcode 11.2+
- Swift 5.0
要开始使用该组件，请使用 CocoaPods 或 Swift Package 将其添加到您的项目中。 首先导入 FloatingLabelTextFieldSwiftUI
import FloatingLabelTextFieldSwiftUI
struct ContentView: View {
@State private var firstName: String = ""
var body: some View {
FloatingLabelTextField($firstName, placeholder: "First Name", editingChanged: { (isChanged) in
}) {
}.frame(height: 70)
}
}
您可以使用 FloatingLabelTextFieldStyle 属性自定义文本框的颜色，或者创建自己的样式并设置一些属性。
struct ContentView: View {
@State private var firstName: String = ""
var body: some View {
FloatingLabelTextField($firstName, placeholder: "First Name", editingChanged: { (isChanged) in
}) {
}
.titleColor(.green)
.selectedLineColor(.blue)
.selectedTextColor(.blue)
.selectedTitleColor(.blue)
.frame(height: 70)
}
}
只需两个步骤即可创建样式并将其添加到 FloatingLabelTextField。
- 创建您自己的主题样式。 根据您的主题设置属性。
struct ThemeTextFieldStyle: FloatingLabelTextFieldStyle {
func body(content: FloatingLabelTextField) -> FloatingLabelTextField {
content
.spaceBetweenTitleText(15) // Sets the space between title and text.
.textAlignment(.leading) // Sets the alignment for text.
.lineHeight(1) // Sets the line height.
.selectedLineHeight(1.5) // Sets the selected line height.
.lineColor(.gray) // Sets the line color.
.selectedLineColor(.blue) // Sets the selected line color.
.titleColor(.gray) // Sets the title color.
.selectedTitleColor(.blue) // Sets the selected title color.
.titleFont(.system(size: 12)) // Sets the title font.
.textColor(.black) // Sets the text color.
.selectedTextColor(.blue) // Sets the selected text color.
.textFont(.system(size: 15)) // Sets the text font.
.placeholderColor(.gray) // Sets the placeholder color.
.placeholderFont(.system(size: 15)) // Sets the placeholder font.
.errorColor(.red) // Sets the error color.
.addDisableEditingAction([.paste]) // Disable text field editing action. Like cut, copy, past, all etc.
.enablePlaceholderOnFocus(true) // Enable the placeholder label when the textfield is focused.
.allowsHitTesting(true) // Whether this view participates in hit test operations.
.disabled(false) // Whether users can interact with this.
}
}
- 将样式添加到 FloatingLabelTextField。
struct ContentView: View {
@State private var firstName: String = ""
var body: some View {
FloatingLabelTextField($firstName, placeholder: "First Name", editingChanged: { (isChanged) in
}) {
}
.floatingStyle(ThemeTextFieldStyle())
.frame(height: 70)
}
}
要启用安全文本输入，请使用 .isSecureTextEntry(true) 属性。
struct ContentView: View {
@State private var password: String = ""
var body: some View {
HStack(spacing: 20) {
FloatingLabelTextField($password, placeholder: "Password", editingChanged: { (isChanged) in
}) {
}
.isSecureTextEntry(true)
.frame(height: 70)
}
}
}
是的，您可以轻松地将您自己的视图、按钮或图像添加到 FloatingLabelTextField 的左视图或右视图。
struct ContentView: View {
@State private var password: String = ""
@State private var isPasswordShow: Bool = false
var body: some View {
FloatingLabelTextField($password, placeholder: "Password", editingChanged: { (isChanged) in
}) {
}
.isSecureTextEntry(!self.isPasswordShow)
.leftView({ // Add left view.
Image("password")
})
.rightView({ // Add right view.
Button(action: {
withAnimation {
self.isPasswordShow.toggle()
}
}) {
Image(self.isPasswordShow ? "eye_close" : "eye_show")
}
})
.frame(height: 70)
.padding()
}
}
FloatingLableTextFieldSwiftUI 支持显示错误并添加文本字段验证。 这对于在您的表单文本字段上添加验证非常有用。 要启用 isShowError 属性为 true，并将文本字段验证数组以及根据条件的相应消息传递到文本字段。 您还可以添加验证检查器变量，以在提交按钮操作时检查文本字段是否有效。
FloatingLabelTextFieldSwiftUI 还有一些内置的验证正则表达式检查字段，例如 email、password、name、number 等。
这里有一些例子
- Email 验证
struct ContentView: View {
@State private var email: String = ""
@State private var isValidEmail: Bool = false
var body: some View {
VStack {
FloatingLabelTextField($email, validtionChecker: $isValidEmail, placeholder: "Email", editingChanged: { (isChanged) in
}) {
}
.addValidation(.init(condition: email.isValid(.email), errorMessage: "Invalid Email")) /// Sets the validation condition.
.isShowError(true) /// Sets the is show error message.
.errorColor(.red) /// Sets the error color.
.keyboardType(.emailAddress)
.frame(height: 70)
.padding()
Button(action: {
self.endEditing(true)
if self.isValidEmail {
print("Valid Email")
} else {
print("Invalid Email")
}
}) {
Text("Create")
}
}
}
}
- Name 验证
struct ContentView: View {
@State private var lastName: String = ""
var body: some View {
FloatingLabelTextField($lastName, placeholder: "Last Name", editingChanged: { (isChanged) in
}) {
}
.isShowError(true) /// Sets the is show error message.
.addValidations([.init(condition: lastName.isValid(.alphabet), errorMessage: "Invalid Name"),
.init(condition: lastName.count >= 2, errorMessage: "Minimum two character long")
]) /// Sets the validation conditions.
.floatingStyle(ThemeTextFieldStyle2())
.frame(height: 70)
}
}
要运行示例项目，请克隆存储库，然后首先从 Example 目录运行 pod install。
FloatingLabelTextFieldSwiftUI 可通过 CocoaPods 获得。 要安装它，只需将以下行添加到您的 Podfile 中
pod 'FloatingLabelTextFieldSwiftUI'
Swift Package Manager 是一个用于管理 Swift 代码分发的工具。 它与 Swift 构建系统集成，可以自动执行下载、编译和链接依赖项的过程。
要使用 Xcode 11+ 将 FloatingLabelTextFieldSwiftUI 集成到您的 Xcode 项目中，请在 File > Swift Packages > Add 中指定它
https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI.git
您可以从我们的 Releases 页面 下载最新文件。 这样做之后，将 Sources 文件夹中的文件复制到您的项目中。
kishanraja, rajakishanrk1996@gmail.com
欢迎 fork 该项目并向我发送 pull-request！
请提交 Issue。
FloatingLabelTextFieldSwiftUI 在 MIT 许可下可用。 有关更多信息，请参见 LICENSE 文件。