iOS - UITextView 边框顶部的 UILabel答案

【问题标题】：iOS - UILabel on top of UITextView borderiOS - UITextView 边框顶部的 UILabel
【发布时间】：2022-06-29 19:09:42
【问题描述】：

我正在尝试使用 UITextView 实现这样的目标

这就是我到目前为止所带来的

func createTextFieldOutline() {
        textViewBorder = CAShapeLayer()
        let bez = UIBezierPath(roundedRect: self.bounds, cornerRadius: 7)
        textViewBorder?.path = bez.cgPath
        /* some styling code */
        if let outline = textViewBorder {
            self.layer.addSublayer(outline)
            self.createFloatingLabel()
        }
    }
    
    func createFloatingLabel() {
        let titleLabel = UILabel()
        /* some styling code */
        titleLabel.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        titleLabel.sizeToFit()
        titleLabel.adjustsFontSizeToFitWidth = true
        titleLabel.frame = CGRect(x: 16, y: -7.5, width: 32, height: 15)
        titleLabel.text = "Test"
        self.layer.insertSublayer(titleLabel.layer, above: textViewBorder)
    }

我使用这些方法的方式是我创建了一个 UITextView 的子类，并在convenience init 中调用上述两个方法。但它不会将标签放在边框顶部。它像这样将它放在边框后面：

同样的方法适用于UITextField，但不适用于UITextView。知道我做错了什么吗？

【问题讨论】：

看起来顶部标签被剪裁到文本视图的边界，您是否尝试过将剪辑弄乱？
@Tadreik 是无济于事
有什么特殊原因需要为该视图添加边框和标签，而不是仅仅将它们封装在一个新视图中？这将解决剪辑问题。

标签： ios swift uikit

【解决方案1】：

在这里，我创建了实现这种 TextField 的最佳 pod。

pod 'MaterialComponents/TextControls+OutlinedTextFields'

https://material.io/components/text-fields/ios#outlined-text-field

您可以在此平台上找到更多类似于 android UI 的 UI。

https://material.io/

let estimatedFrame = ...
let textArea = MDCOutlinedTextArea(frame: estimatedFrame)
textArea.label.text = "Label"
textArea.leadingAssistiveLabel.text = "This is helper text"
textArea.textView.text = "This is an outlined text area with enough text to span two lines."
textArea.sizeToFit()
view.addSubview(textArea)

【讨论】：