CODEWITHSUNDEEP
swiftuiimageviewuiimagebadge
Kegham K.
Kegham K.

Reputation: 1614

Trying to put a badge on an UIImageView

I built a UIImageView extension to use the image in it and add a badge to it. But i really cannot get it right because after that i'm rounding the UIImageView corners radius. What i want is to show the badge on top of the UIImageView corner of the image.

This is how i do it:

public extension UIImageView {
   func addBadgeRightBottom (withBadge badge: UIImage) {

        if self.image != nil {
            UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 0.0)
            self.image?.draw(in: CGRect(x: 0, y: 0, width: (self.frame.size.width), height: (self.frame.size.height)))
            badge.draw(in: CGRect(x: (self.frame.size.width) - badge.size.width, y: (self.frame.size.height) - badge.size.height, width: badge.size.width, height: badge.size.height))
             let image = UIGraphicsGetImageFromCurrentImageContext()
            DispatchQueue.main.async() { () -> Void in

                self.image = image
            }
            UIGraphicsEndImageContext()
        }
    }
}

This is what i'm getting:

enter image description here

What i really want to have:

enter image description here

Upvotes: 0

Views: 2068

Answers (1)

Kegham K.
Kegham K.

Reputation: 1614

At last i did it by creating a new UIImageView of the badge UIImage size in the same position i wanted on the other circular UIImageView and added it as a subview to my UICollectionViewCell because these profile picture images are in a UICollectionViewCell

Unfortunately i didn't do it as an extension after all.

Here is how i did it. After initializing a UIImageView in the CelebCollectionViewCell class

var celebBadgeImageView = UIImageView()

I initialized the CGRect of the badge and added it as a subview

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell: CelebCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "celebCell", for: indexPath) as! CelebCollectionViewCell

    cell.celebBadgeImageView.frame = CGRect(x: cell.celebImage.frame.size.width - (#imageLiteral(resourceName: "verifiedCelebrity").size.width/2), y: cell.celebImage.frame.size.height - #imageLiteral(resourceName: "verifiedCelebrity").size.height, width: #imageLiteral(resourceName: "verifiedCelebrity").size.width, height: #imageLiteral(resourceName: "verifiedCelebrity").size.height)
    cell.celebBadgeImageView.image = #imageLiteral(resourceName: "verifiedCelebrity")
    cell.addSubview(cell.celebBadgeImageView)

    cell.celebImage.image = #imageLiteral(resourceName: "profile_user.jpg")
    cell.celebImage.circularView()

    return cell
}

enter image description here

Upvotes: 2

Related Questions