Swift中滚动ScrollView时识别当前图片并更新导航栏

嘿，作为Swift新手能自己实现ScrollView的图片滚动已经超棒啦！针对你想要判断当前显示图片索引、并同步更新导航栏的需求，我给你整理了一套实用的解决方案，咱们一步步来：

横向ScrollView的当前显示索引，主要通过contentOffset.x（滚动偏移量）和ScrollView的宽度来计算。另外我们可以利用UIScrollView的代理方法，实时或者在滚动停止时更新导航栏内容。

1. 让ViewController遵守UIScrollViewDelegate协议 #

首先给你的ImageScrollViewController添加代理协议：

class ImageScrollViewController: UIViewController, UIScrollViewDelegate {
    // 原有的代码...
}

2. 设置ScrollView的代理 #

在viewDidLoad方法里，给mainScrollView设置代理：

override func viewDidLoad() {
    super.viewDidLoad()
    mainScrollView.delegate = self // 新增这一行
    // 原有的图片数组初始化、添加imageView的代码...
}

3. 实现代理方法计算当前索引并更新导航栏 #

这里有两种常用的代理方法，你可以根据需求选择：

方法一：滚动过程中实时更新（适合需要动态反馈的场景） #

实现scrollViewDidScroll方法：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 计算当前索引：偏移量除以ScrollView宽度，取整后处理边界
    let scrollWidth = scrollView.frame.width
    let currentIndex = Int(round(scrollView.contentOffset.x / scrollWidth))
    // 确保索引在合法范围内（0到图片数组最后一位）
    let safeIndex = max(0, min(currentIndex, imageArray.count - 1))
    
    // 更新导航栏，比如设置标题为"图片 X/Y"
    navigationItem.title = "图片 \(safeIndex + 1)/\(imageArray.count)"
    
    // 如果需要更新导航栏的其他元素（比如左右按钮），也可以在这里处理
    // 例如：navigationItem.rightBarButtonItem = UIBarButtonItem(title: "操作", style: .plain, target: self, action: #selector(handleAction))
}

方法二：滚动停止后更新（适合不需要实时、想要减少计算的场景） #

实现scrollViewDidEndDecelerating方法（滚动惯性停止后触发）：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let scrollWidth = scrollView.frame.width
    let currentIndex = Int(round(scrollView.contentOffset.x / scrollWidth))
    let safeIndex = max(0, min(currentIndex, imageArray.count - 1))
    
    navigationItem.title = "图片 \(safeIndex + 1)/\(imageArray.count)"
}

4. 优化你的图片布局（可选，但更规范） #

你的原有代码里，设置contentSize的方式有点小问题（每次循环都覆盖contentSize），可以改成循环结束后统一设置：

override func viewDidLoad() {
    super.viewDidLoad()
    mainScrollView.delegate = self
    
    imageArray.append(UIImage(named: "nature-2")!)
    imageArray.append(UIImage(named: "nature")!)
    imageArray.append(UIImage(named: "nature4")!)
    imageArray.append(UIImage(named: "nature5")!)
    imageArray.append(UIImage(named: "nature6")!)
    
    let scrollWidth = mainScrollView.frame.width
    let imageWidth = scrollWidth - 16 // 左右各8的padding
    
    for i in 0..<imageArray.count {
        let imageView = UIImageView()
        imageView.image = imageArray[i]
        imageView.contentMode = .scaleAspectFit
        // 计算x位置：每个图片占满scrollView宽度，加上左右padding
        let xPosition = scrollWidth * CGFloat(i) + 8
        imageView.frame = CGRect(x: xPosition, y: 0, width: imageWidth, height: mainScrollView.frame.height)
        mainScrollView.addSubview(imageView)
    }
    
    // 循环结束后统一设置contentSize，避免重复赋值
    mainScrollView.contentSize = CGSize(width: scrollWidth * CGFloat(imageArray.count), height: mainScrollView.frame.height)
}

• 如果你的图片之间有自定义间距，计算索引时要把间距也考虑进去，比如假设每张图之间有20的间距，那总宽度就是(scrollWidth + 20) * imageArray.count - 20，索引计算就是Int(scrollView.contentOffset.x / (scrollWidth + 20))
• 可以给ScrollView开启pagingEnabled = true，这样滚动会自动停在整页位置，索引计算会更准确：

  mainScrollView.isPagingEnabled = true
  

这样处理后，你就能完美实现滚动图片时同步更新导航栏的效果啦！

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