Question

我正在将UILabel实现为UITextField的子视图，该视图将显示在UITextField本身的上方。 UITextField的边框是圆形的，我想实现的是UILabel在边框上显示。

当前一切正常，但是UILabel绘制在UITextField边框的后面之后。我希望它在边框上方（上方），以便白色backgroundColor会显示在边框的上方，并使文本更易于阅读。

var priceTextField: CustomTextField = {

    let priceTextField = CustomTextField()
    priceTextField.layer.cornerRadius = 10.0
    priceTextField.layer.borderWidth = 1.0
    priceTextField.layer.borderColor = UIColor.darkGray.cgColor
    priceTextField.translatesAutoresizingMaskIntoConstraints = false
    priceTextField.font = UIFont.systemFont(ofSize: 15)
    priceTextField.textColor = .black
    priceTextField.text = "0"
    priceTextField.suffix = "EUR"
    priceTextField.suffixTextColor = .darkGray
    priceTextField.suffixSpacing = 2.0
    priceTextField.textAlignment = .center
    priceTextField.labelText = "Price"

    return priceTextField

}()

在我的CustomTextField类（UITextField的子类）中：

public var labelText: String?

var topLabel: UILabel = {

    let topLabel = UILabel()
    topLabel.translatesAutoresizingMaskIntoConstraints = false
    topLabel.textAlignment = .center
    topLabel.font = UIFont.systemFont(ofSize: 12)
    topLabel.textColor = .lightGray
    topLabel.backgroundColor = .white
    topLabel.numberOfLines = 1
    return topLabel

}()

func setupLabel() {

    self.addSubview(topLabel)
    topLabel.centerYAnchor.constraint(equalTo: self.topAnchor).isActive = true
    topLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 20).isActive = true
    topLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
    topLabel.text = labelText

}

我在setupLabel()的{{1}}方法的末尾调用draw(_ rect: CGRect)（因为我使用它来显示欧元符号始终位于输入值的后面）。

我尝试使用UITextField并更改bringSubviewToFront层的zPosition，但没有成功。

现在看起来像这样：

如何将文本“置于”边框上方？

编辑：尝试过Sh_Khan的解决方案，但它仍然隐藏在边界后面。

UILabel

Answer 1

您可以尝试通过创建UIView子类来对其进行组织，以便一切按添加的顺序正确显示

class CustomView: UIView {

    var priceTextField: CustomTextField = {

        let priceTextField = CustomTextField()
        priceTextField.layer.cornerRadius = 10.0
        priceTextField.layer.borderWidth = 1.0
        priceTextField.layer.borderColor = UIColor.darkGray.cgColor
        priceTextField.translatesAutoresizingMaskIntoConstraints = false
        priceTextField.font = UIFont.systemFont(ofSize: 15)
        priceTextField.textColor = .black
        priceTextField.text = "0"
        priceTextField.suffix = "EUR"
        priceTextField.suffixTextColor = .darkGray
        priceTextField.suffixSpacing = 2.0
        priceTextField.textAlignment = .center
        priceTextField.labelText = "Price"

        return priceTextField

    }() 
    var topLabel: UILabel = {

        let topLabel = UILabel()
        topLabel.translatesAutoresizingMaskIntoConstraints = false
        topLabel.textAlignment = .center
        topLabel.font = UIFont.systemFont(ofSize: 12)
        topLabel.textColor = .lightGray
        topLabel.backgroundColor = .white
        topLabel.numberOfLines = 1
        return topLabel

    }()

   var lableStr:String?
   init(frame: CGRect,lblTex:String) {
    super.init(frame: frame)
       lableStr = lblTex
       createSubviews()
    }

    override init(frame: CGRect) {
    super.init(frame: frame)
       createSubviews()
    }
    required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
       createSubviews()
    }
    func createSubviews() {
       // all the layout code from above
       // add the textfield then the label and set constraints properly
    }
}

Answer 2

根据Apple specification：它是在接收者的内容和子层之上合成的。

因此，即使将子视图置于最前面，边界也始终位于所有子视图之上。

因此，需要制作背景图以伪造边框。

类似于Stackoverflow Question

示例：

这里的自我是“ TextField” activeborderView是“ UiView”

activeborderView.frame = CGRect.init（x：-1，y：-1，宽度：self.frame.size.width + 2，高度：self.frame.size.height + 2） activeborderView.translatesAutoresizingMaskIntoConstraints = false self.addSubview（activeborderView）

        activeborderView.topAnchor.constraint(equalTo: self.topAnchor, constant:-1).isActive = true // Place our label 10 pts above the text field
        activeborderView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: -1).isActive=true

        activeborderView.heightAnchor.constraint(equalToConstant: self.frame.size.height+2).isActive=true

        activeborderView.widthAnchor.constraint(equalToConstant: self.frame.size.width+2).isActive=true

        activeborderView.layer.borderWidth = 3
        activeborderView.layer.borderColor = CustomColor.blue().cgColor

         activeborderView.layer.cornerRadius = 5
        activeborderView.backgroundColor = .white

        self.sendSubviewToBack(activeborderView)
        self.setNeedsDisplay()

在顶部将UILabel添加为UITextField的子视图

2 个答案: