如何在swift中创建可设计的文本字段代码类

我是编程和iOS开发的初学者。 我想创建一个包含代码的swift文件来创建可设计的文本字段，因此我不会通过编码来编辑UI元素显示，所有将要编辑的UI，我将在“界面”构建器中编辑它。

我需要在UITextfield中输入图像，然后按照https://www.youtube.com/watch?v=PjXOUd4hI6U&t=932s中的教程将图像放在UITextField的左侧，就像锁定图像一样在上图中。 这是要做到这一点

import UIKit @IBDesignable class DesignableTextField: UITextField { @IBInspectable var leftImage : UIImage? { didSet { updateView() } } @IBInspectable var leftPadding : CGFloat = 0 { didSet { updateView() } } @IBInspectable var cornerRadiusOfField : CGFloat = 0 { didSet { layer.cornerRadius = cornerRadiusOfField } } func updateView() { if let image = leftImage { leftViewMode = .always // assigning image let imageView = UIImageView(frame: CGRect(x: leftPadding, y: 0, width: 20, height: 20)) imageView.image = image var width = leftPadding + 20 if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line { width += 5 } let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView view.addSubview(imageView) leftView = view } else { // image is nill leftViewMode = .never } } } 

但现在我只需要在右侧添加另一个图像和两个图像（即在右侧和左侧）。 我该如何编辑这些代码？ 我试过但它没有出现，说实话我有点困惑调整视图的x和y坐标。 我需要你的帮助 ：）

Answer 1

有两种解决方案

第一种解决方案是最简单的解决方案 。 您可以拥有一个视图，并在视图中插入UIImageView ， UITextField ， UIImageView 。 添加约束以设置所需的大小。 您可以使文本字段透明。 使用此方法，您可以根据需要自定义它。

第二个解决方案是你如何做到这一点。

您需要做的第一件事是将属性添加到右侧图像和右侧填充。 在左边的padding属性下添加以下代码：

  @IBInspectable var rightImage : UIImage? { didSet { updateRightView() } } @IBInspectable var rightPadding : CGFloat = 0 { didSet { updateRightView() } } 

使用此新属性，您可以选择图像并编辑x位置。

更新函数之后，创建一个名为updateRigthView的新函数

喜欢这个：

  func updateRightView() { if let image = rightImage { rightViewMode = .always // assigning image let imageView = UIImageView(frame: CGRect(x: rightPadding, y: 0, width: 20, height: 20)) imageView.image = image var width = rightPadding - 20 if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line { width -= 5 } let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView view.addSubview(imageView) rightView = view } else { // image is nill rightViewMode = .never } } 

你必须编辑正确的属性。现在前往故事板并试一试。 要向左移动图像，请减小右边的填充0，-1，-2，-3等。要向右移动图像，请增加右边的填充0,1,2,3。