ios - 如何快速制作可设计的文本字段代码类

Question

我是编程和 iOS 开发的初学者。我想制作一个 swift 文件，其中包含用于制作可设计文本字段的代码，因此我不会通过编码来编辑 UI 元素显示，所有将被编辑的 UI，我将在 Interface builder 中进行编辑。

我需要在 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
        }
    }



}

但现在我只需要在右侧添加另一张图片，并且在右侧添加另一张图片(即在右侧和左侧)。我该如何编辑这些代码？我试过了，但它没有出现，老实说，我对调整 View 的 x 和 y 坐标有点困惑。我需要你的帮助:)

Answer 1

有两种解决方法

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

第二个解决方案是你如何做的。

您需要做的第一件事是将属性添加到正确的图像和正确的填充中。在左填充属性下添加以下代码:

 @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
    }
  }

您必须编辑正确的属性。现在前往 Storyboard 并尝试一下。要将图像向左移动，请减少右填充 0、-1、-2、-3 等。要将图像向右移动，请增加右填充 0、1、2、3。