如何在 swift 中制作可设计的文本字段代码 class

Question

我是编程和 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。添加约束以设置所需的大小。您可以使文本字段透明。使用此方法，您可以根据需要自定义它。

第二种解决方案就是您的做法。

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

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

你必须编辑正确的 properties.Now 头到故事板并尝试一下。要将图像向左移动，请减少右填充 0、-1、-2、-3 等。要将图像向右移动，请增加右填充 0、1、2、3。

如何在 swift 中制作可设计的文本字段代码 class

how to make designable textfield code class in swift

uitextfield

ios

swift

ibdesignable