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），但到目前为止我得到：

任何 ideas/tips 如何达到所需的行为？

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
}()

Answer 2

@Jeremy 提供了一个全面的解决方案。我只是想分享一下我是如何不费吹灰之力就做到这一点的

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    
    let frame = cvImages.frame 
    
    return CGSize(width: frame.width , height: frame.height * 0.9)
}

并启用分页，我已经完成了

实际上我只需要在集合视图中一次显示一个单元格，就像图像滑块一样

UICollectionView 水平滚动

UICollectionView horizontal scrolling

ios

uicollectionview

uicollectionviewlayout

swift