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

【问题标题】：how to make designable textfield code class in swift如何快速制作可设计的文本字段代码类
【发布时间】：2018-02-08 01:27:28
【问题描述】：

我是编程和 iOS 开发的初学者。我想制作一个 swift 文件，其中包含制作 Designable 文本字段的代码，所以我不会通过编码来编辑 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
        }
    }



}

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

【问题讨论】：

标签： ios swift uitextfield ibdesignable

【解决方案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
    }
  }

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

【讨论】：