在UICollectionView上从右向左对齐

时间:2022-06-25 09:25:33

this is a pretty straightforward question, but I haven't been able to find a definitive answer to it on SO (if I missed it, please correct me).

这是一个非常直截了当的问题,但我无法在SO上找到明确的答案(如果我错过了,请纠正我)。

Basically, my question is: Is it possible to align UICollectionView row contents from right to left instead of from left to right?

基本上,我的问题是:是否可以从右到左而不是从左到右对齐UICollectionView行内容?

In my research I've seen answers suggesting subclassing UICollectionViewFlowLayout, but I haven't been able to find an example where one was created for right-alignment.

在我的研究中,我看到了建议子类化UICollectionViewFlowLayout的答案,但是我还没有找到一个为右对齐创建一个例子。

My goal is to have 2 collection views set up like this:

我的目标是设置2个集合视图,如下所示:

在UICollectionView上从右向左对齐

Any help is greatly appreciated!

任何帮助是极大的赞赏!

6 个解决方案

#1


71  

You can get similar result by performing a transform on the collection view and reverse the flip on its content:

您可以通过对集合视图执行转换并反转其内容的翻转来获得类似的结果:

First when creating the UICollectionView I performed a horizontal flip on it:

首先,在创建UICollectionView时,我在其上执行了水平翻转:

[collectionView_ setTransform:CGAffineTransformMakeScale(-1, 1)];

Then subclass UICollectionViewCell and in here do the same horizontal flip on its contentView:

然后子类UICollectionViewCell并在这里对其contentView执行相同的水平翻转:

[self.contentView setTransform:CGAffineTransformMakeScale(-1, 1)];

#2


48  

Without doing any Xtransform to the collection view, simply forced RTL:

没有对集合视图进行任何Xtransform,只需强制RTL:

YourCollectionView.semanticContentAttribute = UISemanticContentAttribute.forceRightToLeft

#3


11  

For anybody trying to achieve Right to Left layout of UICollectionView in Swift

对于任何试图在Swift中实现UICollectionView的Right to Left布局的人

//in viewDidLoad
    YourCollectionView.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

//in cellForItemAtIndexPath
    cell.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

#4


11  

As of iOS 9, Collection Views support RTL according to this WWDC video. So it's no longer necessary to create an RTL flow layout (unless you're already using a custom layout).

从iOS 9开始,集合视图根据此WWDC视频支持RTL。因此,不再需要创建RTL流布局(除非您已经使用自定义布局)。

Select: Edit Scheme... > Options > Run > Application Language > Right to Left Pseudolanguage

选择:编辑方案...>选项>运行>应用程序语言>从右到左伪语言

在UICollectionView上从右向左对齐

When you build to Simulator, text will be right-aligned, and your Collection View will be ordered from Right to Left.

当您构建到模拟器时,文本将右对齐,并且您的集合视图将从右到左排序。

在UICollectionView上从右向左对齐

There's a problem though. When contentOffset.x == 0, the Collection View scroll position is at the Left edge (wrong) instead of the Right edge (correct). See this stack article for details.

但是有一个问题。当contentOffset.x == 0时,Collection View滚动位置位于Left edge(错误)而不是Right edge(正确)。请参阅此堆栈文章了解详细信息

One workaround is to simply scroll the First item to the .Left (There's a gotcha -- .Left is actually on the Right, or Leading edge):

一种解决方法是简单地将第一项滚动到.Left(有一个问题 - .Left实际上在右边或前沿):

override func viewDidAppear(animated: Bool) {
    if collectionView?.numberOfItemsInSection(0) > 0  {
        let indexPath = NSIndexPath(forItem: 0, inSection: 0)
        collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: .Left, animated: false)
    }
}

In my test project, my Collection View was nested inside a Table View Cell, so I didn't have access to viewDidAppear(). So instead, I ended up hooking into drawRect():

在我的测试项目中,我的Collection View嵌套在Table View Cell中,因此我无法访问viewDidAppear()。所以相反,我最终挂钩到drawRect():

class CategoryRow : UITableViewCell {
    @IBOutlet weak var collectionView: UICollectionView!

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        scrollToBeginning()
    }

    override func prepareForReuse() {
        scrollToBeginning()
    }

    func scrollToBeginning() {
        guard collectionView.numberOfItems(inSection: 0) > 0 else { return }
        let indexPath = IndexPath(item: 0, section: 0)
        collectionView.scrollToItem(at: indexPath, at: .left, animated: false)
    }
}

To see this in action, check out the RTL branch on this git repo. And for context, see this blog post and its comments.

要查看此操作,请查看此git repo上的RTL分支。有关上下文,请参阅此博客文章及其评论。

在UICollectionView上从右向左对齐

#5


10  

In addition to Tawfik's answer:

除了Tawfik的回答:

You can also set UICollectionView's Semantic property via Interface Builder:

您还可以通过Interface Builder设置UICollectionView的语义属性:

在UICollectionView上从右向左对齐

More about this property: in this question

关于这个属性的更多信息:在这个问题

#6


6  

For anyone who has the same question:

对于有同样问题的人:

I ended up using the UICollectionViewRightAlignedLayout library that @chinttu-roxen-ramani recommended. You can either set it with code:

我最终使用了@ chinttu-roxen-ramani推荐的UICollectionViewRightAlignedLayout库。您可以使用代码设置它:

self.collectionView.collectionViewLayout = [[UICollectionViewRightAlignedLayout alloc] init];

or through interface builder:

或通过界面构建​​器:

在UICollectionView上从右向左对齐

I ended up making a couple modifications to the library, but overall it works great.

我最终对图书馆进行了一些修改,但总的来说它很有效。

#1


71  

You can get similar result by performing a transform on the collection view and reverse the flip on its content:

您可以通过对集合视图执行转换并反转其内容的翻转来获得类似的结果:

First when creating the UICollectionView I performed a horizontal flip on it:

首先,在创建UICollectionView时,我在其上执行了水平翻转:

[collectionView_ setTransform:CGAffineTransformMakeScale(-1, 1)];

Then subclass UICollectionViewCell and in here do the same horizontal flip on its contentView:

然后子类UICollectionViewCell并在这里对其contentView执行相同的水平翻转:

[self.contentView setTransform:CGAffineTransformMakeScale(-1, 1)];

#2


48  

Without doing any Xtransform to the collection view, simply forced RTL:

没有对集合视图进行任何Xtransform,只需强制RTL:

YourCollectionView.semanticContentAttribute = UISemanticContentAttribute.forceRightToLeft

#3


11  

For anybody trying to achieve Right to Left layout of UICollectionView in Swift

对于任何试图在Swift中实现UICollectionView的Right to Left布局的人

//in viewDidLoad
    YourCollectionView.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

//in cellForItemAtIndexPath
    cell.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

#4


11  

As of iOS 9, Collection Views support RTL according to this WWDC video. So it's no longer necessary to create an RTL flow layout (unless you're already using a custom layout).

从iOS 9开始,集合视图根据此WWDC视频支持RTL。因此,不再需要创建RTL流布局(除非您已经使用自定义布局)。

Select: Edit Scheme... > Options > Run > Application Language > Right to Left Pseudolanguage

选择:编辑方案...>选项>运行>应用程序语言>从右到左伪语言

在UICollectionView上从右向左对齐

When you build to Simulator, text will be right-aligned, and your Collection View will be ordered from Right to Left.

当您构建到模拟器时,文本将右对齐,并且您的集合视图将从右到左排序。

在UICollectionView上从右向左对齐

There's a problem though. When contentOffset.x == 0, the Collection View scroll position is at the Left edge (wrong) instead of the Right edge (correct). See this stack article for details.

但是有一个问题。当contentOffset.x == 0时,Collection View滚动位置位于Left edge(错误)而不是Right edge(正确)。请参阅此堆栈文章了解详细信息

One workaround is to simply scroll the First item to the .Left (There's a gotcha -- .Left is actually on the Right, or Leading edge):

一种解决方法是简单地将第一项滚动到.Left(有一个问题 - .Left实际上在右边或前沿):

override func viewDidAppear(animated: Bool) {
    if collectionView?.numberOfItemsInSection(0) > 0  {
        let indexPath = NSIndexPath(forItem: 0, inSection: 0)
        collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: .Left, animated: false)
    }
}

In my test project, my Collection View was nested inside a Table View Cell, so I didn't have access to viewDidAppear(). So instead, I ended up hooking into drawRect():

在我的测试项目中,我的Collection View嵌套在Table View Cell中,因此我无法访问viewDidAppear()。所以相反,我最终挂钩到drawRect():

class CategoryRow : UITableViewCell {
    @IBOutlet weak var collectionView: UICollectionView!

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        scrollToBeginning()
    }

    override func prepareForReuse() {
        scrollToBeginning()
    }

    func scrollToBeginning() {
        guard collectionView.numberOfItems(inSection: 0) > 0 else { return }
        let indexPath = IndexPath(item: 0, section: 0)
        collectionView.scrollToItem(at: indexPath, at: .left, animated: false)
    }
}

To see this in action, check out the RTL branch on this git repo. And for context, see this blog post and its comments.

要查看此操作,请查看此git repo上的RTL分支。有关上下文,请参阅此博客文章及其评论。

在UICollectionView上从右向左对齐

#5


10  

In addition to Tawfik's answer:

除了Tawfik的回答:

You can also set UICollectionView's Semantic property via Interface Builder:

您还可以通过Interface Builder设置UICollectionView的语义属性:

在UICollectionView上从右向左对齐

More about this property: in this question

关于这个属性的更多信息:在这个问题

#6


6  

For anyone who has the same question:

对于有同样问题的人:

I ended up using the UICollectionViewRightAlignedLayout library that @chinttu-roxen-ramani recommended. You can either set it with code:

我最终使用了@ chinttu-roxen-ramani推荐的UICollectionViewRightAlignedLayout库。您可以使用代码设置它:

self.collectionView.collectionViewLayout = [[UICollectionViewRightAlignedLayout alloc] init];

or through interface builder:

或通过界面构建​​器:

在UICollectionView上从右向左对齐

I ended up making a couple modifications to the library, but overall it works great.

我最终对图书馆进行了一些修改,但总的来说它很有效。