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

时间:2018-02-08 01:27:29

标签: ios swift uitextfield ibdesignable

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

enter image description here

我需要在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坐标。我需要你的帮助:))

1 个答案:

答案 0 :(得分:3)

这个有两个解决方案

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

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

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

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