UITextField 圆角 - swift

Question

有没有办法解决这个问题以及如何将图标放在 UITextField 中？ 这是我的代码。

func roundCorners(corners:UIRectCorner, radius:CGFloat) {
    let bounds = self.bounds

    let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))

    let maskLayer = CAShapeLayer()
    maskLayer.frame = bounds
    maskLayer.path = maskPath.cgPath

    self.layer.mask = maskLayer

    let frameLayer = CAShapeLayer()
    frameLayer.frame = bounds
    frameLayer.path = maskPath.cgPath
    frameLayer.strokeColor = UIColor.darkGray.cgColor
    frameLayer.fillColor = UIColor.init(red: 247, green: 247, blue: 247, alpha: 0).cgColor

    self.layer.addSublayer(frameLayer)
}

func roundTopCornersRadius(radius:CGFloat) {
    self.roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight], radius:radius)
}

func roundBottomCornersRadius(radius:CGFloat) {
    self.roundCorners(corners: [UIRectCorner.bottomLeft, UIRectCorner.bottomRight], radius:radius)
}

在 viewDidLoad()

username.roundTopCornersRadius(radius: 8)
password.roundBottomCornersRadius(radius: 8)

这就是我所拥有的

我希望我的 textField 看起来像这样

Answer 1

要添加图像，请使用 UITextField 的 leftView 属性。

您的边框代码看起来不错，但请记住在添加cornerRadius 之前确保文本字段的布局已完成。 您可以调用 view.layoutIfNeeded() 以确保它已被调用。 或者（更好的解决方案），您可以在自定义文本字段中覆盖layoutSubviews()并确保在文本字段的布局更改时更改图层的边界。

将 textField 的 borderStyle 设置为 .none。

Swift 3 代码示例

@IBDesignable
class CustomTextField: UITextField {
    
    @IBInspectable
    var image: UIImage? {
        didSet {
            imageView.image = image
        }
    }

    var imageView: UIImageView = UIImageView()
    
    override func awakeFromNib() {
        super.awakeFromNib()
        self.borderStyle = .none
        setupImageView()
    }
    
    func roundCorners(corners:UIRectCorner, radius:CGFloat) {
        let bounds = self.bounds
        
        let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.cgPath
        
        self.layer.mask = maskLayer
        
        let frameLayer = CAShapeLayer()
        frameLayer.frame = bounds
        frameLayer.path = maskPath.cgPath
        frameLayer.strokeColor = UIColor.darkGray.cgColor
        frameLayer.fillColor = UIColor.init(red: 247, green: 247, blue: 247, alpha: 0).cgColor
        
        self.layer.addSublayer(frameLayer)
    }
    
    func setupImageView() {
        imageView = UIImageView(frame: CGRect(x:5,y:0,width:35,height:25))
        imageView.image = image
        imageView.contentMode = .scaleAspectFit
        self.leftView = imageView
        self.leftViewMode = .always
    }


    func roundTopCornersRadius(radius:CGFloat) {
        roundCorners(corners: [UIRectCorner.topLeft, UIRectCorner.topRight], radius:radius)
    }

    func roundBottomCornersRadius(radius:CGFloat) {
        roundCorners(corners: [UIRectCorner.bottomLeft, UIRectCorner.bottomRight], radius:radius)
    }
    
}

Answer 2

您将需要实现 IBDesignable 视图

Answer 3

嗯，这确实是自定义的，不确定您是否可以在不做任何工作的情况下使用本机文本字段来做到这一点。

为什么不这样做：

一个 UIView 将包含您的两个图标和它们旁边的两个文本字段：

只需确保没有为您的文本字段设置边框样式：

然后将包含所有内容的 UIView 的圆角半径设置为您想要的任何内容；) 简单的伙伴！