XLPagerTabStrip icon indicating copy to clipboard operation
XLPagerTabStrip copied to clipboard

Right to left support

Open hrsalehi opened this issue 7 years ago • 22 comments

Hi, I just added pager tab strip into one of my controllers and my app local is RTL but the scroll view does not work correctly and since tabs are populated from right to left but controllers populated from left to the right. To test that just change app default language to one of the RTL languages such as Arabic ,Farsi or Hebrew

hrsalehi avatar Dec 04 '16 11:12 hrsalehi

Hello I changed to español and works perfectly, Can you share the code?

chandanch avatar Dec 05 '16 09:12 chandanch

Isn't español a LTR language? I meant for occasions where view direction changes (mirror) to right to left.

hrsalehi avatar Dec 05 '16 09:12 hrsalehi

I will check for LTR Language(Arabic) and see if it works

chandanch avatar Dec 05 '16 09:12 chandanch

In summary the problem is the tabs works correctly but the scroll view still populate view from left to the right so the rightmost tab show the leftmost view and so on ...

hrsalehi avatar Dec 05 '16 09:12 hrsalehi

@hrsalehi Do you have time to look at it and find out a solution?

mtnbarreto avatar Jan 24 '17 16:01 mtnbarreto

try setting your main ScrollView for PagerTabStrip i.e(container view) view semantic to : Force-Right-To-Left and see if it solves the problem screen shot 2017-02-14 at 4 33 02 pm

mohammadghk avatar Feb 14 '17 13:02 mohammadghk

Setting force Right-to-Left semantic on the containerView (UIScrollView) did not solve the issue 👎 Any suggestion that might fix this issue please?

musbaalbaki avatar May 23 '17 20:05 musbaalbaki

@santiagofm Do you think anything could be done on this one please?

musbaalbaki avatar May 24 '17 14:05 musbaalbaki

One solution is to reverse the tabs array before setting it to the controller @musbaalbaki

mohammadghk avatar May 27 '17 14:05 mohammadghk

Hi hrsalehi, Do you solve this issue?

Thank you

nadagamal avatar Jun 06 '17 12:06 nadagamal

Thanks @mohammadghk, that is actually what I ended up doing. However I am still looking for a cleaner approach using the native iOS RTL support

musbaalbaki avatar Jun 09 '17 06:06 musbaalbaki

since I am using autolayout, the tabs section automatically adjusted in RTL language. Now the problem I am facing is that the view controllers slide in from right side in Arabic which is basically opposite.

Abdul-Hannan avatar Aug 09 '17 14:08 Abdul-Hannan

hi, I have the same problem. Is it a solution Thank you

dajdouj10 avatar Nov 07 '17 13:11 dajdouj10

This is not a proper solution but after way too many hours trying to solve this problem, this actually solved it. Add these lines inside viewDidLoad method in PagerTabStripViewController

    if #available(iOS 9.0, *) {
        if UIView.userInterfaceLayoutDirection(for: view.semanticContentAttribute) == .rightToLeft {
           print("arabic")
            containerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))
            for controller in viewControllers
            {
                controller.view.transform =  CGAffineTransform(rotationAngle: CGFloat(Double.pi));
                
            }
        }
        else
        {
            print("English")
        }
    } else {
        // Fallback on earlier versions
    }

AdnanMajeed06 avatar May 16 '18 06:05 AdnanMajeed06

This is not a proper solution but after way too many hours trying to solve this problem, this actually solved it. Add these lines inside viewDidLoad method in PagerTabStripViewController

    if #available(iOS 9.0, *) {
        if UIView.userInterfaceLayoutDirection(for: view.semanticContentAttribute) == .rightToLeft {
           print("arabic")
            containerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))
            for controller in viewControllers
            {
                controller.view.transform =  CGAffineTransform(rotationAngle: CGFloat(Double.pi));
                
            }
        }
        else
        {
            print("English")
        }
    } else {
        // Fallback on earlier versions
    }

Thanks

iMostafaSh avatar Jan 21 '19 07:01 iMostafaSh

I used @AdnanMajeed06 solution by adding the transform function in ViewDidLoad after super.viewDidLoad and without reversing the tabs array by extending UICollectionViewFlowLayout like so:

extension UICollectionViewFlowLayout {

	override open var flipsHorizontallyInOppositeLayoutDirection: Bool {
		return true
	}

	override open var developmentLayoutDirection: UIUserInterfaceLayoutDirection {
		return UIUserInterfaceLayoutDirection.rightToLeft
	}
}

The tabs start from right to left and the scrollview direction is working like it supoosed to do in RTL

alielsokary avatar Nov 02 '19 15:11 alielsokary

I ended up with another similar solution, which fixes the unexpected rotation if implemented using @AdnanMajeed06 solution.

My solution:

// Add at the end of `viewDidLoad` of `PagerTabStripViewController`
if UIView.userInterfaceLayoutDirection(for: view.semanticContentAttribute) == .rightToLeft {
    containerView.transform = CGAffineTransform(scaleX: -1, y: 1)
    for controller in viewControllers {
        controller.view.transform = CGAffineTransform(scaleX: -1, y: 1)
    }
}

It works fine with RTL and LTR

mixdesign avatar Dec 05 '19 18:12 mixdesign

Nothing works for me and this bug is still open, any new solution here?

higher-faster-better avatar Oct 08 '20 09:10 higher-faster-better

Any solution for this issue

AbdelrahmanElabd avatar Apr 28 '21 12:04 AbdelrahmanElabd

stuck in the same issue ...

Wahab-Khan avatar Aug 03 '21 12:08 Wahab-Khan

This solution works like a charm

Just add this class to your code RTLBaseButtonBarPagerTabStripViewController, and use it instead of normal BaseButtonBarPagerTabStripViewController

class RTLBaseButtonBarPagerTabStripViewController<ButtonBarCellType: UICollectionViewCell>: BaseButtonBarPagerTabStripViewController<ButtonBarCellType> {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Fix RTL scrolling issue
        if UIView.userInterfaceLayoutDirection(for: view.semanticContentAttribute) == .rightToLeft {
            containerView.transform = CGAffineTransform(scaleX: -1, y: 1)
        }
    }
    
    // Fix RTL scrolling issue
    override func updateContent() {
        super.updateContent()
        
        if UIView.userInterfaceLayoutDirection(for: view.semanticContentAttribute) == .rightToLeft, viewControllers[currentIndex].view.transform.a != -1 {
            viewControllers[currentIndex].view.transform = CGAffineTransform(scaleX: -1, y: 1)
        }

    }
            
}

Dev-Khaled avatar Feb 07 '22 16:02 Dev-Khaled

for 3 or less than thre tabs follwing code works fine for me ... self.buttonBarView.semanticContentAttribute = GeneralMethods.getSelectedLanguage() == .arabic ? .forceRightToLeft : .forceLeftToRight

but for more than three tabs above code not working... so I change the logic... XLPagerTabStrip uses CollectionView for top buttons known as buttonBarView ... So I created a class with name ArabicCollectionFlow

class ArabicCollectionFlow: UICollectionViewFlowLayout { override var flipsHorizontallyInOppositeLayoutDirection: Bool { return GeneralMethods.getSelectedLanguage() == .english ? false : true//AppLanguage.switchToRTL } }

and assign the class to 'buttonBarView'

   `let collectionLayout = ArabicCollectionFlow()
    collectionLayout.scrollDirection = .horizontal
    self.buttonBarView.collectionViewLayout = collectionLayout`

Wahab-Khan avatar Jun 27 '22 07:06 Wahab-Khan