SkyFloatingLabelTextField

SkyFloatingLabelTextField 是一个美观、灵活且可定制的空间节省型 “浮标标签模式” 实现。该设计允许在输入时显示上下文，同时最大限度地减少显示此额外上下文所需的空间。该组件在 Skyscanner TravelPro iOS 应用的多个地方使用，例如在搜索航班时。

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

版本

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

使用说明

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

可以通过SkyFloatingLabelTextField类使用UI组件。要在右侧使用图标，请使用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 属性中设置的颜色高亮显示。

要通知文本框发生的不同事件（如文本更改、编辑开始或结束），只需设置 func addTarget(_:target:action:for:controlEvents:) 为 UIControl.Event.editingChanged。还可以设置 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，因此可以重用那里的标准覆盖。以下是一些其他可以重写的显著自定义钩子

updateColors：覆盖此方法，以便在控件状态更改时自定义颜色
布局覆盖
- titleLabelRectForBounds(bounds:editing:)：覆盖以更改顶部标题占位视图的边界
- textRectForBounds(bounds:)：覆盖以更改控件（从 UITextField 继承）的边界
- editingRectForBounds.bounds: 覆盖以更改编辑/选择时的控件边界（从 UITextField 继承）
- placeholderRectForBounds(bounds:)：覆盖以更改占位视图的边界
- lineViewRectForBounds(bounds:CGRect, editing:Bool): 用于修改底部行视图边界的覆写方法

文档

请参考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，并将其复制到App的“框架”目录。

手册

您可以从我们的发布页面下载最新文件。下载后，将源代码文件夹中的文件复制到您的项目。

贡献

我们欢迎所有贡献。在提交问题或发送拉取请求之前，请阅读此指南，并了解如何以及如何联系提问。

信用评价

原始组件由Daniel Langh、Gergely Orosz和Raimon Laupente构建。Shai Shamir（支持RTL语言）做出了显著的贡献。

原始设计和改进图标设计的荣誉归功于Matt D. Smith (@mds)。

常见问题解答

我可以在Objective-C项目中使用它吗？

当然可以！请参阅集成到Objective-C项目部分了解如何通过CocoaPods集成组件。
控件是否与自动布局配合得很好？程序化使用怎么样？

控件旨在支持这两种用例。它与自动布局配合得很好。作为子类UITextField，覆盖 Always an optiontextRectForBounds(bounds:)或editingRectForBounds(bounds:)。或者，另一种可能性是覆盖intrinsiccontentsize。
如何从文本框底部删除线？

将lineHeight和selectedLineHeight设置为0，线就不会显示。
我想使用errorMessage验证文本框。如何重新验证文本框中输入的文本？

使用代理实现textField(textField:,range:string:)方法。每当文本更改时都会触发此方法 - 在此处进行验证。或者，使用子类化也可以覆盖becomeFirstResponder方法，例如，当文本框被选中时清除文本或错误消息。

SkyFloatingLabelTextField 4.0.0

SkyFloatingLabelTextField 4.0.0

SkyFloatingLabelTextField 4.0.0

SkyFloatingLabelTextField

版本

使用说明

颜色

图标和字体

使用字体

使用图像

错误状态和委托

禁用状态

RTL语言支持

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

文档

安装

CocoaPods

在Objective-C项目中集成

Carthage

手册

贡献

信用评价

常见问题解答