Suragch Suragch - 6 months ago 75
Swift Question

Rotating a view in layoutSubviews

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.

enter image description here

Current Problem



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

enter image description here

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

enter image description here

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

enter image description here

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.

Answer

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.