如何在swift中使用@IBDesignable在文本字段的左右插入图像？ [复制]答案

【问题标题】：how to insert image in the left AND right to textfield using @IBDesignable in swift? [duplicate]如何在swift中使用@IBDesignable在文本字段的左右插入图像？ [复制]
【发布时间】：2018-02-17 02:04:13
【问题描述】：

我是初学者，我正在尝试使用两个图像制作一个密码文本字段，一个在左侧（锁定图像），另一个在右侧以显示像这样的密码

但我的上级命令我在 @IBDesignable 类的文本字段中创建它，这样主代码就可以从 UI 中清楚地看到。我在这里how to make designable textfield code class in swift找到了类似的帖子@

但似乎代码仅适用于左图或右图，我需要它们（锁定和眼睛符号）都出现在文本字段中。我试图在那里修改代码，但我无法实现我所需要的。真的需要你的帮助，也许你在以前的项目中已经这样做了:)

import UIKit

@IBDesignable


class DesignableTextField: UITextField {

@IBInspectable var rightImage : UIImage? {
    didSet {
      updateRightView()
    }
  }

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

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

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



}

【问题讨论】：

标签： ios swift ibdesignable

【解决方案1】：

检查以下代码：

@IBInspectable var leftSideImage:UIImage = UIImage() {

    didSet {
        leftView = UIImageView.init(image: leftSideImage)
        leftViewMode = .always
    }
}

@IBInspectable var rightSideImage:UIImage = UIImage() {

    didSet {
        rightView = UIImageView.init(image: rightSideImage)
        rightViewMode = .always
    }
}

输出：

【讨论】：

【解决方案2】：

您可以做的另一种方法，在情节提要中添加一个按钮并添加约束，如下所示

按钮后沿 = 文本字段后沿
按钮（垂直）中心 = 文本字段（垂直）中心
修复按钮的高度和宽度

你可以在右侧做同样的事情。按钮前沿 = 文本域前沿

[]_______________[]

【讨论】：