How to get tableView content to scroll behind blur effect in swift iOS

Question

I am trying to figure out how to have my tableView content scroll behind another view while having the table view bottom start point be above the other view. Basically trying to figure out how Apple does the same effect in there iMessage app where the tableView of a conversation start above the text field but scrolls behind it and has a blur effect.

Thanks in advance

Apple's iMessage text field blur

Answer 1

If I understood you correctly then you would want to do this:-

• add tableView in whole screen
• add a view of any height (lets say 128) with opacity < 100% or just add Visual Effect View of any height.(make sure your tableView is behind Blur view)
• flip table vertically (upside down)
• flip table cells too
• add contentInset to table view equal to height of blur view so that when table loads the content doesn't load behind blur
• add scrollIndicatorInsets again equal to height of blur view so your scroll bar doesn't scroll to top(bottom because inverted) of table.

Try yourself: Design a tableView with cells > 20, add Visual Effect View, give height = 128 & add this in your viewDidLoad() :

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    tableView.delegate = self
    tableView.dataSource = self
    tableView.contentInset = UIEdgeInsets(top: 128, left: 0, bottom: 0, right: 0) //top space of content from table = 128
    tableView.transform = CGAffineTransform(scaleX: 1, y: -1) //invert table upside down
    tableView.scrollIndicatorInsets = UIEdgeInsets(top: 128, left: 0, bottom: 0, right: 0) //top space of scrollBar from table = 128, top space will act as bottom space after inverting in this case
}

Do same to invert table cells:

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! Cell
    
    cell.contentView.transform = CGAffineTransform(scaleX: 1, y: -1) //invert cells too
    
    return cell
}

This should achieve the iMessage like behaviour.