如何实现UICollectionView图片轮播时显示左右部分前后图片

要实现中间显示当前图片、左右露出上下张部分内容的轮播效果，你需要对现有代码做以下几处修改：

1. 调整CollectionView布局参数 #

修改布局代理方法，让Item宽度小于CollectionView宽度，同时设置合适的内边距和间距，确保中间Item居中，左右能露出相邻Item的部分：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // 让Item宽度比CollectionView窄80pt，左右各露出40pt的相邻内容
    let itemWidth = collectionView.frame.width - 80
    return CGSize(width: itemWidth, height: collectionView.frame.height)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 20 // Item之间的间距，配合内边距保证居中效果
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    // 计算左右内边距，让第一个和最后一个Item也能露出部分内容
    let inset = (collectionView.frame.width - (collectionView.frame.width - 80)) / 2
    return UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
}

2. 配置CollectionView基础属性 #

在viewDidLoad里添加以下配置，开启分页并隐藏滚动条：

override func viewDidLoad() {
    super.viewDidLoad()
    
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    myCollec.collectionViewLayout = layout
    
    myCollec.isPagingEnabled = true
    myCollec.showsHorizontalScrollIndicator = false
    myCollec.contentInsetAdjustmentBehavior = .never
}

3. 实现循环轮播（可选但推荐） #

如果需要无限循环滚动，修改数据源并处理滚动跳转：

// 新增用于显示的数据源数组
var displayArr: [String] = []

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 初始化循环数据源
    if arr.count > 1 {
        displayArr = [arr.last!] + arr + [arr.first!]
    } else {
        displayArr = arr
    }
    
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    myCollec.collectionViewLayout = layout
    
    myCollec.isPagingEnabled = true
    myCollec.showsHorizontalScrollIndicator = false
    myCollec.contentInsetAdjustmentBehavior = .never
    
    myCollec.reloadData()
    // 默认滚动到第一个真实Item的位置
    myCollec.scrollToItem(at: IndexPath(row: 1, section: 0), at: .centeredHorizontally, animated: false)
}

// 修改数据源数量
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return displayArr.count
}

// 修改Cell数据绑定
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
    cell.img.image = UIImage(named: displayArr[indexPath.row])!
    // 确保图片填充Cell，避免拉伸变形
    cell.img.contentMode = .scaleAspectFill
    cell.img.clipsToBounds = true
    return cell
}

// 处理滚动结束后的循环跳转
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    guard let currentIndex = myCollec.indexPathsForVisibleItems.first?.row else { return }
    
    if currentIndex == 0 {
        // 滚动到了最后一个真实Item的复制项，跳转到真实位置
        myCollec.scrollToItem(at: IndexPath(row: arr.count, section: 0), at: .centeredHorizontally, animated: false)
    } else if currentIndex == displayArr.count - 1 {
        // 滚动到了第一个真实Item的复制项，跳转到真实位置
        myCollec.scrollToItem(at: IndexPath(row: 1, section: 0), at: .centeredHorizontally, animated: false)
    }
}

4. Cell布局调整 #

确保Cell内的图片视图铺满整个Cell，在ImageCollectionViewCell的初始化方法或xib里设置：

class ImageCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var img: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        img.frame = bounds
        img.contentMode = .scaleAspectFill
        img.clipsToBounds = true
    }
}

这样就能实现你需要的中间显示当前图、左右露出上下张部分内容的轮播效果了。

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