创建 Trover 样式库 iOS Swift

Posted 2023-03-04

【中文标题】创建 Trover 样式库 iOS Swift

【英文标题】：Creating Trover Style Gallery iOS Swift

【发布时间】：2016-06-09 11:57:25

【问题描述】：

我正在尝试在我的 ios swift 应用程序中创建一个画廊，其风格类似于 Trover 所做的那样，所以基本上我想要一组图像，指定最大数量的图像以适合一行，然后我想要动态生成UIImageViews，其帧大小由代码确定，以创建下面的拼贴效果。我知道这可以在 android 中使用recyclerView 完成，但是我不确定在 iOS 中最好的方法是什么，我知道我可以使用 TableView、CollectionView 或 StackView 但是我不确定最简单的方法是什么这将是......我过去使用CollectionViews 的方式是它们具有CollectionViewCell 的静态大小，因此我不确定如何使它们适应这个目的。

【问题讨论】：

借助 UICollectionView，您可以使用自定义布局。从您的屏幕截图（我不使用该应用程序，简单推测）看来，只有 2 种线条，因此您甚至可能不必创建整个自定义布局。只需给出项目的大小，根据它的索引行（这里，我会说每4个单元格，它的大小相同），就足够了。

您是否建议让我们说一组照片是一个UICollectionViewCell 并且根据我想要的布局，我在该单元格内动态创建图像视图？例如，一个单元格可以有 2 个ImageViews 或 4 个ImageViews 等，我只是随机选择我想要的设计？

我为 UICollectionView 添加了一个示例代码（在 Objective-C 中，但逻辑应该是相同的，没有什么真正复杂的，除了可能是“模数”，但其余的看起来很像 Swift。

【参考方案1】：

从给出的图像推测，我们可以假设每4个项目，布局是相同的。所以我们可以使用UICollectionView，我们可以（见答案末尾的注释）只需要在Objective-C中用下面的代码覆盖collectionView:layout:sizeForItemAtIndexPath:，但逻辑是一样的在斯威夫特：

CGFloat wholeWidthAvailable = collectionView.frame.size-interspace; //Since we only show 2 item per line, there is only 1 interspace
CGFloat height;

switch (indexPath.row%2)

    case 0:
        height = 100;
        break;
    case 1:
        height = 200;
        break;
    default:
        break;

CGFloat width;
switch (indexPath.row%4)

    case 0:
        width = wholeWidthAvailable*2./5.;
        break;
    case 1:
        width = wholeWidthAvailable*3./5.;
        break;
    case 2:
        width = wholeWidthAvailable*3./5.;
        break;
    case 3:
        width = wholeWidthAvailable*2./5.;
        break;
    default:
        break;

return CGSizeMake(width, height);

注意： 代码没有经过测试（我这里写的，不知道是不是这样编译的）。 我明确写了两个 switch case，但它显然可以合二为一，因为模 2 和模 4 可以“连接”。 我选择了 2/5 和 3/5 来适应宽度（但你可以清楚地放出你喜欢的比例）。

【讨论】：

如果我想让它变得更复杂，例如有 4 种可能的布局，一个有 2 个图像视图，3、4 和 5 并在它们之间随机更改，在 collectionViewCell 中执行此操作会更容易吗类或在您上面建议的 collectionView 委托方法中