UICollectionView iOS 9 issue on project with RTL languages support

Question

It seems like Apple's new feature of auto-flip interface on RTL languages cause problems when using UICollectionView.

I used constraints of type Trailing/Leading for the collection view and they switched their values, as they should, on RTL language.

The problem is that the data actually presented is of the last indexPath in the collection's data source but the UIScrollView.contentOffset.x of the first cell is 0.

A proper behaviour would have been one of the following:

1. Displaying the first indexPath correctly and switching the direction of the scroll (to the right) - Best option
2. Not flipping the UI/Constraints so the presented-data / indexPath / scrollView.contentOffset.x will be synchronised - Option that disabling the RTL support.
3. Presenting cell and data of the last indexPath but fixing the scrollView.contentOffset.x to represent the last cell position also.

I guess Apple might fix it sometime in the future but meanwhile we'll have to use workarounds like reversing array and/or scrolling to the last object.

Answer 1

I was in a similar situation and found a solution for this. If you are using swift, add the following snippet to your project, and it will make sure that the bounds.origin always follows leading edge of the collection view.

extension UICollectionViewFlowLayout {

    open override var flipsHorizontallyInOppositeLayoutDirection: Bool {
        return true
    }
}

If you are using Objective-C, just subclass the UICollectionViewLayout class, and override flipsHorizontallyInOppositeLayoutDirection, and return true. Use this subclass as the layout object of your collection view.

Answer 2

I am late but if you don't want to create an extension because it will affect all the collection View in our app. Simply create your own custom class ie.

class customLayoutForLocalization : UICollectionViewFlowLayout{
    open override var flipsHorizontallyInOppositeLayoutDirection: Bool {
         return true
    } 
}

To use this class:

// your way of deciding on whether you need to apply this layout may vary depending on use of other tools like LanguageManager_iOS to handle multi-language support
if myCollectionView.effectiveUserInterfaceLayoutDirection == .rightToLeft  {
    let customLayout = customLayoutForRTL()
    // if your elements are variable size use the following line
    customLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    // if you want horizontal scroll (single line)
    customLayout.scrollDirection = .horizontal
    myCollectionView.collectionViewLayout = customLayout
}

Answer 3

There is one common solution for that problem that works for me, follow below steps to overcome that problem,

• Give the auto layout constraint as per your requirement and then from attribute inspector change the semantic control property of the collection view to Force right-to-left from the storyboard.

• Then open storyboard as source code and find for the “leading” attributes of your relevant collection view and replace that with the “left” and same for the “trailing” replace that with the “right”. Now you almost done.

• now that will give you result as per your requirement.

Answer 4

import UIKit

extension UICollectionViewFlowLayout {

    open override var flipsHorizontallyInOppositeLayoutDirection: Bool {
        return UIApplication.shared.userInterfaceLayoutDirection == UIUserInterfaceLayoutDirection.rightToLeft
    }

Answer 5

not pretty though simple math does the trick. (for horizontal collectionview)

- (void)switchSemanticDirection:(UISwitch*)sender {
    //TEST switch the semantic direction between LTR and RTL.
    if (sender.isOn) {
        UIView.appearance.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight;
    } else {
        UIView.appearance.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
    }

    [self.myContent removeFromSuperview];
    [self.view addSubview:self.myContent];
    
    //reload your collection view to apply RTL setting programmatically
    [self.list reloadData];
    //position your content into the right offset after flipped RTL
    self.list.contentOffset = CGPointMake(self.list.contentSize.width - self.list.contentOffset.x - self.list.bounds.size.width, 
    self.list.contentOffset.y);
}