UICollectionView's UICollectionReusableView preventing / blocking taps on UICollectionViewCell - ios

Question

I'm using a UICollectionView with a Flow Layout. I've set the header, which is a UICollectionReusableView to behave like so;
layout?.sectionHeadersPinToVisibleBounds = true
...
override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header", for: indexPath as IndexPath)
header.layer.zPosition = -1
return header
}
This gives the desired effect that when scrolling the cells up, the header stays pinned but goes behind the regular cells.
However, if I try to click a UICollectionViewCell that is scrolled toward the top, i.e. so it's technically covering the UICollectionReusableView, the UICollectionViewCell's didSelectItemAt tap event no longer fires until I scroll it back down away from where the header is. In other words, the UICollectionReusableView is blocking tap gestures, even though it's zPosition is set to -1 and isn't visible.
Has anyone ever had this issue and how did you fix it?

Answer 1

Adding this to your Section Header view class:
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
return false
}
will pass all touches through to the next receiver below - in this case, your collection view cell. If you need an interactive element (such as a button) in the Section Header, you can do:
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
let ptInSub = theButton.convert(point, from: theButton.superview)
if theButton.bounds.contains(ptInSub) {
return true
}
return false
}
This could give you what you want, although... if the Cell View is covering the Button on the Section Header, and you tap the cell where the button is, the button will take the tap. Should be able to get around that with another contains(point) or two...

Answer 2

I ended up adding a Parallax effect to my UICollectionReusableView header. There are a few Parallax libraries out there, but it's actually really simple - I achieved it using the following code;
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
if header != nil {
let scrollDiff = scrollView.contentOffset.y - self.previousScrollOffset
let absoluteTop: CGFloat = 0;
let absoluteBottom: CGFloat = scrollView.contentSize.height - scrollView.frame.size.height;
let isScrollingDown = scrollDiff > 0 && scrollView.contentOffset.y > absoluteTop
let isScrollingUp = scrollDiff < 0 && scrollView.contentOffset.y < absoluteBottom
var newHeight = self.headerHeight
if isScrollingDown {
newHeight = max(self.minHeaderHeight, self.headerHeight - abs(scrollDiff))
} else if isScrollingUp {
newHeight = min(self.maxHeaderHeight, self.headerHeight + abs(scrollDiff))
}
if newHeight != self.headerHeight {
self.headerHeight = newHeight
self.collectionView?.contentOffset = CGPoint(x: (self.collectionView?.contentOffset.x)!, y: self.previousScrollOffset)
self.collectionView?.collectionViewLayout.invalidateLayout()
}
self.previousScrollOffset = scrollView.contentOffset.y
}
}
And then to alter the height of the header (which is called when you invalidateLayout());
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: collectionView.bounds.width, height:self.headerHeight)
}
The result is that no overlapping ever occurs, but it still gives the desired effect that I was aiming to achieve in the first place.