iOS - UITextView 边框顶部的 UILabel

发布于 2025-01-19 14:48:43 字数 1443 浏览 3 评论 0原文

我正在尝试使用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的子类，并在便利性初始化。但这并没有将标签放在边界之上。它像这样将其放在边界后面：

相同的方法适用于uitextfield，但对于uite> uitextview而不适用。知道我做错了什么？

原文

I am trying to achieve something like this with a UITextView

This is what I have come with so far

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)
    }

The way I use these methods is I have created a subclass of UITextView and call above two methods in convenience init. But it does not put the label on top of border. It puts it behind the border like this:

The same approach works for UITextField but not for UITextView. Any idea what am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2025-01-26 14:48:43

在这里，我创建了实现这种 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)

Here, I have founded best pod for implement this kind of TextField.

pod 'MaterialComponents/TextControls+OutlinedTextFields'

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

You can find more UI which looks like android UI on this platform.

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)

回复收藏 0 原文

~没有更多了~