Swift: Insert text label onto round image - ios

Question

I'm trying to recreate something like this, where I pull the user's image, and then overlay the "Change" label on top- but I can't seem to figure out how.
(I also want to have some sort of action associated with this label (eg, segue to new page))
My issue: I cannot seem to figure out how to overlay the text label but still keep the image round and have the bottom part of the image have that opaque label.
Code+Details: I have a custom UIView, which contains an Imageview- When I want to add an image I call the following code:
self.userProfilePic.addImage((userImg).roundImage(), factorin: 0.95)
Within the custom view, this is how the image is added:
func addImage(imagein: UIImage, factorin:Float)
{
let img = imagein
imageScalingFactor = factorin
if imageView == nil
{
imageView = UIImageView(image: img)
imageView?.contentMode = .ScaleAspectFit
self.addSubview(imageView!)
self.sendSubviewToBack(imageView!)
imageView!.image = img
}
}
This is my code for the image rounding (which I do not want to touch):
extension UIImage
{
func roundImage() -> UIImage
{
let newImage = self.copy() as! UIImage
let cornerRadius = self.size.height/2
UIGraphicsBeginImageContextWithOptions(self.size, false, 1.0)
let bounds = CGRect(origin: CGPointZero, size: self.size)
UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).addClip()
newImage.drawInRect(bounds)
let finalImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return finalImage
}
}
Any help would be appreciated!

Answer 1

Try something like this view hierarchy
UIView
!
!--UIImageView
!--UIButton
so you take 'UIView', inside that first add the UIImageView than on the lower portion of the image view add a UIButton. Now set the clipToBounds to yes. Now set the desire corner radius of this parent view's layer as following
parentView.layer.cornerRadius = parentVirew.frame.size.width;
Remember you have to make the parent view of square size, means the height & width should be the same, for getting the circular masking. Adjust the button position a bit. You will definetly get the result.