iOS how to create a UIView border with label on top of that - swift

Question

I have to add label on top of UIView border, how do I achieve that using beizer path by drawing only part of the border on view

Answer 1

This can be realized by implementing a BorderLabelView where a contentView and a label is added. To the contentView a textField is added which is positioned vertically centered to its parent.
The label is positioned relatively to the top of the parent but moved up by a negative constant value.
An extra contentView is used (instead of the BorderLabelView itself) to set the border with rounded corners, so that masksToBounds can be set without masking the part of the label that sticks up a little bit.
For the label some leading and trailing space is needed. That is why UILabel is subclassed so that intrinsicContentSize can be reset.
This is a working example implementation:
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
}
}
The view can be used by calling the initializer
BorderLabelView(labelName: "User name", textContent: "Sanjay SK")
This is an example implementation for a 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
}
}

Answer 2

Create a border and rounded UIView.. Inside that view you can add label or UITextField whose text is "Sanjay SK" with respect to given sample image
Give that view border color , border width and corer radious.. then take a UILabel with background color white and add it over that bordered UIView ... will give you same look and feel ... hope it will help you