CODEWITHSUNDEEP
iosobjective-cuiviewrotation
Diego Acosta
Diego Acosta

Reputation: 1737

Rotate UIView around its center keeping its size

I'm trying to rotate an UIView a few radians but after applying the transformation it doesn't look to be keeping its size. What's the proper way to achieve this?

Here's what I'm doing and what I get (Blue box with the arrow is the View I'm trying to rotate -- it should keep same aspect as red box behind):

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)

double rads = DEGREES_TO_RADIANS(240);
CGAffineTransform transform = CGAffineTransformRotate(CGAffineTransformIdentity, rads);
self.arrowView.transform = transform;

enter image description here

Thanks!

Upvotes: 72

Views: 85127

Answers (10)

Luca Davanzo
Luca Davanzo

Reputation: 21520

Swift + extension are your friends!!

// MARK: - UIView Extension
extension UIView {

    /**
       Rotate a view by specified degrees
       parameter angle: angle in degrees
     */

    func rotate(angle: CGFloat) {
        let radians = angle / 180.0 * CGFloat.pi
        let rotation = CGAffineTransformRotate(self.transform, radians);
        self.transform = rotation
    }

}

In this way, anywhere in your code:

let view = UIView(frame: CGRectMake(0, 0, 100, 100))
view.backgroundColor = UIcolor.redColor() 
view.rotate(angle:90)

Upvotes: 52

Lahiru Pinto
Lahiru Pinto

Reputation: 1681

Swift5

Rotate UIView Upside down

let degrees:CGFloat = -180 //angle to convert upside down
rotatingUI.transform = CGAffineTransform(rotationAngle: degrees * CGFloat(Double.pi)/180);

Upvotes: 3

Sunkas
Sunkas

Reputation: 9590

Swift 5:

extension UIView {
    func setTransformRotation(toDegrees angleInDegrees: CGFloat) {
        let angleInRadians = angleInDegrees / 180.0 * CGFloat.pi
        let rotation = self.transform.rotated(by: angleInRadians)
        self.transform = rotation
    }
}

Upvotes: 8

Bill Chan
Bill Chan

Reputation: 3455

Update Luca Davanzo's answer with Swift 4:

/**
 Rotate a view by specified degrees

 - parameter angle: angle in degrees
 */
func rotate(angle: CGFloat) {
    let radians = angle / 180.0 * CGFloat.pi
    let rotation = self.transform.rotated(by: radians)
    self.transform = rotation
}

Upvotes: 28

Bruno Delgado
Bruno Delgado

Reputation: 594

On Swift 3:

let degrees: CGFloat = -90
let radians = CGFloat(__sinpi(degrees.native/180.0))
view.transform = CGAffineTransform(rotationAngle: radians)

I'm using -90 because of this specific part of the documentation about the rotationAngle you have to pass to CGAffineTransform:

The angle, in radians, by which this matrix rotates the coordinate system axes. In iOS, a positive value specifies counterclockwise rotation and a negative value specifies clockwise rotation.

Upvotes: 2

Shaheen Ghiassy
Shaheen Ghiassy

Reputation: 7517

I avoid using macros unless necessary. This works perfectly well

float degrees = 20; //the value in degrees
view.transform = CGAffineTransformMakeRotation(degrees * M_PI/180);

Upvotes: 63

jrturton
jrturton

Reputation: 119242

You're probably hitting a problem with Autolayout. You probably have constraints on the rotated view pinning it to the edges of the superview. When the transform is applied, Autolayout is updating the view's size to still fit within the superview.

You can experiment with different constraints (e.g. pinning the centre of the view to the centre of another view, and pinning the width and height to constant values) or turn Autolayout off for the rotated view, or, if these don't work or don't suit your needs, use a container view which is laid out under Autolayout, and add your rotating view to this, without using Autolayout.

This can only be done in code - you can make individual views subject to Autolayout or not by setting translatesAutoresizingMasksIntoConstraints to NO (Autolayout on) or YES (Autolayout off). You'll need to set the appropriate autoresizing masks if you switch a view from one to the other.

Upvotes: 32

Schrodingrrr
Schrodingrrr

Reputation: 4271

The CGAffineTransformRotate transformation rotates from an existing affine transform. The fact that you are using CGAffineTransformIdentity might be the issue. You must specify the current transform of your view.

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
...
double rads = DEGREES_TO_RADIANS(240);
CGAffineTransform transform = CGAffineTransformRotate(self.arrowView.transform, rads);
self.arrowView.transform = transform;

Also, you might want to consider:

self.arrowView.transform = CGAffineTransformMakeRotation(rads);

EDIT : If you can, share what you kind of transformation (animated/inanimate , single/iterative) you want to achieve. I believe there might be a better, optimized way of doing this.

Upvotes: 12

Mike
Mike

Reputation: 481

To my mind you need to calculate the center of your triangle and rotate around this point. Now you rotate the arrow around the center of your square.

See: One step affine transform for rotation around a point?

I Hope it will help you.

Upvotes: 0

Abhinav
Abhinav

Reputation: 38142

Try with this code:

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)

double rads = DEGREES_TO_RADIANS(240);
self.arrowView.layer.transform = CATransform3DMakeRotation(rads, 0, 0, 1);

Upvotes: 6

Related Questions