ios swift create rounded profile image like twitter, instagram,

Question

I would like to create a very simple image editor, same as twitter (for the profile image)

I know how to pinch or move an image.

But i don’t know how to create the "circle layer" and just keep this part of the image, like this :

plenty of answers on SO. Please check https://stackoverflow.com/questions/4414221/uiimage-in-a-circle?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — skJosh, May 01 '18 at 11:15

score 0 · Answer 1 · answered May 01 '18 at 11:13

Make sure to import QuarzCore.

func maskRoundedImage(image: UIImage, radius: CGFloat) -> UIImage {
    let imgView: UIImageView = UIImageView(image: image)
    let layer = imgView.layer
    layer.masksToBounds = true
    layer.cornerRadius = radius
    UIGraphicsBeginImageContext(imgView.bounds.size)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return roundedImage!
}

https://github.com/andreaantonioni/AAPhotoCircleCrop

score 0 · Answer 2 · answered May 01 '18 at 11:14

Each view has an underlying layer onto which you apply a corner radius. Then you must apply clipToBounds on that layer in order to apply that mask to the overlying UIView. The corner radius must be half the width of the view in order to get a circle effect. Otherwise the corners of the view will be rounded.

For example:

let square = UIView()
    square.center = view.center
    square.bounds.size = CGSize(width: 100, height: 100)
    square.backgroundColor = .red
    view.addSubview(square)

    square.layer.cornerRadius = 50
    square.clipsToBounds = true

score 0 · Answer 3 · answered May 01 '18 at 13:03

Above mentioned ways are good, But you can not achieved exact output as in above image E.g You can not get alpha effect.

I suggest simple way to do it.

1) Add new image to project with transparent background with Opocity and circle.

2) Add new imageView above to mainview as below.

let image = UIImageView(frame: view.bounds)
mage.image = UIImage.init(named:"imageName")
view.addSubview(image)

Then output should be as per your requirement.

ios swift create rounded profile image like twitter, instagram,

3 Answers3