如何从 UICollectionViewFlowLayout 中删除换行符

Question

我正在尝试使用 UICollectionViewFlowLayout 为我的部分中的项目删除换行符。

我现在有

|header         |
|0-0 0-1 0-2 0-3|
|0-4 0-5        |

|header         |
|1-0 1-1 1-2 0-3|
|1-4 1-5        |

我需要：

|header         |
|0-0 0-1 0-2 0-3| 0-4 0-5    

|header         |
|1-0 1-1 1-2 1-3| 1-4 1-5  

所以用户可以水平滚动。在 iOS 上，我通过创建两个嵌套的 collectionView 来解决此问题，但在 tvOS 上，我无法复制该解决方案，因为我无法专注于内部单元格。

经过几次尝试，我在嵌套 UICollectionView 所在的 tableCell 上覆盖了 preferredFocusedView 变量：

override var preferredFocusedView: UIView? {
  return moviesCollection
}

此行为允许我在集合的内部元素之间水平滑动，但我无法垂直滑动以在表格单元格之间进行更改。

我有点迷茫，任何形式的帮助将不胜感激。

谢谢。

Answer 1

更新

这是一个显示最终结果的 GIF：

原创

我刚刚创建了一个测试 ViewController，这似乎工作正常。 基本上，我有一个带有垂直流布局的UICollectionView。 collectionView 的每个单元格都有自己的 UICollectionView 设置，并具有水平流布局。

“脱离行为”的唯一不便是水平流布局集合视图在返回时不会“记住”选定的项目，但可以通过一点点玩来解决。

希望对您有所帮助。这是我的代码：

class ViewController: UIViewController, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    override var preferredFocusEnvironments: [UIFocusEnvironment] {
        return [collectionView]
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - UICollectionViewDataSource

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCell(withReuseIdentifier: "ParentTestCell", for: indexPath)
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        return collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TestHeader", for: indexPath)
    }

}

// Parent cell - included in the vertical collection view & includes the horizontal collection view

class ParentTestCell: UICollectionViewCell, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    override var preferredFocusEnvironments: [UIFocusEnvironment] {
        return [collectionView]
    }

    // MARK: - UICollectionViewDataSource

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCell(withReuseIdentifier: "TestCell", for: indexPath)
    }

}

// Child cell - included in the horizontal collection view

class TestCell: UICollectionViewCell {

    override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        coordinator.addCoordinatedAnimations({ 
            if self.isFocused {
                self.backgroundColor = .red
            }
            else {
                self.backgroundColor = .blue
            }
        }, completion: nil)
    }

}

这是故事板结构：

Answer 2

只是一个建议，如果它可以帮助你。

1. 添加表格视图
2. 创建自定义 TableVeiwCell，其中包含具有水平滚动的单元格内的集合视图。
3. 对于您拥有的每个部分，将成为表格视图的行数
4. 对于行中的项目成为相应集合视图的项目数。

Answer 3

这可以通过自定义 UICollectionViewLayout 快速解决

继承 UICollectionViewLayout 并覆盖以下属性和方法

1. var collectionViewContentSize: CGSize
2. 函数准备（）
3. func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?

确保为每个单元格返回正确的帧

这是我的工作解决方案，它还方便地提供了 UICollectionViewFlowLayout 的一些属性（itemSize、minimumInteritemSpacing、minimumLineSpacing）。

您可能不需要更改任何内容，只需将其添加到您的项目中即可。

https://gist.github.com/kflip/52ec15ddb07aa830d583856909fbefd4

随意添加scrollDirection支持......它已经在两个方向上滚动了，但是如果一个部分应该显示为列而不是一行，您可能想要更改......

如果您需要更多基于 IndexPaths 的自定义（例如 CellSize），您还可以添加类似 FlowLayout 的协议功能

Answer 4

当使用UICollectionViewFlowLayout 时，UICollectionView 以非常具体的方式布置其单元格，我不确定是否可以使用集合视图进行这种行为，而不是创建自己的 UICollectionViewLayout。请参阅this guide，了解如何使用自定义布局制作 UIColloctionView。

我建议尝试使用嵌套的UITableViews 来解决问题。制作一个垂直滚动的表格视图，其中表格视图中的每个单元格都有自己的水平滚动表格视图。水平表格视图中的单元格将是用户可以选择的实际单元格。请参阅 this guide 了解如何执行此操作。

这也应该在 tvOS 中工作，因为焦点引擎应该查看单元子视图，并找到可聚焦的子视图。我希望它有帮助:)