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?

score 24 · Accepted Answer · answered Jul 14 '15 at 14:38

24

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

answered Jul 14 '15 at 14:38

wakachamo

1,723
1
12
18

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. – Sumeet Mourya Oct 05 '16 at 11:58

score 17 · Answer 2 · answered Jun 28 '20 at 23:47

17

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

answered Jun 28 '20 at 23:47

SergioM

1,595
1
15
27

But, when the image is loading for the first time it is not changing as mirror, later it is working properly.. Why? – Rashid KC Sep 27 '20 at 12:59
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. – SergioM Sep 28 '20 at 00:33
solved. after uninstall and install, it's working properly – Rashid KC Sep 28 '20 at 07:42

score 9 · Answer 3 · answered Nov 04 '17 at 18:36

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

score 2 · Answer 4 · edited Dec 21 '16 at 09:21

2

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;

edited Dec 21 '16 at 09:21

Axel Guilmin

11,454
9
54
64

answered Dec 03 '13 at 15:13

Nikos M.

13,685
4
47
61

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. – jhulst Dec 05 '13 at 00:11

score 1 · Answer 5 · answered Dec 07 '13 at 19:20

1

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.

answered Dec 07 '13 at 19:20

jhulst

395
1
4
9

score 0 · Answer 6 · answered Jun 11 '15 at 13:39

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.

score 0 · Answer 7 · answered Nov 18 '20 at 20:45

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.

Flip UIImageViews for Right to Left Languages

7 Answers7

Linked