在UICollectionView上从右向左对齐

问题描述 投票:46回答:9

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

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

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

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

任何帮助是极大的赞赏!

ios objective-c uicollectionview right-to-left uicollectionviewlayout
9个回答
79
投票

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

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

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

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

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

75
投票

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

YourCollectionView.semanticContentAttribute = UISemanticContentAttribute.forceRightToLeft

19
投票

除了Tawfik的回答:

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

Storyboard

关于这家酒店的更多信息:in this question


12
投票

从iOS 9开始,Collection Views根据这个WWDC video支持RTL。因此,不再需要创建RTL流布局(除非您已经使用自定义布局)。

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

enter image description here

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

enter image description here

但是有一个问题。当contentOffset.x == 0时,Collection View滚动位置位于Left边缘(错误)而不是Right边缘(正确)。有关详细信息,请参阅此stack article

一个解决方法是简单地将First项目滚动到.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)
    }
}

在我的测试项目中,我的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)
    }
}

要了解这一点,请查看RTL branch on this git repo。有关背景信息,请参阅此blog post and its comments

enter image description here


11
投票

对于任何试图在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)

6
投票

对于有同样问题的人:

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

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

或通过界面构建​​器:

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


3
投票

你可以使用iOS 11以来的这个:

extension UICollectionViewFlowLayout {

    open override var flipsHorizontallyInOppositeLayoutDirection: Bool {
        return true
    }

}

2
投票

通过更改flipsHorizontallyInOppositeLayoutDirectiondevelopmentLayoutDirection,我能够实现全屏RTL滚动,其中第一个项目一直向右,并且要到达最后一个单元格,用户将需要向左滚动。

像这样:

class RTLCollectionViewFlowLayout: UICollectionViewFlowLayout {

    override var flipsHorizontallyInOppositeLayoutDirection: Bool {
        return true
    }

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

1
投票

适用于Swift 4.2和iOS 9+

  1. 使用以下方法在viewDidLoad()中反转集合视图: myCollectionView.transform = CGAffineTransform(scaleX:-1,y:1)
  2. 使用以下方法在cellForItemAt中反向返回您的单元格(因为所有内容都已镜像): cell.transform = CGAffineTransform(scaleX:-1,y:1)

现在内容在右侧,滚动从右侧开始。

© www.soinside.com 2019 - 2024. All rights reserved.