Rounded images

Rounded avatars seem to be very fashionable these days. Even Apple adopted the rounded images for contacts.  If you’re wondering how to achieve this in your app here is the answer. All we need to do is adjust the CALayer for the image view representing the avatar:

    self.avatarImageView.layer.cornerRadius = 150.0f;
    self.avatarImageView.layer.borderWidth = 2.0f;
    self.avatarImageView.layer.borderColor = [UIColor blackColor].CGColor;
    self.avatarImageView.clipsToBounds = YES;

The value for the corner radius is exactly half the width of the image. We’ll assume that we have a square image of size 300×300 otherwise we won’t get a perfect circle. We’ll add a nice black border and we’ll set the property clipsToBounds to YES. The clipsToBounds property needs to be YES for this to work. And there you have it, a big round image:


Happy coding!

One Reply to “Rounded images”

Leave a Reply

Your email address will not be published. Required fields are marked *