iOS如何创建一个带有标签的UIView边框答案

【问题标题】：iOS how to create a UIView border with label on top of thatiOS如何创建一个带有标签的UIView边框
【发布时间】：2020-05-24 06:53:33
【问题描述】：

我必须在 UIView 边框顶部添加标签，如何通过仅在视图上绘制部分边框来使用 beizer 路径实现这一点

【问题讨论】：

制作自定义视图。在视图顶部添加标签并相应地对其进行约束。
您可以通过创建自定义文本字段、在左上角添加边框和标签来实现此目的...

标签： swift uiview calayer

【解决方案1】：

这可以通过实现BorderLabelView 来实现，其中添加了contentView 和label。向contentView 添加了一个textField，该textField 垂直居中于其父级。

label 相对于父级的顶部定位，但向上移动了一个负常数值。

使用一个额外的contentView（而不是BorderLabelView本身）来设置圆角边框，这样masksToBounds就可以在不遮盖标签部分突出的情况下设置。

对于标签，需要一些前导和尾随空格。这就是为什么 UILabel 被子类化以便intrinsicContentSize 可以被重置。

这是一个工作示例实现：

import UIKit

class PaddedLabel: UILabel {
    override var intrinsicContentSize: CGSize {
        CGSize(width: super.intrinsicContentSize.width + 20, height: super.intrinsicContentSize.height)
    }
}

class BorderLabelView: UIView {
    convenience init(labelName: String, textContent: String) {
        self.init()

        let contentView = UIView()

        contentView.backgroundColor = .white
        contentView.layer.borderWidth = 0.5
        contentView.layer.borderColor = UIColor.lightGray.cgColor
        contentView.layer.cornerRadius = 10;
        contentView.layer.masksToBounds = true;

        let textField = UITextField()
        textField.textColor = .black
        textField.font = UIFont.systemFont(ofSize: 22.0)
        textField.text = textContent

        contentView.addSubview(textField)
        textField.translatesAutoresizingMaskIntoConstraints = false
        textField.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 25).isActive = true
        textField.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

        addSubview(contentView)

        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        contentView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        contentView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true

        let label = PaddedLabel()
        label.text = labelName
        label.backgroundColor = .white
        label.textColor = UIColor.lightGray
        label.textAlignment = .center

        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.topAnchor.constraint(equalTo: topAnchor, constant: -10).isActive = true
        label.leftAnchor.constraint(equalTo: leftAnchor, constant: 15).isActive = true
    }
}

视图可以通过调用初始化器来使用

BorderLabelView(labelName: "User name", textContent: "Sanjay SK")

这是 UIViewController 的示例实现：

import UIKit

class BorderLabelController: UIViewController {
    override func viewDidLoad() {
        view.backgroundColor = .white

        let borderLabelView = BorderLabelView(labelName: "User name", textContent: "Sanjay SK")
        view.addSubview(borderLabelView)

        borderLabelView.translatesAutoresizingMaskIntoConstraints = false
        borderLabelView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        borderLabelView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true

        borderLabelView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        borderLabelView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.size.width - 40).isActive = true
    }
}

【讨论】：

【解决方案2】：

创建一个边框和圆角UIView.. 在该视图中，您可以添加标签或UITextField，其文本是关于给定示例图像的“Sanjay SK”

给该视图边框颜色、边框宽度和半径半径.. 然后使用背景颜色为白色的UILabel 并将其添加到带边框的UIView 上...会给您相同的外观和感觉...希望它会帮助你

【讨论】：