带有集合视图的动态布局 iOS

Posted 2023-03-14

【中文标题】带有集合视图的动态布局 iOS

【英文标题】：Dynamic Layout iOS with Collection View

【发布时间】：2017-07-25 20:56:00

【问题描述】：

这可能是一个简单的问题——我是 ios 开发新手。

我有一个带有收藏视图的主页，其中有四个单元格在纵向模式下占据整个屏幕（左上角、右上角、左下角、右下角）。在横向模式下，我希望所有四个单元格并排排列。

Collection View 是使用正确的布局吗？我应该使用 Autoresizing 来执行此操作，还是必须使用其他一些布局约束？

谢谢！

【问题讨论】：

我会将前两个视图放在一个水平堆栈视图中，将后两个视图放在另一个水平堆栈视图中，然后将两个堆栈视图放在一个外部堆栈视图中，该视图在横向和垂直之间切换/肖像

【参考方案1】：

UICollectionView 是要使用的正确布局。 您可以使用以下内容进行布局

    func collectionView(collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(4 - 1))
    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(4))
    return CGSize(width: size, height: size)

您可以按照以下方式在视图控制器中使用它

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout 

@objc(collectionView:layout:sizeForItemAtIndexPath:)
func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize 

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(4 - 1))
    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(4))
    return CGSize(width: size, height: size)

【讨论】：

这个函数应该在哪里？

在您的视图控制器中，我编辑了答案，请检查

【参考方案2】：

它应该是 UIStackView 和 Sizeclasses 之间的合并

stackviews 必须有填充均匀分布。

默认选择的stackview必须有axis vertical，但是你应该添加横轴sizeclass width regular |高度任意