如何通过 Swift 中的图像视图创建自定义文本字段

Posted

技术标签:

【中文标题】如何通过 Swift 中的图像视图创建自定义文本字段【英文标题】:How to create a custom text field via image view in Swift 【发布时间】:2018-08-29 01:20:31 【问题描述】:

我正在尝试将键盘输入显示到框中(如图所示),并且仍然能够将输入读取为一个,而不是 4 个不同的输入。这些框是图像视图,我想将它们转换为一个文本字段。

【问题讨论】:

尝试使用这个pod:github.com/varunpm1/VPMOTPView,它可能对你有帮助 【参考方案1】:

你可以这样做:

1) 创建 UIView 或 UITableViewCell 类:

class ConfirmTableViewCell: UITableViewCell 

   @IBOutlet weak var symbolsTextField: UITextField!
   @IBOutlet weak var firstLabel: UILabel!
   @IBOutlet weak var secondLabel: UILabel!
   @IBOutlet weak var thirdLabel: UILabel!
   @IBOutlet weak var fourthLabel: UILabel!

   var code: String = ""

   override func awakeFromNib() 
       super.awakeFromNib()

       symbolsTextField.delegate = self
       symbolsTextField.becomeFirstResponder()

       resetContent()
   

   func resetContent() 
       firstLabel.text = nil
       secondLabel.text = nil
       thirdLabel.text = nil
       fourthLabel.text = nil
   

2) 添加 xib 或者您可以在情节提要中添加。使用明文颜色将UITextField 添加到UIView

3) 添加扩展:

extension ConfirmTableViewCell: UITextFieldDelegate 

   func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool 

       if range.location > 3 
           textField.text?.removeLast()
       

       setupLabels(character: string, range: range)

       return true
   

   func setupLabels(character: String, range: NSRange) 
       if range.location > 3 
           self.code.removeLast()
       

       if range.length == 0 
           self.code += character
        else 
           self.code.removeLast()
       

       var codeString: String = self.code

       if let symbol = codeString.first 
           firstLabel.text = String(symbol)
           codeString.removeFirst()
        else 
           firstLabel.text = nil
       

       if let symbol = codeString.first 
           secondLabel.text = String(symbol)
           codeString.removeFirst()
        else 
           secondLabel.text = nil
       

       if let symbol = codeString.first 
           thirdLabel.text = String(symbol)
           codeString.removeFirst()
        else 
           thirdLabel.text = nil
       

       if let symbol = codeString.first 
           fourthLabel.text = String(symbol)
        else 
           fourthLabel.text = nil
       
   


【讨论】:

非常感谢!你能把它转换成 Swift 2.3 吗?

以上是关于如何通过 Swift 中的图像视图创建自定义文本字段的主要内容,如果未能解决你的问题,请参考以下文章

swift - 快速按下集合视图单元格时如何修复自定义视图中的约束

Swift 中的自定义输入视图

无法通过单击选择文本字段(Swift)

如何在swift ios中将多个图像添加到自定义表格视图单元格?

自定义表格视图单元格上的多个图像(Swift)

在 Swift 中访问自定义 UITableViewCell UILabel 文本会引发错误