CATransform3DMakeRotation frame - ios

Question

I have a custom view MyView (red) that contains one subview MySubView (blue). I want to rotate the subview around its center.
My problem is that when I setup the MySubview using autolayout, the rotation works fine:
but when I set the frame of the subview (without autolayout) the rotation distorts the view:
In the MySubview class I expose a property that sets the rotation as follows
var rotateAngle: Int = 0 {
didSet {
let measurement = Measurement(value: Double(rotateAngle), unit: UnitAngle.degrees)
let radians = measurement.converted(to: UnitAngle.radians).value
layer.transform = CATransform3DMakeRotation(CGFloat(radians), 0.0, 0.0, 1.0)
}
}
In the MyView, the autolayout is set using
subview.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
subview.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
subview.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.5),
subview.centerXAnchor.constraint(equalTo: centerXAnchor),
subview.centerYAnchor.constraint(equalTo: centerYAnchor),
])
When I set it without using autolayout, I simply set the subview frame
override func layoutSubviews() {
super.layoutSubviews()
subview.frame = CGRect(origin: CGPoint(x: frame.width / 4, y: frame.height / 4), size: CGSize(width: frame.width / 2, height: frame.height / 2))
}
The reason I don't want to use autolayout is because in the real app, I have hundreds of view refreshed quite often which performs better without autolayout.
Here is a complete listing that
class RotateViewController: UIViewController {
#IBOutlet var myView: MyView!
#IBOutlet var slider: UISlider!
override func viewDidLoad() {
myView = MyView()
view.addSubview(myView)
myView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
myView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
myView.widthAnchor.constraint(equalToConstant: 60),
myView.heightAnchor.constraint(equalToConstant: 60)
])
}
#IBAction func sliderValueChanged() {
myView.subview.rotateAngle = Int(slider.value)
}
}
class MySubView: UIView {
var rotateAngle: Int = 0 {
didSet {
let measurement = Measurement(value: Double(rotateAngle), unit: UnitAngle.degrees)
let radians = measurement.converted(to: UnitAngle.radians).value
layer.transform = CATransform3DMakeRotation(CGFloat(radians), 0.0, 0.0, 1.0)
}
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .blue
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
backgroundColor = .blue;
}
}
class MyView: UIView {
let useAutoLayout = false
var subview = MySubView()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(subview)
backgroundColor = .red
setupConsraints()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
addSubview(subview)
backgroundColor = .red
setupConsraints()
}
override func layoutSubviews() {
super.layoutSubviews()
if useAutoLayout {
return
}
subview.frame = CGRect(origin: CGPoint(x: frame.width / 4, y: frame.height / 4), size: CGSize(width: frame.width / 2, height: frame.height / 2))
}
private func setupConsraints() {
if !useAutoLayout {
return
}
subview.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
subview.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
subview.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.5),
subview.centerXAnchor.constraint(equalTo: centerXAnchor),
subview.centerYAnchor.constraint(equalTo: centerYAnchor),
])
}
}

Answer 1

This because of re-run of this
override func layoutSubviews() {
super.layoutSubviews()
if(once)
{
subview.frame = CGRect(origin: CGPoint(x: frame.width / 4, y: frame.height / 4), size: CGSize(width: frame.width / 2, height: frame.height / 2))
print(subview.frame)
once = false
}
}

Answer 2

The problem is that you're constantly resetting the frame of the view, which is throwing off the transform. In MyView update setupConsraints() i.e.
private func setupConsraints() {
if !useAutoLayout {
subview.frame = CGRect(origin: CGPoint(x: frame.width / 4, y: frame.height / 4), size: CGSize(width: frame.width / 2, height: frame.height / 2))
return
}
subview.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
...
])
}
and then you can delete the layoutSubviews() function altogether.

Answer 3

After reading the docs of UIView I believe that the root cause is that the frame becomes invalid after setting the transform property to something else that identity:
If the transform property is not the identity transform, the value of this property is undefined and therefore should be ignored.
So instead of using the frame of the rotated view, I can use its bounds to set it up:
override func layoutSubviews() {
super.layoutSubviews()
subview.bounds.size = CGSize(width: frame.width / 2, height: frame.height / 2)
subview.center = CGPoint(x: frame.width / 2, y: frame.height / 2)
}