Create a custom box with an arrow underneath using swift programatic ui - ios

Question

I am a junior swiftui developer, i am working on a project that require me to use UIKit in some of its part.
i want to achieve a view similar to the attached image which is an example of Waze Advertisment box:
after checking MapBox API and looking at some of the example i learned that if i want to achieve this i should use swift programatic ui which i am not that familiar with, in the example they have provided the following view:
and the way they have created it was as follow:
final class AdvertismentAnnotationView: UIView {
weak var delegate: AdvertismentAnnotationViewDelegate?
//Passing this model to get the data and display it
var advertismentModel: AdvertismentModel
var selected: Bool = false {
didSet {
selectButton.setTitle(selected ? "Deselect" : "Select", for: .normal)
}
}
var title: String? {
get { centerLabel.text }
set { centerLabel.text = newValue }
}
lazy var centerLabel: UILabel = {
let label = UILabel(frame: .zero)
label.font = UIFont.systemFont(ofSize: 10)
label.numberOfLines = 0
return label
}()
lazy var closeButton: UIButton = {
let button = UIButton(type: .system)
button.setTitleColor(.black, for: .normal)
button.setTitle("X", for: .normal)
return button
}()
lazy var selectButton: UIButton = {
let button = UIButton(type: .system)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = #colorLiteral(red: 0, green: 0.4784313725, blue: 0.9882352941, alpha: 1)
button.layer.cornerRadius = 8
button.clipsToBounds = true
button.setTitle("Select", for: .normal)
return button
}()
//MARK: This is what i have added
//and image that will later fetch the image from advertisment.imageURL
lazy var adImage: UIImage = {
return UIImage()
}()
//MARK: Lifecycle
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .green
closeButton.addTarget(self, action: #selector(closePressed(sender:)), for: .touchUpInside)
selectButton.addTarget(self, action: #selector(selectPressed(sender:)), for: .touchUpInside)
[centerLabel, closeButton, selectButton].forEach { item in
item.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(item)
}
NSLayoutConstraint.activate([
closeButton.topAnchor.constraint(equalTo: topAnchor, constant: 4),
closeButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -4),
centerLabel.topAnchor.constraint(equalTo: topAnchor, constant: 4),
centerLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -4),
centerLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 4),
selectButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4),
selectButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -4),
selectButton.leftAnchor.constraint(equalTo: leftAnchor, constant: 4)
])
}
}
what i want to achieve is a white rounded rectangle with an arrow underneath in its center and an image inside the box.
I have tried using swiftui in this uikit however i failed many time.
if this was a regular swiftui i would have created a ZStack with a rounded rectangle and a custom shape as of the arrow.
and using kingfisher to fetch the image.