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?

Margiemargin

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.

Forecast

This is the work only for using different images for specific language. for the flips the image developer can use the iOS 9.0 methods which is introduce for the Right To Left view layout is imageFlippedForRightToLeftLayoutDirection, this methods will flip the image in horizontal direction only. – Broeder

Answer 2

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

Heaviside

But, when the image is loading for the first time it is not changing as mirror, later it is working properly.. Why? – Tacky

is this in sim? I've noticed this when you change the language and the app is loaded. But if you have the correct language and then run the app it is ok. – Heaviside

solved. after uninstall and install, it's working properly – Tacky

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

Brittan

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;

Banting

That is one possible way, I was hoping there was a way to do it without having to add IBOutlets for each image I wanted to change. – Margiemargin

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.

Margiemargin

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.

Galactometer

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.

Desdemona