ios - UICollectionView 水平滚动

Question

我有一个带有水平滚动条的 UICollectionView。这是我的 collectionView:

fileprivate(set) lazy var collectionView: UICollectionView = {
        let width = UIScreen.main.bounds.width.multiplied(by: 0.9)
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: width, height: 50)

        layout.sectionInset = UIEdgeInsets(top: 20, left: 20, bottom: 10, right: 20)
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 20

        let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.backgroundColor = .red
        collectionView.isPagingEnabled = true
        return collectionView
    }() 

看起来像这样:

如您所见，我在代码中有 collectionView.isPagingEnabled = true 因为我想要分页效果。所以我想要实现的是让项目在其他页面中看起来像上图(左右间距 20)，但到目前为止我得到了:

关于如何实现所需行为的任​​何想法/提示？

Answer 1

这是我在测试项目中使用的 UICollectionViewDelegateFlowLayout 来实现您想要的。

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: UIScreen.main.bounds.width.multiplied(by: 0.9), height: 50.0)
}

// item spacing = vertical spacing in horizontal flow
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return (UIScreen.main.bounds.width.multiplied(by: 0.1))
}

// line spacing = horizontal spacing in horizontal flow
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return (UIScreen.main.bounds.width.multiplied(by: 0.1))
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: (UIScreen.main.bounds.width.multiplied(by: 0.1) / 2.0), bottom: 0, right: (UIScreen.main.bounds.width.multiplied(by: 0.1) / 2.0))
}

你的代码应该是这样的:

fileprivate(set) lazy var collectionView: UICollectionView = {
    let width = UIScreen.main.bounds.width.multiplied(by: 0.9)
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: width, height: 50)

    layout.sectionInset = UIEdgeInsets(top: 20, left: UIScreen.main.bounds.width.multiplied(by: 0.1) / 2.0, bottom: 10, right: UIScreen.main.bounds.width.multiplied(by: 0.1) / 2.0)
    layout.scrollDirection = .horizontal
    layout.minimumLineSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1)
    layout.minimumInteritemSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1) // or any value you want

    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.backgroundColor = .red
    collectionView.isPagingEnabled = true
    return collectionView
}()