How to create one sided arrowed label - ios

Question

I am not looking out for code snippet. I am just curious to know how to develop a UI component which is shown below. I have multiple thoughts on creating it, but would love to know the best approach
Create a label and do some operations on its layer
Set background image and add text on label
Set image which has text on it
What will be the good approach to develop it. Any suggestions please.

Answer 1

You want to display a single line of text. You can use a UILabel for that.
You have a shape you want to fill. You can use a CAShapeLayer for that. It's best to wrap the shape layer in a UIView subclass so that UIKit can lay it out properly.
You want to put the text over the shape, so use a parent view to combine the label and the shape as subviews.
import UIKit
class TagView: UIView {
init() {
super.init(frame: .zero)
addSubview(background)
addSubview(label)
background.translatesAutoresizingMaskIntoConstraints = false
label.translatesAutoresizingMaskIntoConstraints = false
label.setContentHuggingPriority(.defaultHigh + 10, for: .horizontal)
label.setContentHuggingPriority(.defaultHigh + 10, for: .vertical)
NSLayoutConstraint.activate([
background.heightAnchor.constraint(equalTo: label.heightAnchor, constant: 4),
background.centerYAnchor.constraint(equalTo: label.centerYAnchor),
background.widthAnchor.constraint(equalTo: label.widthAnchor, constant: 20),
background.centerXAnchor.constraint(equalTo: label.centerXAnchor, constant: -2),
leadingAnchor.constraint(equalTo: background.leadingAnchor),
trailingAnchor.constraint(equalTo: background.trailingAnchor),
topAnchor.constraint(equalTo: background.topAnchor),
bottomAnchor.constraint(equalTo: background.bottomAnchor),
])
}
let label = UILabel()
private let background = BackgroundView()
private class BackgroundView: UIView {
override class var layerClass: AnyClass { return CAShapeLayer.self }
override func layoutSubviews() {
super.layoutSubviews()
layoutShape()
}
private func layoutShape() {
let layer = self.layer as! CAShapeLayer
layer.fillColor = #colorLiteral(red: 0.731529057, green: 0.8821037412, blue: 0.9403864741, alpha: 1)
layer.strokeColor = nil
let bounds = self.bounds
let h2 = bounds.height / 2
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: h2))
path.addLine(to: CGPoint(x: h2, y: 0))
path.addLine(to: CGPoint(x: bounds.maxX - h2, y: 0))
path.addArc(withCenter: CGPoint(x: bounds.maxX - h2, y: h2), radius: h2, startAngle: -.pi/2, endAngle: .pi/2, clockwise: true)
path.addLine(to: CGPoint(x: h2, y: bounds.maxY))
path.close()
layer.path = path.cgPath
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
import PlaygroundSupport
let root = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
root.backgroundColor = .white
PlaygroundPage.current.liveView = root
let tag = TagView()
tag.translatesAutoresizingMaskIntoConstraints = false
tag.label.text = "CURRENT"
root.addSubview(tag)
NSLayoutConstraint.activate([
tag.centerXAnchor.constraint(equalTo: root.centerXAnchor),
tag.centerYAnchor.constraint(equalTo: root.centerYAnchor),
])
Result: