CODEWITHSUNDEEP
iosswiftuiimageview
Dani
Dani

Reputation: 3637

Shape/mask on UIImage?

I was wondering how can this be achieved in Xcode? It's part of a profile, so the header is an actual UIImageView, but the curve below it, not sure how to achieve that. Any ideas?

enter image description here

Upvotes: 2

Views: 1968

Answers (2)

JeeVan TiWari
JeeVan TiWari

Reputation: 335

It can be achieved by giving header view UIBezierPath but if you don't want to do that stuff.

I found a cool way of doing.

Your Header view contain a image (Lets say it HeaderImage).

  • Make a Image of that shape (Lets say it MaskImage).

    let path = UIImageView.init(image: #imageLiteral(resourceName: "MaskImage"))

  • Than apply this mask to Header Image.

    HeaderImage.mask = path

Hope it work for you.

Upvotes: 3

Thomas
Thomas

Reputation: 2063

Say that the grey area is built out of a bottom grey rectangle and on top another rectangle with your arc we could do something like this:

Create a UIBezierPath in the shape of a circle: 

let path = UIBezierPath(ovalIn:CGRect(x: 0, y: view.bounds.height/2, width: view.bounds.width, height: view.bounds.height)).cgPath

Apply it to the top rectangle. 

let overlay = CAShapeLayer()
overlay.path = path
overlay.fillColor = UIColor.gray.cgColor
overlay.shouldRasterize = true
view.layer.addSublayer(overlay)

This will create a perfect circle but you can tweak the CGRect's your liking in order to get the shape you want!

Upvotes: 5

Related Questions