UIView Mask Is Causing View To Move Positions (AutoLayout) - swift

Question

In my app, I have a UILabel, which I am using to mask a UIView. I am using AutoLayout throughout the app, and am finding that when setting the mask of my label, its position suddenly changes.
Here is my code when adding my label;
// Label
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Hello!"
label.font = UIFont.systemFont(ofSize: 50.0)
label.textColor = UIColor.white
view.addSubview(label)
// Constraints
label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
This produces the result. When adding the mask, however, via the following code;
// Mask
let mask = UIView()
mask.translatesAutoresizingMaskIntoConstraints = false
mask.backgroundColor = UIColor.blue
mask.mask = label
view.addSubview(mask)
// Constraints
mask.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
mask.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
mask.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
mask.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
My label ends up repositioning itself, and I am seeking to have the text stay in position at the perfect center.

Answer 1

You cannot use Auto Layout on the view that is used as a mask. That view it lives outside the normal view hierarchy. You do not add it to the view hierarchy by calling addSubview(_:), you only add it as a mask by setting it as the mask property of another view.
Because of that you have to set the label's frame directly to center your label. You also have to set it again everytime the frame of your masked view changed (e.g. if the user rotates the device). Because of that you have to set the label's frame in viewDidLayoutSubviews()
I tried to make it work by just setting the label's center to the view's center, but that does not work. Somehow the label does not get displayed. I could make it work by explicitly setting the labels size to its intrinsicContentSize. I guess this is because the label is used as a masked and never part of the view hierarchy.
Here is a working example. I took the liberty to change the naming from mask to maskedView to avoid confusion with the mask property ;-)
class ViewController: UIViewController {
var label = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .green
// Label
label.text = "Hello!"
label.font = UIFont.systemFont(ofSize: 50.0)
label.textColor = UIColor.white
// Mask
let maskedView = UIView()
maskedView.translatesAutoresizingMaskIntoConstraints = false
maskedView.backgroundColor = UIColor.blue
maskedView.mask = label
view.addSubview(maskedView)
// Constraints
maskedView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
maskedView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
maskedView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
maskedView.heightAnchor.constraint(equalTo: self.view.heightAnchor).isActive = true
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let labelHeight = label.intrinsicContentSize.height
let labelWidth = label.intrinsicContentSize.width
label.frame = CGRect(
x: view.center.x - labelWidth / 2,
y: view.center.y - labelHeight / 2,
width: labelWidth,
height: labelHeight
)
}
}
You could make the code inside viewDidLayoutSubviews() a bit shorter by setting label.textAlignment = .center
Then this is enough:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
label.frame = view.frame
}