Is it possible to "hide" a UITableViewCell behind a transparent section header?

7
votes

I have a tableview in my iOS project that uses an image as background. The image does not scroll, it is static. Because of that I also have transparent cells and section headers.
Now my question is how can I make the (transparent) cells to "hide" or "disappear" behind the (also transparent) section header?
Is it possible?

Screenshot

1
iosswiftxcode
Would you be okay with switching the tableview to a grouped tableview? So that the header scrolls up with the cells instead of them layering on top of each other? Because that would technically resolve this issue – Kayla Galway
Yeah but lets keep it a last resort :) Thanks for the answear though – Paweł Zgoda-Ferchmin
This looks like it has some good ideas: stackoverflow.com/questions/12127138/… – ghostatron
You need to apply mask for all cells that located under header view. Use on scrollViewDidScroll Tutorial: medium.com/@peteliev/layer-masking-for-beginners-c18a0a10743 – panychyk.dima

1 Answers

6
votes

On your custom cell 

public func maskCell(fromTop margin: CGFloat) {
    layer.mask = visibilityMask(withLocation: margin / frame.size.height)
    layer.masksToBounds = true
}

private func visibilityMask(withLocation location: CGFloat) -> CAGradientLayer {
    let mask = CAGradientLayer()
    mask.frame = bounds
    mask.colors = [UIColor.white.withAlphaComponent(0).cgColor, UIColor.white.cgColor]
    let num = location as NSNumber
    mask.locations = [num, num]
    return mask
}

and on you ViewController UIScrollViewDelegate 

func scrollViewDidScroll(_ scrollView: UIScrollView) {
     for cell in self.lessonsTableView.visibleCells {
         let paddingToDisapear = CGFloat(25)

         let hiddenFrameHeight = scrollView.contentOffset.y + paddingToDisapear - cell.frame.origin.y
         if (hiddenFrameHeight >= 0 || hiddenFrameHeight <= cell.frame.size.height) {
             if let customCell = cell as? LessonTableViewCell {
                 customCell.maskCell(fromTop: hiddenFrameHeight)
             }
         }

     }
 }