CODEWITHSUNDEEP
iosswift
ABC
ABC

Reputation: 665

Swift: Insert text label onto round image

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))

enter image description here

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!

Upvotes: 0

Views: 512

Answers (1)

Ratul Sharker
Ratul Sharker

Reputation: 8013

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.

Upvotes: 1

Related Questions