How can you rotate text for UIButton and UILabel in Swift?

Question

How can you rotate text for UIButton and UILabel? 90 degrees, 180 degrees.

Note: Before you mark this as a duplicate, I am intentionally modelling my question as a Swift version of this one: How can you rotate text for UIButton and UILabel in Objective-C?

Hardecanute

Answer 1

I am putting my answer in a similar format to this answer.

Here is the original label:

Rotate 90 degrees clockwise:

yourLabelName.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2)

Rotate 180 degrees:

yourLabelName.transform = CGAffineTransform(rotationAngle: CGFloat.pi)

Rotate 90 degrees counterclockwise:

yourLabelName.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)

Do the same thing to rotate a button. Thankfully the touch events also get rotated so the button is still clickable in its new bounds without having to do anything extra.

yourButtonName.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2)

Notes:

Documentation for CGAffineTransform

The basic format is CGAffineTransform(rotationAngle: CGFloat) where rotationAngle is in radians, not degrees.

There are 2π radians in a full circle (360 degrees). Swift includes the useful constant CGFloat.pi.

• CGFloat.pi = π = 180 degrees
• CGFloat.pi / 2 = π/2 = 90 degrees

Auto Layout:

Auto layout does not work with rotated views. (See Frame vs Bounds for an explanation why.) This problem can be solved by creating a custom view. This answer shows how to do it for a UITextView, but it is the same basic concept for a label or button. (Note that you will have to remove the CGAffineTransformScale line in that answer since you don't need to mirror the text.)

Related

• How to do transforms on a CALayer?
• How to apply multiple transforms in Swift
• CTM transforms vs Affine Transforms in iOS (for translate, rotate, scale)

Hardecanute

I did the same for my imageview.But my image getting scaled (small or big).how to do for imageviews..? – Bartholomeus

Answer 2

If you do this a lot, you'll wan't to make an extension. Also this will allow you to rotate your view 0-360 degrees.

extension UIView {
    func rotate(degrees: CGFloat) {
        rotate(radians: CGFloat.pi * degrees / 180.0)
    }

    func rotate(radians: CGFloat) {
        self.transform = CGAffineTransform(rotationAngle: radians)
    }
}

Then you can simply call rotate on your views

myView.rotate(degrees: 90)

Shovelnose

Answer 3

swift

Rotate 90 degrees clockwise:

    var rotateLabel: UILabel = UILabel(frame: CGRectMake(100, 0, 28, 159))
    
    rotateLabel.textAlignment = .Right
    
    rotateLabel.text = "Hello!"
    
    self.view.addSubview(rotateLabel)
    
    rotateLabel.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_2))
    
    rotateLabel.frame = CGRectMake(100, 0, 28, 159)

Rotate 90 degrees counterclockwise:

    var rotateLabel: UILabel = UILabel(frame: CGRectMake(100, 0, 28, 159))
    
    rotateLabel.textAlignment = .Right
    
    rotateLabel.text = "Hello!"
    
    self.view.addSubview(rotateLabel)
    
    rotateLabel.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_2))
    
    rotateLabel.frame = CGRectMake(100, 0, 28, 159)

Alcock

you have to assign frame again?! – Ironsmith

far easier to do this: https://mcmap.net/q/23425/-rotate-uiview-around-center-where-origin-is-different-from-x-0-y-0 – Architectonic

Answer 4

I would suggest using extension with options of degrees and counter/clockwise

func rotate(degrees: Int , clockwise: Bool)
{
    let x  = 180 / degrees
    if (clockwise)
    {
        self.transform = CGAffineTransform(rotationAngle: CGFloat.pi / CGFloat(x))
    }
    else
    {
        self.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / CGFloat(x))
    }
}

I use it as extension UILabel {} but that is obviously up to you

Kymric

Answer 5

Adapted the answer from Ananthu R Krishnan to fit into Swift 3.1.

Rotate 90 degrees counterclockwise:

let rotateLabel: UILabel = UILabel(frame: CGRect(x:15, y:66, width:28, height:159))
rotateLabel.textAlignment = .right
rotateLabel.text = "TEXT"
self.view.addSubview(rotateLabel)
rotateLabel.transform = CGAffineTransform(rotationAngle: CGFloat(-(Double.pi / 2.0)))
rotateLabel.frame = CGRect(x:15, y:66, width:28, height:159)

Grassi

Answer 6

If you use a custom font you maybe need:

rotateLabel.sizeToFit()

Doubler