Using an UIView as a Mask in another UIView on Swift
You can set the alpha
property from your mask view and add in front of the other view, for instance:
let maskView = UIView()
maskView.backgroundColor = UIColor(white: 0, alpha: 0.5) //you can modify this to whatever you need
maskView.frame = CGRect(x: 0, y: 0, width: imageView.frame.width, height: imageView.frame.height)
yourView.addSubview(maskView)
EDIT: Now that you edited your question with an image, now I see what you need, so here is how you can accomplish that.
func setMask(with hole: CGRect, in view: UIView){
// Create a mutable path and add a rectangle that will be h
let mutablePath = CGMutablePath()
mutablePath.addRect(view.bounds)
mutablePath.addRect(hole)
// Create a shape layer and cut out the intersection
let mask = CAShapeLayer()
mask.path = mutablePath
mask.fillRule = kCAFillRuleEvenOdd
// Add the mask to the view
view.layer.mask = mask
}
With this function, all you need is to have a view and create a shape that it's going to be a hole in that view, for instance:
// Create the view (you can also use a view created in the storyboard)
let newView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
newView.backgroundColor = UIColor(white: 0, alpha: 1)
// You can play with these values and find one that fills your need
let rectangularHole = CGRect(x: view.bounds.width*0.3, y: view.bounds.height*0.3, width: view.bounds.width*0.5, height: view.bounds.height*0.5)
// Set the mask in the created view
setMask(with: rectangularHole, in: newView)
DevRenanGaspar
Updated on June 12, 2022Comments
-
DevRenanGaspar about 2 years
I am developing an App on xCode with Swift. My screen has an Image of an animal (outlet "backImage"), over this image I have a view (outlet "coverView"), color black, which covers all the screen. So so far you can't see the animal image, because the "coverView" is in front of it. Then I have another view (outlet "maskView") which is smaller and it's over the big view "coverView". What I want is to use this "maskView" as mask and therefor see the "backImage" through it, like a window.
Is there anyone out there able to figure this out?
Here is my screen, I want to see the woman character behind the big gray view through the smaller white view:
-
DevRenanGaspar about 7 yearsHi Alexandre, not sure if I am doing it correctly, but didn't work. If I understood correctly your code, you are creating a UIView with background white 0 and alpha 0.5, then define the size and add under my big View.. The problem what I want to see is behind the big view, so this new UIView has to make a hole in my big view. Thanks for your help!
-
DevRenanGaspar about 7 yearsI have now attached my screen
-
Alexandre Lara about 7 years@DevRenanGaspar Now that I saw the image I think that I know what you need so I edited my answer.
-
DevRenanGaspar about 7 yearsYou are the best! Thank you so much. It works really well! Just a little change, instead of creating the rectangularHole by coding as you did, can use a view from my storyboard as the rectangularHole? I know I can replace the newView you created by one in my SB, I understood that and I actually did it. But can I do the same for the hole? Thanks again!
-
DevRenanGaspar about 7 yearsI think I got it! Can't believe, too many hours with this issue... I replaced the rectangularHole creation with CGRect by "let rectangularHole = windowView.frame.integral"... Please let me know if you would do different, but it worked! Thank you!
-
Alexandre Lara about 7 years@DevRenanGaspar You're welcome. It has been a while since I don't use storyboards so I really don't know if I would use a different way, but if yours is working, that's perfect. Happy coding!
-
Narasimha Nallamsetty almost 4 yearsHi @DevRenanGaspar, I have same requirement in my project. I have used the above code which you posted. It is not serving my purpose. Please help me with some example app or with more explanation. Thank you