我是编程和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坐标。我需要你的帮助:))
答案 0 :(得分:3)
这个有两个解决方案
第一个解决方案是最简单的解决方案。您可以拥有一个视图,并在视图中插入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。