UICollectionView横向滚动仅显半个Cell，如何实现轮播式前后Cell部分可见？

针对你的需求，以下是需要调整的关键设置及代码修改：

1. 修正CollectionView基础配置 #

先确保CollectionView的交互和布局基础设置正确：

// 先补充缺失的数据源变量和计数器
private var mainCarouselArray: [Any] = Array(repeating: "", count: 6)
private var mainCarouselCounter = 0
private var mainCarouselTimer: Timer?

override func viewDidLoad() {
    super.viewDidLoad()
    
    mainCarouselCollectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: CustomCollectionViewCell.reuseIdentifier)
    mainCarouselCollectionView.dataSource = self
    mainCarouselCollectionView.tag = 0
    // 开启分页，确保滚动时cell自动居中对齐
    mainCarouselCollectionView.isPagingEnabled = true
    // 关闭水平滚动指示器（可选，优化视觉效果）
    mainCarouselCollectionView.showsHorizontalScrollIndicator = false
    view.addSubview(mainCarouselCollectionView)
  
    startTimerForMainCarousel(scrollTime: 2)
}

2. 调整FlowLayout核心参数（关键） #

在viewDidLayoutSubviews中重新计算布局，确保item宽度小于CollectionView宽度，配合sectionInsets实现前后Cell露出效果：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // 先固定CollectionView的尺寸，避免cell被裁剪
    let collectionViewWidth = UIScreen.main.bounds.width
    let collectionViewHeight: CGFloat = 218
    mainCarouselCollectionView.frame = CGRect(x: 0, y: 0, width: collectionViewWidth, height: collectionViewHeight)
    
    let layout = UICollectionViewFlowLayout()
    // item宽度比CollectionView窄40，左右各露出20px的前后Cell
    let itemWidth = collectionViewWidth - 40
    layout.itemSize = CGSize(width: itemWidth, height: collectionViewHeight)
    layout.scrollDirection = .horizontal
    // 设置Cell之间的间距
    layout.minimumLineSpacing = 10
    // 左右边距，确保首尾Cell也能露出部分内容
    layout.sectionInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    
    self.mainCarouselCollectionView.collectionViewLayout = layout
    // 强制刷新布局，确保参数生效
    self.mainCarouselCollectionView.reloadData()
}

3. 优化Cell布局逻辑 #

改用AutoLayout替代frame布局，避免尺寸适配问题：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let carouselCell = collectionView.dequeueReusableCell(
        withReuseIdentifier: CustomCollectionViewCell.reuseIdentifier,
        for: indexPath) as? CustomCollectionViewCell
    else { fatalError("Cannot create new cell") }

    // 移除旧子视图
    carouselCell.parentView.subviews.forEach { $0.removeFromSuperview() }

    let carouselView = UIView()
    carouselView.translatesAutoresizingMaskIntoConstraints = false
    carouselView.backgroundColor = .blue
    carouselCell.parentView.addSubview(carouselView)
    
    // 用AutoLayout设置内边距
    NSLayoutConstraint.activate([
        carouselView.leadingAnchor.constraint(equalTo: carouselCell.parentView.leadingAnchor, constant: 4),
        carouselView.trailingAnchor.constraint(equalTo: carouselCell.parentView.trailingAnchor, constant: -4),
        carouselView.topAnchor.constraint(equalTo: carouselCell.parentView.topAnchor, constant: 4),
        carouselView.bottomAnchor.constraint(equalTo: carouselCell.parentView.bottomAnchor, constant: -4)
    ])

    return carouselCell
}

关键原理说明 #

• Item尺寸控制：让Item宽度小于CollectionView宽度，确保滚动时前后Cell能进入可视区域，露出部分内容。
• SectionInsets设置：左右边距保证首尾Cell也能呈现“前后露出”的视觉效果，避免边缘Cell完全贴边。
• 分页功能：isPagingEnabled = true确保滚动结束时自动将当前Cell居中对齐，符合轮播的交互逻辑。

内容的提问来源于stack exchange，提问作者nadim