如何同时保持图像的纵横比，而不剪裁创建动态调整大小的图像网格/砂浆？

Question

我需要在保持原始纵横比的同时动态地将图像放置在网格/砂浆视图中。基本上，我正在尝试实现类似于Adobe Lightroom的解决方案。

我最初尝试通过固定高度，根据剩余的行空间和图像比例动态更改单元格宽度来实现此目的。但是，由于我使用scaleAspectFit对图像进行缩放，这意味着有时一些图像被裁剪。

我的猜测是，我也将不得不动态地调整高度，但是我不知道怎么做。

我用来执行规范化过程的代码是：

var i = 0
while i < sizes.count {
    var maxWidth = collectionViewWidth // the width of the UICollectionView
    var rowWidth: CGFloat = 0.0
    var j = i
    while rowWidth < maxWidth, j < sizes.count {
        let belowThreshold = sizes[j].width < (maxWidth - rowWidth) * 1.30
        let remainsEnough = (maxWidth - rowWidth) / maxWidth > 0.3 && belowThreshold
        if belowThreshold || remainsEnough {
            rowWidth += sizes[j].width
            j += 1
        } else { break }
    }

    let spacing = CGFloat((j - i - 1) * 2)
    maxWidth -= spacing
    var newRowWidth: CGFloat = 0
    for l in i..<j {
        let x = (sizes[l].width * maxWidth) / rowWidth
        sizes[l].width = x.rounded(to: 3)
        newRowWidth += sizes[l].width
    }

    if newRowWidth >= maxWidth {
        let width = sizes[j-1].width - (newRowWidth - maxWidth).rounded(to: 3)
        sizes[j-1].width = width.rounded(to: 3)
    }

    i = j
}

更新1

下面是一个GitHub的URL与我现在有一个样本项目：https://github.com/abrahamduran/ios-mortar-view

Answer 1

我为您编写了起始布局。您应该验证我发布的所有代码。使用这样的自定义布局：

search('['+palavra.substr(i,1)+']')

自定义布局的代码。

let layout = CustomLayout()
layout.minimumLineSpacing = 4
layout.minimumInteritemSpacing = 4
collectionView.collectionViewLayout = layout
collectionView.backgroundColor = .lightGray

...
// Delegate

func collectionView(_ collectionView: UICollectionView, sizeForPhotoAtIndexPath indexPath: IndexPath) -> CGSize {
    return images[indexPath.row].size
}