手机号码掩码
关于
在某些情况下,在注册过程中,无法通过社交网络如电子钱包、银行账户等完成设计。在这种情况下,通常,为便于使用,应用程序为电话号码开发了一种具有预选国家代码和方便的数字输入格式的特定表单。但存在用户也必须能够通过电子邮件进行注册的情况。为了这样的例子,我们设计了唯一的当用户开始输入数字时出现的 手机号码掩码。在 Dribble上设计
👍 项目,不要忘记⭐️ 我
关注最新更新 关注我🤙
如果你
需求
- iOS 12.2+
- Xcode 11+
- Swift 5.0+
示例
首先克隆仓库,并在根目录下运行carthage update
。示例应用程序是查看EKFieldMask
如何工作的最佳方式。只需打开EKFieldMask.xcodeproj
并运行Example
方案即可。
安装
CocoaPods
可以通过CocoaPods安装EKLayout。要安装,只需将以下行添加到您的Podfile
pod 'EKFieldMask'
Carthage
Carthage是一个去中心化的依赖管理器,它构建了您的依赖并提供二进制框架。
要使用Carthage将EKFieldMask
集成到Xcode项目中,请在您的Cartfile
中指定它
github "ekamalov/EKFieldMask"
运行carthage update
以构建框架,并将构建好的EKFieldMask.framework
拖入您的Xcode项目中。
在应用程序目标的“构建阶段”设置选项卡中,单击“+”图标,选择“新建运行脚本阶段”并添加框架路径,如Carthage入门步骤4、5和6中所述
手动
如果您不想使用上述任何依赖管理器,可以手动将EKFieldMask
集成到项目中。只需将Sources
文件夹拖入您的Xcode项目即可。
使用方法
在安装库并导入模块 EKFieldMask
之后,文本字段可以像任何其他文本字段一样使用。
/// Public initializer
/// - Parameter title: TipView title
/// - Parameter placeholder: text field placeholder
/// - Parameter preferences: global perference
public init(tipView title: String = "Tap again to clear",
placeholder: String,
preferences: Preferences = EKFieldMask.staticGlobalPreferences)
/// Example
let maskField: EKFieldMask = EKFieldMask(placeholder: "E-mail or phone number")
//or
let maskField: EKFieldMask = EKFieldMask(tipView: "Tap again to clear",
placeholder: "E-mail or phone number")
如果您想更改外观,请查看 自定义
标题
/// Example
var preferences = EKFieldPreferences()
preferences.tipView.body.backgroundColor = .red
preferences.textField.textColor = .blue
preferences.countryView.tableView.cell.countryTextColor = .black
let field = EKFieldMask(tipView: "Tap again to clear",
placeholder: "E-mail or phone number",
preferences: preferences)
自定义
为了自定义 EKFieldMask
的外观和行为,您可以调整封装了所有可自定义属性的 Preferences
结构。这些首选项被分为三个结构
基本
封装了指定 EKFieldMask
将在屏幕上如何绘制的可自定义属性。查看默认值
/// Use the borderWidth property to change the border width of the field . By default, uses 1px
public var borderWidth: CGFloat = 1
/// Use the sectionTitleColor property to change the color of the tableView section title color. By default, uses black with alpha 0.4
public var borderColor: UIColor = UIColor.black.withAlphaComponent(0.1)
/// Use the cornerRadius property to change the corner radius of the field . By default, uses 10px
public var cornerRadius: CGFloat = 10
/// Use the leftIcon property to change the search icon of the search field in countriesViewController . By default, uses search icon
public var leftIcon: UIImage? = UIImage(named: "search", in: Bundle.resource, compatibleWith: nil) ?? nil
/// Use the clearButtonIcon property to change the clear icon of the field. By default, uses search icon
public var clearButtonIcon: UIImage? = UIImage.init(named: "clear", in: .resource, compatibleWith: nil) ?? nil
/// The text font. By default bold system font with size 18
public var font: UIFont = UIFont(name: "Gilroy-SemiBold", size: 18) ?? .boldSystemFont(ofSize: 18)
/// Use the tintColor property to change the color of the field tint . By default, uses black
public var tintColor: UIColor = .black
/// Use the textColor property to change the color of the text. By default, uses black
public var textColor: UIColor = .black
/// Use the sectionTitleColor property to change the color of the tableView section title . By default, uses black with alpha 0.4
public var placeholderColor: UIColor = UIColor.black.withAlphaComponent(0.4)
国家视图控制器
封装了指定如何显示 国家视图
的可自定义属性。查看默认值
/// Use the contentMargin property to change the left-right margin of the main screen. By default, uses 25px
public var contentMargin: CGFloat = 25
/// Use the relatedCountries property to change the list related countries of the countryView. Related countries will be shown at the top of the list. By default, uses "AT","NO","CH","US","UK"
public var relatedCountries: [String] = ["AT","NO","CH","US","UK"]
标题
您可以使用自己的参数来格式化 标题
。使用此方法以获取所需样式。查看默认值
/// Use the titleFont property to change the font of the title font. By default user "Gilroy-SemiBold" with size 28
public var titleFont: UIFont = UIFont(name: "Gilroy-Bold", size: 18) ?? .boldSystemFont(ofSize: 18)
/// Use the titleColor property to change the color of the title. By default, uses black
public var titleColor: UIColor = .black
/// Use the seperatorLinePadding property to change the left+right padding of the seperator line. By default, uses black with alpha 25
public var seperatorLinePadding: CGFloat = 25
/// Use the sectionTitleColor property to change the color of the seperator line. By default, uses black with alpha 0.1
public var seperatorLineColor: UIColor = UIColor.black.withAlphaComponent(0.1)
单元格
您可以使用自己的参数来格式化 单元格
。使用此方法以获取所需样式。查看默认值
/// Use the flagIconSize property to change the size of the flag imageView. By default, uses .init(width: 20, height: 15)
public var flagIconSize: CGSize = .init(width: 20, height: 15)
/// Use the countryTextFont property to change the font of the country title. By default user "Gilroy-SemiBold" 16
public var countryTextFont: UIFont = UIFont(name: "Gilroy-SemiBold", size: 16) ?? .boldSystemFont(ofSize: 16)
/// Use the countryTextColor property to change the color of the country title . By default, uses .init(red: 65/255, green: 78/255, blue: 91/255, alpha: 1)
public var countryTextColor: UIColor = .init(red: 65/255, green: 78/255, blue: 91/255, alpha: 1)
/// Use the dialCodeTextFont property to change the font of the dial code text. By default user "Gilroy-SemiBold" 16
public var dialCodeTextFont: UIFont = UIFont(name: "Gilroy-SemiBold", size: 16) ?? .boldSystemFont(ofSize: 16)
/// Use the dialCodeText property to change the color of the dial code text. By default, uses black
public var dialCodeTextColor: UIColor = .black
/// Use the height property to change the height of the tableView. By default, user 60
public var height: CGFloat = 60
/// Use the sectionTitleColor property to change the color of the tableView cell seperator line By default, uses black with alpha 0.1
public var seperatorLineColor: UIColor = UIColor.black.withAlphaComponent(0.1)
章节
使用此功能来获取您想要的样式...查看默认值
/// Use the sectionHeaderHeight property to change the cell height of the tableView section height. By default user "50px
public var sectionHeaderHeight: CGFloat = 50
/// Use the sectionTitleFont property to change the font of the tableView section title. By default user "Gilroy-SemiBold" 16
public var sectionTitleFont: UIFont = UIFont(name: "Gilroy-SemiBold", size: 16) ?? .boldSystemFont(ofSize: 16)
/// Use the sectionTitleColor property to change the color of the tableView section title color. By default, uses black with alpha 0.4
public var sectionTitleColor: UIColor = UIColor.black.withAlphaComponent(0.4)
贡献
非常欢迎贡献
许可证
EKFieldMask
采用了 MIT 许可证发布。详情请查看 LICENSE.md 文件。
MIT License
Copyright (c) 2019 Erik Kamalov <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.