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

One approach is to make a normal square picture which has transparent pixels below making it look like its cropped, but it is not :) putting in the uiimageview with transparent background will result in the same effect as your picture. You should have very basic skills in photoshop to crop out the pixels below — J. Doe, Apr 04 '17 at 18:34
You might want to check how to draw an arc using Core Graphics. [this](http://stackoverflow.com/questions/15866179/draw-segments-from-a-circle-or-donut) could be a good stating point for doing it. — Ahmad F, Apr 04 '17 at 18:40

Oleh Zayats · Accepted Answer · 2017-04-05T05:25:33.927

Draw an ellipse shape using UIBezier path.
Draw a rectangle path exactly similar to imageView which holds your image.
Transform the ellipse path with CGAffineTransform so that it will be in the center of the rect path.
Translate rect path with CGAffineTransform by 0.5 to create intersection between ellipse and the rect.
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:

Don't just post code. A good answer explains the problem and the solution. — rmaddy, Apr 04 '17 at 18:49
A sentence or two about layer masks would be helpful. Also, this won't look right if the view in the storyboard is not the same size as the user's device. You need to compute the mask path in `viewDidLayoutSubviews`. — rob mayoff, Apr 04 '17 at 18:53

score 2 · Answer 2 · edited May 23 '17 at 12:18

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.

edited May 23 '17 at 12:18

Community

1
1

answered Apr 04 '17 at 18:36

inokey

5,434
4
21
33

score 1 · Answer 3 · answered Apr 04 '17 at 18:38

1

Why you could not just create (draw) rounded transparent image and add UIImageView() with UIImage() at the top of the view with required height and below this view add other views. I this this is the easiest way. I would write comment but I cant.

answered Apr 04 '17 at 18:38

GrandFelix

541
5
9

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

3 Answers3