iOS中PageViewController回滑时背景图遮挡UI元素的原因排查

我明白你现在遇到的问题：在Swift4开发的iOS应用里，使用UIPageViewController时，只有回滑页面会出现背景图遮挡Label等所有UI元素的情况，向前滑动完全正常，把背景图的contentMode改成.scaleAspectFit就恢复正常了。咱们来拆解下问题原因，再给出可行的修复方案。

问题根源 #

这个问题主要由两个因素共同导致：

1. 你在viewDidLoad里通过DispatchQueue.main.async添加背景UIImageView，并且插入到view的子视图最底层（at:0）。
2. .scaleAspectFill模式会让图片超出视图边界，而UIPageViewController的回滑转场动画会临时调整视图层级，导致溢出的背景图“跑”到上层UI的前面，遮挡住内容。而.scaleAspectFit不会让图片溢出，所以不会触发这个问题。

解决方案（按简洁度排序） #

方案1：直接用视图的backgroundColor（最推荐） #

不需要额外创建UIImageView，直接把视图的背景色设置为带图片的UIColor，这样背景会始终固定在视图层级的最底部，完全不受转场动画的影响：

func setBackGround(){
    guard let backgroundImage = UIImage(named: imageToPutInBackground) else { return }
    self.view.backgroundColor = UIColor(patternImage: backgroundImage)
    self.view.alpha = 0.9 // 这里可以调整透明度
}

方案2：通过视图的Layer设置背景 #

这种方式也能保证背景处于最底层，避免子视图层级变动带来的问题：

func setBackGround(){
    guard let backgroundImage = UIImage(named: imageToPutInBackground) else { return }
    self.view.layer.contents = backgroundImage.cgImage
    self.view.layer.contentsGravity = .resizeAspectFill // 对应UIView的.scaleAspectFill
    self.view.layer.opacity = 0.9
    self.view.clipsToBounds = true // 裁剪溢出的图片部分，防止遮挡其他元素
}

方案3：调整UIImageView的添加时机和配置（如果你坚持用子视图） #

如果还是想保留UIImageView的方式，可以把背景图的设置代码从viewDidLoad移到viewWillAppear，同时开启裁剪，还要避免重复添加背景图：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    setBackGround()
}

func setBackGround(){
    // 先移除已存在的背景图，避免重复添加
    self.view.subviews
        .filter { $0 is UIImageView }
        .forEach { $0.removeFromSuperview() }
    
    guard let backgroundImage = UIImage(named: imageToPutInBackground) else { return }
    let backgroundImageView = UIImageView(frame: self.view.bounds) // 用bounds比frame更准确
    backgroundImageView.image = backgroundImage
    backgroundImageView.contentMode = .scaleAspectFill
    backgroundImageView.alpha = 0.9
    backgroundImageView.clipsToBounds = true // 关键：阻止图片溢出视图边界
    self.view.insertSubview(backgroundImageView, at: 0)
}

关于回滑才出问题的小说明 #

为什么只有回滑会触发这个问题？因为UIPageViewController对向前和向后转场的视图层级处理逻辑有差异，回滑时的临时视图堆叠更容易打乱你在viewDidLoad里设置的子视图层级，而向前滑动不会出现这种情况。

内容的提问来源于stack exchange，提问作者Y.R