How to set half-round UIImage in Swift like this screenshot

Question

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

Hello all Swifters,

Could anyone tell me how to set this kind of UI? Is there any half rounded image that they have set?

Or there are two images. One with the mountains in the background and anohter image made half rounded in white background and placed in on top?

Please advise

Answer 1

1. Draw an ellipse shape using UIBezier path.

2. Draw a rectangle path exactly similar to imageView which holds your image.

3. Transform the ellipse path with CGAffineTransform so that it will be in the center of the rect path.

4. Translate rect path with CGAffineTransform by 0.5 to create intersection between ellipse and the rect.

5. Mask the image using CAShapeLayer.

Additional: As Rob Mayoff stated in comments you'll probably need to calculate the mask size in viewDidLayoutSubviews. Don't forget to play with it, test different cases (different screen sizes, orientations) and adjust the implementation based on your needs.

Try the following code:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        guard let image = imageView.image else {
            return
        }

        let size = image.size

        imageView.clipsToBounds = true
        imageView.image = image

        let curveRadius    = size.width * 0.010 // Adjust curve of the image view here
        let invertedRadius = 1.0 / curveRadius

        let rect = CGRect(x: 0,
                          y: -40,
                      width: imageView.bounds.width + size.width * 2 * invertedRadius,
                     height: imageView.bounds.height)

        let ellipsePath = UIBezierPath(ovalIn: rect)
        let transform = CGAffineTransform(translationX: -size.width * invertedRadius, y: 0)
        ellipsePath.apply(transform)

        let rectanglePath = UIBezierPath(rect: imageView.bounds)
        rectanglePath.apply(CGAffineTransform(translationX: 0, y: -size.height * 0.5))
        ellipsePath.append(rectanglePath)

        let maskShapeLayer   = CAShapeLayer()
        maskShapeLayer.frame = imageView.bounds
        maskShapeLayer.path  = ellipsePath.cgPath
        imageView.layer.mask = maskShapeLayer
    }
}

Result:

Answer 2

You can find an answer here: https://stackoverflow.com/a/34983655/5479510

But generally, I wouldn't recommend using a white image overlay as it may appear distorted or pixelated on different devices. Using a masking UIView would do just great.