FREDERIC1405
FREDERIC1405

Reputation: 85

ios swift create rounded profile image like twitter, instagram,

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 : example from the twitter app

Upvotes: 0

Views: 530

Answers (3)

Hitesh Surani
Hitesh Surani

Reputation: 13577

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.

Upvotes: 0

Martin Muldoon
Martin Muldoon

Reputation: 3436

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

Upvotes: 0

Himanshu Patel
Himanshu Patel

Reputation: 1033

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

Upvotes: 0

Related Questions