SkyFloatingLabelTextField

Build Status Coverage Status Pod Platform Pod License

Pod Version Carthage compatible Documentation Readme Score

SkyFloatingLabelTextField 是一个美观、灵活且可定制的 "Float Label Pattern" (浮动标签模式) 实现。这种设计能够在输入时添加上下文到输入框，同时最大限度地减少显示此额外上下文所占用的空间。该组件在 Skyscanner TravelPro iOS 应用 的多个地方使用，例如在 搜索航班 时。

除了实现节省空间的浮动标题外，该组件还支持使用图标、RTL文本支持（例如阿拉伯语和希伯来语）、各种状态（错误、选中、高亮状态），并且非常可定制和可扩展。

版本说明

直到 1.2 版本，兼容 Swift 2.2 和 2.3（如果您需要，还有一个 Swift 2.3 分支）。从 2.0 版本开始，仅兼容 Swift 3。请注意您使用的版本。

使用方法

要开始使用该组件，请按照 安装 部分的说明，使用 CocoaPods、Carthage 或手动方式将其添加到您的项目中。

UI 组件可以通过 SkyFloatingLabelTextField 类使用。要在右侧使用图标，请使用 SkyFloatingLabelTextFieldWithIcon 类。该控件的使用方法与 UITextField 非常相似 - 可以从 Interface Builder 使用，也可以从代码中使用。

要创建该类的实例，请使用 Interface builder，或从代码中创建。以下示例将创建一个带有占位符和标题的文本框：

let textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Name"
textField.title = "Your full name"
self.view.addSubview(textField)

颜色

要自定义文本框的颜色，请设置一些属性 - 可以从代码中设置，也可以从 Interface builder 中设置。要使用带有图标的文本框，请使用 SkyFloatingLabelTextFieldWithIcon 类（并将字体类与您的应用程序捆绑在一起）。以下示例将更改右侧文本框的颜色：

let lightGreyColor = UIColor(red: 197/255, green: 205/255, blue: 205/255, alpha: 1.0)
let darkGreyColor = UIColor(red: 52/255, green: 42/255, blue: 61/255, alpha: 1.0)
let overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)

let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))
textField1.placeholder = "First name"
textField1.title = "Given name"
self.view.addSubview(textField1)

let textField2 = SkyFloatingLabelTextField(frame: CGRect(x: 150, y: 10, width: 120, height: 45))
textField2.placeholder = "Last name"
textField2.title = "Family name"

textField2.tintColor = overcastBlueColor // the color of the blinking cursor
textField2.textColor = darkGreyColor
textField2.lineColor = lightGreyColor
textField2.selectedTitleColor = overcastBlueColor
textField2.selectedLineColor = overcastBlueColor

textField2.lineHeight = 1.0 // bottom line height in points
textField2.selectedLineHeight = 2.0
self.view.addSubview(textField2)

图标和字体

使用 SkyFloatingLabelTextFieldWithIcon 字段在文本框旁边显示图标。您可以选择使用字体或图像作为图标，通过设置 iconType 属性（默认 = IconType.font）。如果使用图像作为图标，则需要设置 iconImage 属性。如果使用字体作为图标，则需要设置 iconFont 属性并将您的图标与您的应用程序捆绑在一起（如果它不是内置的）。图标可以旋转，并且还支持更精确的定位。

使用字体

let overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)
let textFieldFrame = CGRect(x: 150, y: 10, width: 120, height: 45)

let textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame, iconType: .font)
textField1.placeholder = "Departure"
textField1.title = "Flying from"
textField1.iconFont = UIFont(name: "FontAwesome", size: 15)
textField1.iconText = "\u{f072}" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/
self.view.addSubview(textField1)

let textField2 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame)
textField2.placeholder = "Arrival"
textField2.title = "Flying to"
textField2.tintColor = overcastBlueColor
textField2.selectedTitleColor = overcastBlueColor
textField2.selectedLineColor = overcastBlueColor

// Set icon properties
textField2.iconType = .font
textField2.iconColor = UIColor.lightGrayColor()
textField2.selectedIconColor = overcastBlueColor
textField2.iconFont = UIFont(name: "FontAwesome", size: 15)
textField2.iconText = "\u{f072}" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/
textField2.iconMarginBottom = 4.0 // more precise icon positioning. Usually needed to tweak on a per font basis.
textField2.iconRotationDegrees = 90 // rotate it 90 degrees
textField2.iconMarginLeft = 2.0
self.view.addSubview(textField2)

使用图像

let textFieldframe = CGRect(x: 150, y: 10, width: 120, height: 45)

let textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldframe, iconType: .image)
textField1.placeholder = "Departure"
textField1.title = "Flying from"
textField1.iconImage = UIImage(imageLiteralResourceName: "PlaneIcon")
self.view.addSubview(textField1)

错误状态和代理

文本框支持显示错误状态 - 例如，这对于在运行时验证字段非常有用。当在控件上设置 errorMessage 属性时，控件将以 errorColor 属性中设置的颜色突出显示。

要获取文本框上发生的不同事件的通知 - 例如文本更改、编辑开始或结束 - 只需使用 .editingChanged 设置 func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event)。 也可以将 delegate 属性设置为实现标准 UITextFieldDelegate 协议的类。

class MyViewController: UIViewController, UITextFieldDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))
        textField1.placeholder = "Email"
        textField1.title = "Email address"
        textField1.errorColor = UIColor.redColor()
        textField1.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
        self.view.addSubview(textField1)
    }
    
    // This will notify us when something has changed on the textfield
    @objc func textFieldDidChange(_ textfield: UITextField) {
        if let text = textfield.text {
            if let floatingLabelTextField = textField as? SkyFloatingLabelTextField {
                if(text.characters.count < 3 || !text.containsString("@")) {
                    floatingLabelTextField.errorMessage = "Invalid email"
                }
                else {
                    // The error message will only disappear when we reset it to nil or empty string
                    floatingLabelTextField.errorMessage = ""
                }
            }
        }
    }
}

禁用状态

文本框还支持显示禁用状态。当在控件上设置 isEnabled 属性时，控件将以 disabledColor 属性中设置的颜色突出显示。

    textField.disabledColor = disabledColor
    textField.isEnabled = false

RTL 语言支持

该组件会自动检测语言书写方向。当手机设置了 RTL 语言（例如阿拉伯语或希伯来语）时，它会自动调整以支持这种风格。

或者，设置 isLTRLanguage 属性以手动更改书写方向。

通过子类化进一步自定义控件

该控件的设计允许在子类中进行进一步的自定义。该控件本身继承自 UITextField，因此可以全部使用那里的标准重写。其他一些值得注意的自定义挂钩通过覆盖是：

文档

请参阅 SkyFloatingLabelTextField 文档，网址为 CocoaDocs.org，以获取完整文档。

安装

CocoaPods

该控件可通过 CocoaPods 获得。可以使用 Ruby gems 安装 CocoaPods。

$ gem install cocoapods

然后只需将 SkyFloatingLabelTextField 添加到您的 Podfile 中

pod 'SkyFloatingLabelTextField', '~> 3.0'

最后，让 CocoaPods 通过运行以下命令获取该组件的最新版本

$ pod update
集成到 Objective C 项目

将组件集成到 Objective C 项目时，在 Podfile 中添加 use_frameworks!。 例如，如 SkyFloatingLabelTextFieldObjectiveCExample 中所示

use_frameworks!

target 'SkyFloatingLabelTextFieldObjectiveCExample' do
  pod 'SkyFloatingLabelTextField', '~> 3.0'
end

然后在您的代码中使用该组件，将以下行添加到您的 .h 或 .m 文件中

@import SkyFloatingLabelTextField;

Carthage

该组件支持 Carthage。 首先，请确保您已安装最新版本的 Carthage。 使用 Homebrew 运行此命令

$ brew update
$ brew install carthage

然后将 SkyFloatingLabelTextField 添加到您的 Cartfile 中

github "Skyscanner/SkyFloatingLabelTextField"

最后，将框架添加到您的 App 的 Xcode 项目中。 将框架链接到您的 App 并通过“Build Phases”部分将其复制到 App 的 Frameworks 目录。

手动

您可以从我们的 Releases 页面 下载最新文件。 完成后，将 Sources 文件夹中的文件复制到您的项目中。

贡献

我们欢迎所有贡献。 在打开问题或提交拉取请求之前，请阅读 本指南，以及如何以及与谁联系以解决问题。

鸣谢

原始组件由 Daniel Langh、Gergely Orosz 和 Raimon Laupente 构建。 Shai Shamir (RTL 语言支持) 的重要贡献。

感谢 Matt D. Smith (@mds) 提供了原始设计并使用图标对其进行了改进。

常见问题解答