How can you rotate text for UIButton and UILabel in Swift?
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
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)
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)
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 degreesCGFloat.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)