我如何使我的UICollectionView返回3列，它們之間的間距為1像素，就像instagram一樣？ 迅速

Question

我在UIViewController使用UICollectionViewDelegate和UICollectionViewDataSource進行了UICollectionViewDelegate ，並且不知道如何像Instagram一樣布局單元格。

extension ProfileViewController: UICollectionViewDelegate, UICollectionViewDataSource {

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return userMedias.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as? MediaCollectionViewCell else { return MediaCollectionViewCell() }
        cell.userMedia = userMedias[indexPath.row]
        return cell
    }

    // MARK: - Navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "toMediaDetail" {
            guard let mediaDetailViewController = segue.destination as? MediaDetailViewController,
                let indexPath = collectionView.indexPathsForSelectedItems?.first else { return }

            let userMedia = self.userMedias[indexPath.row]

            mediaDetailViewController.userMedia = userMedia
        }
    }
}

Answer 1

不確定是否使用情節提要。 如果使用情節提要，可以在情節提要中配置單元格大小。 通過使用UIEdgeInsetsMake（0，0，1，1）設置insetForSectionAtIndex，它應該能夠在單元格之間給您1 px的空間。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(0, 0, 1, 1)
}

UICollection單元格之間有1px的間距：

希望這會有所幫助。

Answer 2

我不保證這些功能會起作用，但是要獲得結果，需要使用這些功能。 您可能只需要前兩個功能之一，而第三個功能是可選的。 您可以在這里獲得許多不同類型的結果。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionView, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 1
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(1, 1, 1, 1)
}

// This function may or may not be required depending 
// on what data you are using to populate the collection view
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    let collectionViewRect: CGRect = collectionView.bounds
    let collectionViewWidth: CGFloat = collectionViewRect.size.width

    // Replace userMedias.count with the number of cells in one row
    // if that changes or if a row is not constrained to a single line
    let cellWidth: CGFloat = collectionViewWidth / userMedias.count

    // Replace the divisor with the column count requirement. Make sure to have it in float.
    let size: CGSize = CGSize(width: cellWidth, height: cellWidth)
    return size
}

您將需要確保SizeForItemAtIndexPath為具有此類插圖的單元格提供適當的大小，然后相應地提供這些插圖。

最后一個提示...使用集合視圖時，避免使用SizeForItemAtIndexPath將視圖限制在所有四個牆壁上。 我嘗試使寬度和高度成比例，同時僅限制到單元的頂部和左側。 當我不這樣做時，我會遇到單元大小調整不當的問題。