我如何使我的UICollectionView返回3列，它们之间的间距为1像素，就像instagram一样？ 迅速

Question

I have an extension on a UIViewController using the UICollectionViewDelegate and UICollectionViewDataSource and don't know how to get my cells to layout just like Instagram's.

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

Not sure you use storyboard or not. If you are using storyboard, cell size can be configure in storyboard. By setting up insetForSectionAtIndex with UIEdgeInsetsMake(0, 0, 1, 1), it should be able to give you 1 px space in between cells.

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

UICollection Cell with 1px spacing in between:

Hope this would help.

Answer 2

I am not guarenteeing that these will work, but playing around with these functions is what you are needing to get your results. You may only need one of the first two functions, and the third may be optional. There are a lot of different types of results you can obtain here.

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
}

You will need to ensure that SizeForItemAtIndexPath provides the appropriate size for a cell that has such insets and then give the insets accordingly.

One last tip... When I am working with collection view I avoid constraining any view to all four walls when using SizeForItemAtIndexPath. I try to make proportional width and height while constraining only to the top and left walls of the cell. When I don't do this, I have had issues with the cells resizing inappropriately.