UIScrollView搭配UIPageController时图片翻页后偏移出屏问题

嘿，我仔细看了你的代码，发现几个关键错误导致切换页面时图片完全移出屏幕，这就帮你梳理问题并给出修复方案：

问题根源拆解 #

• Y轴坐标越跑越偏：你给yCoordinate加了view.frame.width * CGFloat(image)，这会让第二、第三页的图片Y轴位置直接超出屏幕范围，完全看不到
• X轴居中逻辑错误：xCoordinate的计算方式不对，应该基于每一页的起始位置来计算图片的居中偏移，而不是用view.frame.midX叠加宽度
• PageControl硬编码适配差：用固定的414计算当前页，换个屏幕尺寸就会出错
• 没开分页功能：ScrollView默认不会自动停在整页，滑动时容易出现半页状态

修复后的完整代码 #

@IBOutlet weak var pageControl: UIPageControl!
@IBOutlet weak var scrollView: UIScrollView!

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated) // 记得调用super，避免生命周期异常
    navigationController?.setNavigationBarHidden(false, animated: true)
}

var contentWidth: CGFloat = 0.0

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 自定义PageControl样式
    let pageControlAppearance = UIPageControl.appearance()
    pageControlAppearance.pageIndicatorTintColor = .black
    pageControlAppearance.currentPageIndicatorTintColor = .red
    
    scrollView.delegate = self
    scrollView.isPagingEnabled = true // 核心：开启分页，让滑动自动停在整页
    scrollView.showsHorizontalScrollIndicator = false // 可选：隐藏滚动条更美观
    
    let totalPages = 3 // 用变量存总页数，比硬编码0...2更灵活
    pageControl.numberOfPages = totalPages // 必须设置总页数，PageControl才会正确显示
    
    for pageIndex in 0..<totalPages {
        // 安全加载图片，避免nil崩溃
        guard let imageToDisplay = UIImage(named: "\(pageIndex).png") else {
            print("加载图片\(pageIndex).png失败")
            continue
        }
        let imageView = UIImageView(image: imageToDisplay)
        imageView.contentMode = .scaleAspectFit // 保证图片按比例显示，不会拉伸变形
        
        let pageWidth = view.frame.width
        // 当前页的起始X坐标：每一页占满整个屏幕宽度
        let pageStartX = pageWidth * CGFloat(pageIndex)
        
        // 计算图片在当前页的居中位置
        let imageCenterX = pageStartX + pageWidth/2
        let imageCenterY = view.frame.height/2
        
        // 用center设置位置比直接写frame更直观，自动计算x/y
        imageView.center = CGPoint(x: imageCenterX, y: imageCenterY)
        // 也可以用frame设置，如果你需要固定图片尺寸：
        // imageView.frame = CGRect(x: pageStartX + (pageWidth - 400)/2, y: (view.frame.height - 400)/2, width: 400, height: 400)
        
        scrollView.addSubview(imageView)
        contentWidth += pageWidth
    }
    
    // 设置ScrollView的内容总宽度
    scrollView.contentSize = CGSize(width: contentWidth, height: view.frame.height)
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let pageWidth = view.frame.width
    // 用round处理滑动到一半的情况，确保当前页判断准确
    pageControl.currentPage = Int(round(scrollView.contentOffset.x / pageWidth))
}

// 别忘了给ViewController加上UIScrollViewDelegate协议扩展
extension YourViewController: UIScrollViewDelegate {}

关键修复说明 #

• 开启分页：scrollView.isPagingEnabled = true是核心，没有它的话ScrollView不会自动停在整页，滑动体验会很糟
• 修正坐标逻辑：
  • Y轴固定在屏幕中心，不再随页码偏移
  • X轴基于每页的起始位置，再通过center让图片居中，比手动计算frame更简单
• 适配所有屏幕：用view.frame.width替代硬编码的414，不管是iPhone SE还是Pro Max都能正常显示
• 图片安全加载：加了guard let避免图片加载失败导致崩溃
• 设置PageControl总页数：必须给pageControl.numberOfPages赋值，否则PageControl不会显示正确的页码数量

这样修改后，每一页的图片都会稳稳居中，切换页面时也不会出现移出屏幕的问题啦～

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