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

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

并启用分页，我已经完成

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