TableView背景渐变图层适配异常问题求助

我之前也碰到过这个问题，原因很简单——你只在初始化时给渐变图层和背景视图设置了固定的frame，但当设备旋转、切换设备或者布局因为约束更新而变化时，这些frame不会自动跟着调整，所以渐变就停留在原来的尺寸上了。下面给你几个实用的解决办法：

方法一：自定义TableView子类（推荐） #

把渐变背景的逻辑封装到自定义TableView里，这样每次布局更新时自动调整渐变图层尺寸，代码更整洁且复用性高：

class GradientTableView: UITableView {
    private var gradientLayer: CAGradientLayer?
    
    func setGradientBackground(topColor: UIColor, bottomColor: UIColor) {
        let gradientColors = [topColor.cgColor, bottomColor.cgColor]
        let gradientLocations = [0.0, 1.0] as [NSNumber]
        
        gradientLayer = CAGradientLayer()
        gradientLayer?.colors = gradientColors
        gradientLayer?.locations = gradientLocations
        
        let backgroundView = UIView()
        backgroundView.layer.insertSublayer(gradientLayer!, at: 0)
        self.backgroundView = backgroundView
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局更新时，同步渐变图层和背景视图的尺寸
        gradientLayer?.frame = self.bounds
        self.backgroundView?.frame = self.bounds
    }
}

使用方式： #

1. 在Storyboard中选中你的TableView，将其Class改为GradientTableView
2. 在ViewController中调用方法：

tableView.setGradientBackground(
    topColor: UIColor(red: 125/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1.0),
    bottomColor: UIColor(red: 125/255.0, green: 125/255.0, blue: 0/255.0, alpha: 1.0)
)

方法二：在ViewController的viewDidLayoutSubviews中更新 #

如果不想自定义子类，可以在ViewController里监听布局变化，每次布局完成后更新渐变图层尺寸：

class YourViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    private var gradientLayer: CAGradientLayer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setGradientToTableView(
            UIColor(red: 125/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1.0),
            UIColor(red: 125/255.0, green: 125/255.0, blue: 0/255.0, alpha: 1.0)
        )
    }
    
    func setGradientToTableView(_ topColor: UIColor, _ bottomColor: UIColor) {
        let gradientColors = [topColor.cgColor, bottomColor.cgColor]
        let gradientLocations = [0.0, 1.0] as [NSNumber]
        
        gradientLayer = CAGradientLayer()
        gradientLayer?.colors = gradientColors
        gradientLayer?.locations = gradientLocations
        gradientLayer?.frame = tableView.bounds
        
        let backgroundView = UIView(frame: tableView.bounds)
        backgroundView.layer.insertSublayer(gradientLayer!, at: 0)
        tableView.backgroundView = backgroundView
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // 布局更新后同步尺寸
        gradientLayer?.frame = tableView.bounds
        tableView.backgroundView?.frame = tableView.bounds
    }
}

viewDidLayoutSubviews会在视图尺寸变化（比如旋转、设备切换、约束更新）时被调用，刚好能覆盖所有需要适配的场景。

方法三：Auto Layout + KVO 实现适配 #

用Auto Layout约束背景视图和TableView的尺寸，再通过KVO监听背景视图的bounds变化来更新渐变图层：

class YourViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setGradientToTableView(
            UIColor(red: 125/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1.0),
            UIColor(red: 125/255.0, green: 125/255.0, blue: 0/255.0, alpha: 1.0)
        )
    }
    
    func setGradientToTableView(_ topColor: UIColor, _ bottomColor: UIColor) {
        let gradientColors = [topColor.cgColor, bottomColor.cgColor]
        let gradientLocations = [0.0, 1.0] as [NSNumber]
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations
        
        let backgroundView = UIView()
        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        backgroundView.layer.insertSublayer(gradientLayer, at: 0)
        tableView.backgroundView = backgroundView
        
        // 添加Auto Layout约束，让背景视图和TableView尺寸完全一致
        NSLayoutConstraint.activate([
            backgroundView.topAnchor.constraint(equalTo: tableView.topAnchor),
            backgroundView.leadingAnchor.constraint(equalTo: tableView.leadingAnchor),
            backgroundView.trailingAnchor.constraint(equalTo: tableView.trailingAnchor),
            backgroundView.bottomAnchor.constraint(equalTo: tableView.bottomAnchor)
        ])
        
        // 监听背景视图的bounds变化
        backgroundView.addObserver(self, forKeyPath: #keyPath(UIView.bounds), options: [.new], context: nil)
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == #keyPath(UIView.bounds), 
           let backgroundView = object as? UIView,
           let gradientLayer = backgroundView.layer.sublayers?.first as? CAGradientLayer {
            gradientLayer.frame = backgroundView.bounds
        }
    }
    
    // 记得在销毁时移除观察者
    deinit {
        tableView.backgroundView?.removeObserver(self, forKeyPath: #keyPath(UIView.bounds))
    }
}

这个方法更依赖Auto Layout的自动适配，适合喜欢用约束管理布局的场景。

内容的提问来源于stack exchange，提问作者D-A UK