Floating header below UINavigationBar as a subview - receive touches? - ios

Question

I have a floating UIView header below a UINavigationBar. I have inserted it as a subview at index 0, so I can animate it away and in according to contentOffset of a UITableView.
However, because it's beyond the bounds of the UINavigationBar I cannot receive touch events in this view after adding a UITapGestureRecognizer to it. All touch events go to the UITableView below it.
Any ideas if it's possible to have a subview outside of the bounds of the navigation bar and receive touch events for it?
I did this because adding it as a subview of a UITableView, I'd have to set the Y origin based on the contentOffset while scrolling and this also makes animations very difficult since the Y origin changes during scroll, so I can't know where to animate it to.
It's similar to the header in the Facebook app with "Status", "Photo" and "Check In" buttons.
Thanks

Answer 1

You need to create custom UINavigationBar and reimplement pointInside:withEvent: to extend touchable area of navigation bar (add your view area):
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
CGRect extendedRect = self.frame;
extendedRect.size.height += MENU_HEADER_HEIGHT - self.frame.origin.y;
BOOL pointInside = NO;
if (CGRectContainsPoint(extendedRect, point)) {
pointInside = YES;
}
return pointInside;
}

Answer 2

Adding to the above answer. Here is what I did.
class CustomNavigationBar: UINavigationBar {
override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
if(self.pointInside(point, withEvent: event)){
self.userInteractionEnabled = true
}else{
self.userInteractionEnabled = false
}
return super.hitTest(point, withEvent: event)
}
override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool {
var extendedRect:CGRect = self.frame
extendedRect.size.height += 100.0 - self.frame.origin.y
var pointInside:Bool = false
if(CGRectContainsPoint(extendedRect, point)){
pointInside = true
}
return pointInside
}
}

Answer 3

As far as I know you can't receive touch events outside the bounds of a view. So, I see a couple options:
First, you could go with the option of adding it as a subview to the UITableView, as you said, then adjusting its Y origin based on the tableview's contentOffset. When you want to animate it, instead of animating it to a specific y position you could do something like this:
[UIView animateWithDuration:0.4
animations:^{
_myHeaderView.frame = CGRectOffset(_myHeaderView.frame, 0.0, -_myHeaderView.frame.size.height);
}];
Another option I could see is adding the header view on top of everything, but with its origin sitting just below the UINavigationBar. Then when you animate it you could just move it to be below the UINavigationBar (or even actually pass it to the UINavigationBar) and animate after that so that it slides up underneath.

Answer 4

Swift 4 solution:
class TappableNavigationBar: UINavigationBar {
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
isUserInteractionEnabled = self.point(inside: point, with: event)
return super.hitTest(point, with: event)
}
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
var extendedRect = frame
extendedRect.size.height += 300.0 - frame.origin.y
return extendedRect.contains(point)
}
}