Is it possible to rotate an image in Storyboard or do you have to do it programmatically?

Question

Assume you have a triangle image you want to use at different angles (e.g., 180 degrees, 90 degrees).

Is it possible to rotate the triangle image within Storyboard, or do you need to do it programmatically?

Solution 1

You could probably create an IBDesignable & IBInspectable UIView subclass that had a rotation angle property, and applied a transform to the image it contained.

IBInspectable allows you to expose custom properties of your custom views in IB's Attributes inspector.

Making a view IBDesignable allows you to view a preview of your custom view object in IB.

Edit:

This is a very old thread, but I decided to implement a custom UIView that allows rotation, as I described. Since it's now 2021, I used Swift:

@IBDesignable class RotatableView: UIView {

    @objc @IBInspectable var rotationDegrees: Float = 0 {
        didSet {
            print("Setting angle to \(rotationDegrees)")
            let angle = NSNumber(value: rotationDegrees / 180.0 * Float.pi)
            layer.setValue(angle, forKeyPath: "transform.rotation.z")
        }
    }
}

That yields the following in Interface Builder:

Solution 2

It is possible to set layer.transform.rotation.z in User Defined Runtime Attributes. Check this answer: https://stackoverflow.com/a/32150954/2650588

Solution 3

Programmatically some thing like this can help:

//rotate rect
    myImageView.transform = CGAffineTransformMakeRotation(M_PI_2); //90 degree//rotation in radians

//For 180 degree use M_PI

Or make a macro like this:

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

and use this way:

CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(90));//here may be anything you want 45/90/180/270 etc.

More here : apple link

Solution 4

YES. You can this only in the Storyboard (Interface Builder) cause it's layer related properties.

Just click on your view, go to User Defined Runtime Attributes and add the key path like so:

NOTICE:

• The value is in radians. For instance, to rotate 90 degrees put 1.57.
• You will only see the changes during runtime.

View more solutions