Flip UIImageViews for Right to Left Languages

Question

iOS automatically flips the entire ViewController when using a RTL language like Arabic and does a great job with most of the layout, especially text. The default behavior is to flip the layout but leave UIImageViews the same orientation (since you generally don't want to reverse images).

Is there a way to specify that some images should be flipped (such as arrows) when the phone is set to a RTL language?

Answer 1

iOS 9 includes the imageFlippedForRightToLeftLayoutDirection method that you can use, that automatically flips the image in a UIImageView when in an RTL localization.

Answer 2

The best solution I found to date is marking the image in the assets file as mirror.

Answer 3

We can use imageFlippedForRightToLeftLayoutDirection which returns flipped image if current language is RTL(right to left). i.e

Objective-c

UIImage * flippedImage = [[UIImage imageNamed:@"imageName"] imageFlippedForRightToLeftLayoutDirection];

Swift 3

let flippedImage = UIImage(named: "imageName")?.imageFlippedForRightToLeftLayoutDirection()

Source: Apple Docs

Answer 4

You have to manually flip the UIImages in the UIImageViews you want when the phone is set to a RTL language. This can be easily achieved with this code:

UIImage* defaultImage = [UIImage imageNamed:@"default.png"];
UIImage* flipImage = [UIImage imageWithCGImage:sourceImage.CGImage scale:1.0 orientation: UIImageOrientationUpMirrored];
myImageview.image = flipImage;

Answer 5

I ended up using localized images for the forward and back arrows. This had the advantage of not having to add code each place the image was used and gives the opportunity to clean up the arrows if there are gradients that don't work well flipped.

Answer 6

While we wait for iOS 9 improved right to left support you could create a UIImageView subclass and override setImage to mirror inside the images as @nikos-m suggests and calling super.image = flipImage.

That way you can easily set all the images views you want to flip using custom classes in Interface Builder instead of having to add IBOutlets.

Answer 7

Swift 5

If you want to individualize the image flip, you can register each image with the direction you want since the layout direction is a trait:

let leftToRight = UITraitCollection(layoutDirection: .leftToRight)
let rightToLeft = UITraitCollection(layoutDirection: .rightToLeft)
let imageAsset = UIImageAsset()
let leftToRightImage = UIImage(named: "leftToRightImage")!
let rightToLeftImage = UIImage(named: "rightToLeftImage")!
imageAsset.register(leftToRightImage, with: leftToRight)
imageAsset.register(rightToLeftImage, with: rightToLeft)

This is the same as configuring it in the asset catalogue as @SergioM answered.

Answer 8

You can try below code:

let image = RTLsupportBoolValue ? UIImage(named: "imagename")?.imageFlippedForRightToLeftLayoutDirection() : UIImage(named: "imagename")
            
imageView.image = image

imageFlippedForRightToLeftLayoutDirection() --> This method is used to flip the picture on the X axis. If the variable ie "RTLsupportBoolValue == true" comes, you will show the picture inverted. If it comes to "false", you will print the same image. The "image" variable holds this image and you set the ImageView.