如何快速制作可设计的文本字段代码类 [英] how to make designable textfield code class in swift

问题描述

我是编程和iOS开发的初学者.我想制作一个包含使可设计的"文本字段成为代码的快速文件，因此，我不会通过编码来编辑UI元素的显示，所有要编辑的UI都将在界面构建器"中进行编辑.

I am a beginner in programming and in iOS development. I want to make a swift file that contains a code to make Designable textfield, so I will not edit the UI element display by coding, all the UI that will be edited, I will edit it in Interface builder.

我需要在UITextfield中输入图像，然后按照此处的教程进行操作

I need to input an image in UITextfield, and I follow along a tutorial in here https://www.youtube.com/watch?v=PjXOUd4hI6U&t=932s to put an image in the left side of the UITextField, like the lock image in the picture above. here is the the to do this

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

but now I need add another image on the right side only and both of them (i.e on the the right side AND left side). how do I edit those code? I have tried but it doesn't appear and to be honest I little bit confused to adjust the x and y coordinate of the view. I need your help :)

推荐答案

对此有两种解决方案

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

The First solution is the easiest one. You can have a view and insert inside the view a UIImageView, UITextField, UIImageView. Add constraints to set the desired sizes. You can make the text field transparent. With this method, you can customize it how you want.

第二个解决方案是您的工作方式.

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

The first thing you need to do is add the properties to the right image and right padding. Under the left padding property add the following code:

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

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

使用此新属性，您可以选择图像并编辑x位置.

With this new properties, you can choose the image and edit the x location.

在update函数之后，创建一个名为updateRigthView的新函数

After the update function create a new function called 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.

You had to edit the right properties.Now head to storyboard and try it out. To move the image to the left decrease the right padding 0,-1,-2,-3, etc. To move the image to the right increase the right padding 0,1,2,3.

这篇关于如何快速制作可设计的文本字段代码类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！