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

【问题标题】：Dynamic Layout iOS with Collection View带有集合视图的动态布局 iOS
【发布时间】：2017-07-25 20:56:00
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

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

标签： ios swift xcode autolayout

【解决方案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 |高度任意

【讨论】：