在 UITextField 上使用自定義邊框浮動 UILabel

Question

我基本上是在嘗試創建一個UITextField ，當用戶輸入內容時，它會在UILabel的頂部邊框上顯示占位符文本。

我已經設法將UILabel放入 position 並帶有動畫和所有內容，除了UITextField的邊框在我給它（邊框）自定義顏色和寬度時穿過UILabel 。 如果我離開標准的RoundedRect邊框，而不給出borderColor或borderWidth ，那么一切都很好。 我需要顏色：/

（忽略紅色背景 - 這樣做是為了可見性）

自定義borderColor經過label

這沒有自定義邊框（請參閱 - 通過UILabel沒有邊框）

所以是的 - 任何幫助將不勝感激。 謝謝

Answer 1

來自CALayer 中的Apple 文檔：

邊框是從接收者的邊界通過 borderWidth 插入繪制的。 它在接收器的內容和子層之上合成，並包括cornerRadius 屬性的效果。

但是您可以通過將文本放入自己的subview/sublayer來實現您的結果。

例如，為您的UITextField和placeholderlabel標簽創建一個公共超級視圖（不要將占位符標簽添加為 UITextField 的子視圖，例如將它們都添加到新的超級視圖 UIView 中）。

Answer 2

這對我沒有幫助。 我沒有找到“_UITextFieldRoundedRectBackgroundViewNeue”。 但這對我有幫助：在 layoutsubviews() 中，我創建了兩個圖層，然后在 updateLayer() 中添加浮動占位符標簽。 Floating Label 放在 whiteLabel 上方

public var floatingLabel = UILabel()
private var borderLayer = CAShapeLayer()
private var whiteLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    let path = UIBezierPath(rect: CGRect(x: 8, y: -2, width: 50, height: 4))
    layer.fillColor = UIColor.white.cgColor
    layer.path = path.cgPath
    return layer
}()

private func updateLayer() {
    layer.insertSublayer(borderLayer, at: 999)
    layer.insertSublayer(whiteLayer, above: borderLayer)
    let path = UIBezierPath(roundedRect: self.bounds, cornerRadius: 4)
    borderLayer.path = path.cgPath
    borderLayer.lineWidth = 1
    borderLayer.fillColor = UIColor.clear.cgColor
    addSubview(floatingLabel)
}

然后隱藏或顯示 placeHolderLabel 只需隱藏 whiteLayer 然后你需要 - 添加 borderLayer.strokeColor

Answer 3

感謝大家的回答🙏在我在這里發帖后，我已經坐了很長時間了，我想通了。 典型的。

我特別想創建一個UITextField的子類，這樣我就可以毫不費力地在所有地方重用它。 這就是為什么我不想制作一個包含UITextField和UILabel作為子視圖的UIView - 然后我每次都必須這樣做......不理想。

因此，在深入研究UITextField的視圖層次結構后，發現有一個子視圖_UITextFieldRoundedRectBackgroundViewNeue ，它始終是第一個，並且它是一個持有roundedRect邊框的roundedRect 。 通過layer.border添加自定義邊框實際上將其添加到框架上 - 在整個視圖層次結構的頂部。 這就是為什么它會在UILabel之前統治。

所以我所做的是將layer.border應用到_UITextFieldRoundedRectBackgroundViewNeue ，基本上強制邊框始終在底部，在一切之后。

我建議任何這樣做的人檢查if subviews[0].classForCoder.description() == "_UITextFieldRoundedRectBackgroundViewNeue"只是為了確保它確實在那里，並確保你沒有向你不這樣做的隨機子視圖添加邊框沒想到 😊

現在，將UILabel添加到具有白色背景的實際UITextField對象中，將產生浮動標簽的效果。 甜的。 🥳

Answer 4

在 ios 15 和 swift 5 上，這兩個答案都不適合我。

我不得不擴展我不想要新視圖的文本字段

class PrimaryTextField:UITextField{

然后我覆蓋繪圖 function 添加邊框層

override func draw(_ rect: CGRect) {
        
        addBorder(borderWidth: borderWidth, borderColor: blue5Color)

...

func addBorder(borderWidth: CGFloat = 1.0, borderColor: UIColor = UIColor.blue) {
        
        let frame = self.frame
        borderLayer.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
        borderLayer.borderColor = borderColor.cgColor
        borderLayer.borderWidth = borderWidth
        borderLayer.zPosition = 1
        self.layer.addSublayer(borderLayer)
    }

這將使用 zPosition 控制它，該層位於 position 1

我添加的 label 與 zPosition 2 一起添加為子視圖

func customInit(){
self.lblPlaceHolder.layer.zPosition = 2
self.addSubview(self.lblPlaceHolder)

...

我在此處覆蓋的自定義初始化方法上添加了 label

required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.customInit()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.customInit()
    }

label 出現在邊框的前面。