FloatingLabelTextFieldSwiftUI
FloatingLabelTextFieldSwiftUI 是一个完全用 SwiftUI 编写的（不使用 UIViewRepresentable）小型且轻量级的 SwiftUI 框架，允许创建美观且可定制的浮动标签文本字段！此库支持 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 和颜色
您可以使用 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)
}
}浮动标签文本字段样式
只需两个步骤即可创建和添加样式到浮动标签文本字段。
- 创建您自己的主题样式。根据自己的主题设置属性。
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.
}
}- 将样式添加到浮动标签文本字段。
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)
}
}
}左右视图
是的，您可以将自己的视图、按钮或图片轻松添加到浮动标签文本字段的左侧或右侧视图。
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 还有一些内置的验证正则表达式检查字段，如电子邮件、密码、姓名、数字等。
以下是一些例子
- 电子邮件验证
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")
}
}
}
}- 姓名验证
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。
💾 安装
CocoaPods
FloatingLabelTextFieldSwiftUI 可通过 CocoaPods 获得。要安装它，只需将以下行添加到您的 Podfile 中：
pod 'FloatingLabelTextFieldSwiftUI'Swift 包管理器
Swift 包管理器是一个用于管理 Swift 代码分发的工具。它与 Swift 编译系统集成，以自动化下载、编译和链接依赖项的过程。
要使用 Xcode 11+ 将 FloatingLabelTextFieldSwiftUI 集成到您的项目中，请按以下步骤操作：在 Xcode 中，选择 文件 > Swift 包 > 添加
https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI.git
手动操作
您可以从我们的发布页面下载最新文件。完成后，将 Source 文件夹中的文件复制到您的项目中。
🙋♂️ 作者
kishanraja, [email protected]
💰 贡献
您可以随意 Fork 项目并向我发送拉动请求！
📝 反馈
请提交一个问题。
📜 许可
FloatingLabelTextFieldSwiftUI 在 MIT 许可下可用。有关更多信息，请参阅 LICENSE 文件。