Rotating a view in layoutSubviews

Question

Background and goal

Goal: I want to rotate and flip a UITextView. (Why: see my previous question)

Problem: If I do the transform directly on the UITextView, the text layout gets messed up for some unknown reason.

Solution: Put the UITextView in a UIView container, and then do the transform on the container.

New problem: Auto Layout (or any sort of layout) on the rotated view becomes a major headache.

Proposed solution: Make a subclass of UIView that acts as an additional container for the rotated and flipped UIView. Auto Layout should then work on this custom view.

Current Problem

It works when everything first appears (UITextView has yellow background):

but when there is an orientation change, the following happens (blue is the subclassed UIView background, set in IB):

If I disable the rotationView.addSubview(textView) line, then the rotation container view (red) repositions itself just fine, even on an orientation change:

So the problem must be about where I am adding the UITextView. But how do I do it?

Code

class MongolTextView: UIView {

    // properties
    var rotationView: UIView!
    var textView: UITextView!

    // This method gets called if you create the view in the Interface Builder
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    // This method gets called if you create the view in code
    override init(frame: CGRect){
        super.init(frame: frame)
        self.setup()
    }

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

    func setup() {

        rotationView = UIView(frame: self.frame)
        rotationView.backgroundColor = UIColor.redColor()
        self.addSubview(rotationView)

        textView = UITextView(frame: CGRectZero)
        textView.backgroundColor = UIColor.yellowColor()
        textView.text = "This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text "

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // set the size of the rotation container view
        let width = self.bounds.width
        let height = self.bounds.height
        rotationView.frame = CGRect(origin: CGPoint(x: CGFloat(0), y: CGFloat(0)), size: CGSize(width: height, height: width))

        textView.frame = rotationView.bounds // Problem lines here???
        rotationView.addSubview(textView)    // Problem lines here???

        // rotate, translate, and flip the container view
        var rotation = CGAffineTransformMakeRotation(CGFloat(-M_PI_2))
        // the following translation repositions the top left corner at the origin of the superview
        var translation = CGAffineTransformMakeTranslation((rotationView.bounds.height / 2)-(rotationView.bounds.width / 2), (rotationView.bounds.width / 2)-(rotationView.bounds.height / 2))
        var rotationAndTranslation = CGAffineTransformConcat(rotation, translation)
        var transformPlusScale = CGAffineTransformScale(rotationAndTranslation, CGFloat(-1), CGFloat(1))

        rotationView.transform = transformPlusScale

    }
}

If I can't get this to work...

Although I have currently run up against a wall here, my next plan is to override drawRect() to do the transforms. This isn't my first choice, though, because performance is supposedly slowed down by doing this.

Gillis

Answer 1

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.

Gillis

Answer 2

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;

Schrimsher

Yes. The width and height of self.bounds stays the same. Good point about the transformation being applied twice. I'm not really sure how to fix this, though. – Gillis

Does the text of the UITextView need to change while the rotation is applied? Could you just snapshot it and rotate the snapshot instead? – Buggery

@Nick, The text doesn't need to change while the rotation is applied, but it does need to retain the scrollable properties of a UITextView. It seems to me like creating a bitmap would cause it to become unscrollable. – Gillis

@MarkoZadravec, I think the width and height always need to be swapped between self and the subview (for any orientation) because the subview is rotated 90 degrees from self. – Gillis

You confirm that width and height are the same when you rotate them, so in one case width is actual width, but in portrait mode width is actual height, and same for height. – Schrimsher