Rotating a view in layoutSubviews

The problem with the code in the question seems to be that the transformations keep getting added to each other. In order to fix this, the solution is to reset the transformations every time, that is, set it to the identity transform.

rotationView.transform = CGAffineTransformIdentity

Here is a partial implementation that shows the key parts.

import UIKit
@IBDesignable class UIVerticalTextView: UIView {

    var textView = UITextView()
    let rotationView = UIView()

    var underlyingTextView: UITextView {
        get {
            return textView
        }
        set {
            textView = newValue
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect){
        super.init(frame: frame)
        self.setup()
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        self.setup()
    }

    func setup() {

        rotationView.backgroundColor = UIColor.redColor()
        textView.backgroundColor = UIColor.yellowColor()
        self.addSubview(rotationView)
        rotationView.addSubview(textView)

        // could also do this with auto layout constraints
        textView.frame = rotationView.bounds
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        rotationView.transform = CGAffineTransformIdentity // *** key line ***

        rotationView.frame = CGRect(origin: CGPointZero, size: CGSize(width: self.bounds.height, height: self.bounds.width))
        rotationView.transform = translateRotateFlip()
    }

    func translateRotateFlip() -> CGAffineTransform {

        var transform = CGAffineTransformIdentity

        // translate to new center
        transform = CGAffineTransformTranslate(transform, (self.bounds.width / 2)-(self.bounds.height / 2), (self.bounds.height / 2)-(self.bounds.width / 2))
        // rotate counterclockwise around center
        transform = CGAffineTransformRotate(transform, CGFloat(-M_PI_2))
        // flip vertically
        transform = CGAffineTransformScale(transform, -1, 1)

        return transform
    }
}

My most recent implementation is most likely to be found in this github link.


In debug mode check your width and height. I guess that they are the same after and before rotation. This way your screenshots will be expected.

The second thing is that you apply transformation twice.

you have rotation view -> you apply transformation --> you change frame on phone rotate -> previous transformation is still applied -> then you apply another transformation. Maybe your answer lays here.

EDIT :

Posible solutions :

You can detect witch orientation you have

 UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;

 if(orientation == 0) //Default orientation 
   //UI is in Default (Portrait) -- this is really a just a failsafe. 
 else if(orientation == UIInterfaceOrientationPortrait)
   //Do something if the orientation is in Portrait
 else if(orientation == UIInterfaceOrientationLandscapeLeft)
   // Do something if Left
 else if(orientation == UIInterfaceOrientationLandscapeRight)

and then decided how to handle this.

If orientation is portrait than you take

width = self.bound.size.width;
height = self.bound.size.height;

if not

height = self.bound.size.width;
width = self.bound.size.height;