I have an app with a UITableView. We're gradually converting to SwiftUI, so the UITableView is basically a collection of SwiftUI views. I was able to get the background to appear as a gradient using these two functions:

func createBackgroundGradient() -> CAGradientLayer {
    let gradientLayer = CAGradientLayer()
        
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.white.cgColor, UIColor.red.cgColor]
    gradientLayer.locations = [0.0, 0.5, 1.0]
    gradientLayer.frame = self.tableView.bounds
        
    return gradientLayer
}

func refreshBackground() {
    tableView.backgroundView = nil
    let backgroundView = UIView()
    let gradientView = createBackgroundGradient()
    backgroundView.layer.addSublayer(gradientView)
    tableView.backgroundView = backgroundView
}

I call this function from viewWillLayoutSubview because I have views popping in as we get data back from the back end. This works to set the gradient the length of the screen. However, I want the gradient to take up the entire UITableView, and I want it to scroll with the table view (which is much longer than the length of the screen), not just sit in the background with the cells scrolling on top of it.

The solution to this question: Gradient background color with UIScrollView looks like the behavior I want, but when I change my refreshBackround function to this:

func refreshBackground() {
        if let gradientSublayer = self.gradientSublayer {
            gradientSublayer.removeFromSuperlayer()
        }
        self.gradientSublayer = createBackgroundGradient()
        tableView.layer.insertSublayer(self.gradientSublayer ?? createBackgroundGradient(), at: 0)
}

I don't see any difference in behavior - it's still just the length of the screen and it doesn't change position when I scroll.

Does anyone know of a way around this? I've thought about trying to color the different sections with different portions of the gradient, but that seems like it'll get really complicated because the various sections in the table may or may not be there based on the data we're getting from the back end (and it'll probably look janky because portions of the gradient will be popping in as those sections are populated).

I have an app with a UITableView. We're gradually converting to SwiftUI, so the UITableView is basically a collection of SwiftUI views. I was able to get the background to appear as a gradient using these two functions:

func createBackgroundGradient() -> CAGradientLayer {
    let gradientLayer = CAGradientLayer()
        
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.white.cgColor, UIColor.red.cgColor]
    gradientLayer.locations = [0.0, 0.5, 1.0]
    gradientLayer.frame = self.tableView.bounds
        
    return gradientLayer
}

func refreshBackground() {
    tableView.backgroundView = nil
    let backgroundView = UIView()
    let gradientView = createBackgroundGradient()
    backgroundView.layer.addSublayer(gradientView)
    tableView.backgroundView = backgroundView
}

I call this function from viewWillLayoutSubview because I have views popping in as we get data back from the back end. This works to set the gradient the length of the screen. However, I want the gradient to take up the entire UITableView, and I want it to scroll with the table view (which is much longer than the length of the screen), not just sit in the background with the cells scrolling on top of it.

The solution to this question: Gradient background color with UIScrollView looks like the behavior I want, but when I change my refreshBackround function to this:

func refreshBackground() {
        if let gradientSublayer = self.gradientSublayer {
            gradientSublayer.removeFromSuperlayer()
        }
        self.gradientSublayer = createBackgroundGradient()
        tableView.layer.insertSublayer(self.gradientSublayer ?? createBackgroundGradient(), at: 0)
}

I don't see any difference in behavior - it's still just the length of the screen and it doesn't change position when I scroll.

Does anyone know of a way around this? I've thought about trying to color the different sections with different portions of the gradient, but that seems like it'll get really complicated because the various sections in the table may or may not be there based on the data we're getting from the back end (and it'll probably look janky because portions of the gradient will be popping in as those sections are populated).

• ios
• swift
• uitableview
• uikit

Share Improve this question Follow asked Nov 18, 2024 at 21:49 kbartlettkbartlett 16011 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In order to have gradientLayer take up entirely UITableView. You need to subcribe to tableView's bounds change and refreshBackground base on new bounds. Here is a way using Combine:

class ViewController: UITableViewController {
    private var cancels = Set<AnyCancellable>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.publisher(for: \.bounds)
            .removeDuplicates()
            .sink { [weak self] size in
                self?.createBackgroundGradient()
            }
            .store(in: &cancels)
    }
    
    var gradientLayer: CAGradientLayer!
    func createBackgroundGradient() {
        if let gradientSublayer = self.gradientLayer {
            gradientSublayer.removeFromSuperlayer()
        }
        gradientLayer = CAGradientLayer()
            
        gradientLayer.colors = [UIColor.red.cgColor, UIColor.white.cgColor, UIColor.red.cgColor]
        gradientLayer.locations = [0.0, 0.5, 1.0]
        gradientLayer.zPosition = -1000
        gradientLayer.frame = self.tableView.bounds
        tableView.layer.insertSublayer(self.gradientLayer, at: 0)
    }
}