如何使用swift 4显示像facebook上传图片这样的collectionView？

Posted 2023-03-14

【中文标题】如何使用swift 4显示像facebook上传图片这样的collectionView？

【英文标题】：How to show a collectionView like facebook upload image using swift 4?

【发布时间】：2018-04-30 11:26:25

【问题描述】：

您好，我想完全按照上图显示 collectionView。我知道它负责 UICollectionViewFlowLayout，但无法做到。非常感谢您的帮助。这是我的代码

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
     let yourWidth = (collectionView.bounds.width - 4) / 3.0
     let yourHeight = yourWidth
     return CGSize(width: yourWidth, height: yourHeight)

【问题讨论】：

那么两个项目然后三个？

请查看THIS ANSWER。他们在那里提到了为什么collectionView.bounds.width 它总是会返回相同的数字 600px。他们还给出了一个清晰的例子，你需要做什么才能获得正确的宽度。我希望我能帮上一点忙 :)

【参考方案1】：

你的答案在你的问题中，兄弟缺少一些条件

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

        switch indexPath.item 
        case 0,1:
            return CGSize(width: (UIScreen.main.bounds.width - 16) / 2, height: (UIScreen.main.bounds.width - 16) / 2)
        default:
            return CGSize(width: (UIScreen.main.bounds.width - 32) / 3, height:  (UIScreen.main.bounds.width) / 3)
        
    

【讨论】：

非常感谢@JeeVan TiWari 先生，一切都会好起来的。

先生，我上传了一张图片。你能告诉我如何显示像该图像这样的集合视图。

可以通过 uicollectionviewlayout 来完成 点此链接了解iosapptemplates.com/blog/swift-programming/…

【参考方案2】：

如果这是您正在寻找的东西，那么使用UICollectionViewFlowLayout 很容易做到

我使用的单元格是 1:1 的比例，所以宽度和高度相同，您可以使用填充和项目间距等来获得所需的效果。

您的控制器必须符合UICollectionViewDelegateFlowLayout 协议

在我的测试应用中，我执行了以下操作：

override func viewDidLoad() 
    let layout = UICollectionViewFlowLayout()
    layout.minimumLineSpacing = 5
    layout.minimumInteritemSpacing = 5
    let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "ident")

    view.addSubview(collectionView)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let item = indexPath.item
    let width = collectionView.bounds.size.width
    let padding:CGFloat = 5
    if item < 2 
        let itemWidth:CGFloat = (width - padding) / 2.0
        return CGSize(width: itemWidth, height: itemWidth)
     else 
        let itemWidth:CGFloat = (width - 2 * padding) / 3.0
        return CGSize(width: itemWidth, height: itemWidth)
    


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    return 5


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ident", for: indexPath)
    cell.backgroundColor = .red
    return cell

【讨论】：

是的，我想要这样。我正在检查，先生

先生，我上传了一张图片。你能告诉我如何显示像该图像这样的集合视图。

为此，您必须创建一个自定义 UICollectionViewLayout 类，其中包含所有必须覆盖的方法...相当多的工作:)