动画卡片输入库 0.3.0

动画卡片输入库 0.3.0

×

由Kamil Szczepański维护。

动画卡片输入库 0.3.0

动画卡片输入库

GitHub license CocoaPods Swift 5.0

这个库允许您将两个易于定制的动画组件添加到项目中，这将使用户输入信用卡信息时的体验更加出色。

示例

要运行示例项目，首先克隆仓库，然后从Example目录运行pod install命令。

要求

动画卡片输入库是用Swift 5.0编写的，并支持iOS 11.0+。

安装

动画卡片输入库可通过CocoaPods获得。要安装它，只需将以下行添加到Podfile即可：

pod 'AnimatedCardInput'

使用说明

在此Pod中提供的组件既可单独使用，也可在同一屏幕上作为一对组合使用。

卡片视图

cardViewBothsides要在我们的屏幕上使用卡片视图，我们只需初始化视图并将其放置在我们的分层结构中。这将创建默认的信用卡视图，16位卡号分为4位一组的几个块，CVV号码限于3位数字。

/// cardNumberDigitsLimit: Indicates maximum length of card number. Defaults to 16.
/// cardNumberChunkLengths: Indicates format of card number,
///                         e.g. [4, 3] means that number of length 7 will be split
///                         into two parts of length 4 and 3 respectively (XXXX XXX).
/// CVVNumberDigitsLimit: Indicates maximum length of CVV number.
let cardView = CardView(
    cardNumberDigitsLimit: 16,
    cardNumberChunkLengths: [4, 4, 4, 4],
    CVVNumberDigitsLimit: 3
)
view.addSubview(cardView)
NSLayoutConstraint.activate([...])

我们可以几乎以任何方式自定义我们的卡片视图。从设计开始，字体和颜色都可以调整。以下是可以更改的所有可用属性列表。

  • isSecureInput - 启用CVV号码的掩码（默认为false）。
  • validatesDateInput - 在有效期日期字段上启用验证（默认为true）。
  • frontSideCardColor - 卡片前部的背景颜色（默认为#373737）。
  • frontSideTextColor - 卡片前部的文本颜色（默认为#FFFFFF）。
  • backSideCardColor - 卡片背部的背景颜色（默认为#373737）。
  • CVVBackgroundColor - 卡片CVV字段的背景颜色（默认为#FFFFFF）。
  • backSideTextColor - 卡片背部的文本颜色（默认为#000000）。
  • selectionIndicatorColor - 已选字段的边框颜色（默认为#ff8000）。
  • numberInputFont - 卡号字段的字体（默认为System SemiBold 24）。
  • nameLabelFont - 卡片持有人标签的字体（默认为System Light 14。建议字体大小为卡号字体的0.6倍）。
  • nameInputFont - 卡片持有人姓名字段的字体（默认为System Regular 14。建议字体大小为卡号字体的0.6倍）。
  • validityLabelFont - 有效期日期标签的字体（默认为System Light 14。建议字体大小为卡号字体的0.6倍）。
  • validityInputFont - 有效期日期字段的字体（默认为System Regular 14。建议字体大小为卡号字体的0.6倍）。
  • CVVInputFont - CVV号码字段的字体（默认为System SemiBold 20。建议字体大小为卡号字体的0.85倍）。
  • cardNumberSeparator - 使用的卡号分隔符（默认为" ")。
  • cardNumberEmptyCharacter - 使用的卡号空字符（默认为"X"）。
  • validityDateSeparator - 使用的有效期日期分隔符（默认为"/"）。
  • validityDateCustomPlaceHolder - 使用的有效期日期占位符文本（默认为"MM/YY"）。
  • CVVNumberEmptyCharacter - 使用的CVV号码空字符（默认为"X"）。
  • cardholderNameTitle - 用于卡片持有人姓名输入标题标签的自定义字符串。
  • cardholderNamePlaceholder - 用于卡片持有人姓名输入占位符的自定义字符串。
  • validityDateTitle - 用于有效期日期输入标题标签的自定义字符串。

卡输入视图

CardInputsViewCardholderName要在我们的屏幕上使用卡输入视图，我们只需初始化视图并将其放置在我们的层次结构中。这将创建一个默认的滚动视图，包含四个文本字段，卡号限制为16位。

let cardInputsView = CardInputsView(cardNumberDigitLimit: 16)
view.addSubview(cardInputsView)
NSLayoutConstraint.activate([...])

可以使用以下属性一次性自定义输入视图。

  • isSecureInput - 启用CVV号码的掩码（默认为false）。
  • validatesDateInput - 在有效期日期字段上启用验证（默认为true）。
  • inputTintColor - 文本字段的着色颜色（默认为 #000000）。
  • inputborderColor - 文本字段的边框颜色（默认为 #808080）。
  • titleColor - 标题标签中文本的颜色（默认为 #000000）。
  • titleFont - 标题标签中文本的字体（默认为 System Light 12）。
  • inputColor - 文本字段中文本的颜色（默认为 #000000）。
  • inputFont - 文本字段中文本的字体（默认为 System Regular 24）。
  • cardNumberTitle - 用于卡号输入标题标签的自定义字符串。
  • cardholderNameTitle - 用于卡片持有人姓名输入标题标签的自定义字符串。
  • validityDateTitle - 用于有效期日期输入标题标签的自定义字符串。
  • cvvNumberTitle - 用于CVV码输入标题标签的自定义字符串。

连接两个组件

如果我们希望用户直接在卡片上或通过选择文本字段输入数据，我们需要使用 creditCardDataDelegate 属性将两个组件配对。

cardView.creditCardDataDelegate = inputsView
cardInputsView.creditCardDataDelegate = cardView

从现在起，两个输入都将更新到相同的数据并按填充流程同步。

添加新卡提供商

如果您觉得这个库中提供的默认卡品牌不足，您可以添加自己的卡提供商，包括自定义名称、图标和用于正则表达式的识别模式（例如，一个起点为 92 或 95 的假 Cardinio 提供商）。

let newCardProvider = CardProvider(name: "Cardinio", image: #imageLiteral(resourceName: "cardinio_icon"), pattern: "9[2,5]")
CardProvider.addCardProviders(newCardProvider)

路线图

  • 标签本地化。
  • 添加新图标、自定义信用卡提供商。
  • 在输入上显示验证错误。
  • 更多...

关于

本项目使用下面技术制作❤️由 Netguru 制作并由 Kamil Szczepański 维护。

许可证

AnimatedCardInput 在 MIT 协议下可用。更多信息请参见 LICENSE 文件。