Why is a UIButton consuming touches but not a UIControl - ios

Question

I have some custom buttons in a table view cell.
These buttons are contained by another view which does not take up the whole cell.
I want the buttons to always respond to taps (and consume the tap so that the cell is not selected at the same time).
I want my button container view to consume taps that are not on the buttons themselves (so that the cell is not selected).
I want anywhere in the cell outside my buttons container to select the cell as per usual.
To this end, I have attached a gesture recogniser to my buttons container view.
This has the desired effect, as long as my buttons are UIButtons (ie tapping the button itself cause a TouchUpInside event on the button, tapping anywhere else in the buttons container does nothing and tapping anywhere else in the cell, outside the buttons container, causes the cell to be selected). However, if I use a UIControl instead of a UIButton then this is no longer the case — the control never responds to tapping (the buttons container always consumes the tap and tapping outside the buttons container, in the cell, causes the cell to be selected). It should be noted that if I do not add a gesture recogniser to my buttons container then the control responds to taps in the same way as a UIButton.
My only explanation is that a UIButton (which inherits from UIControl) somehow adds some extra touch handling. In which case I would like to know what it does and how I should emulate it (I need to use a UIControl instead of a UIButton because my button has a custom view hierarchy for which I do not want to play around in the UIButton).
The code below for a view controller should allow anyone to reproduce the problem:
class ViewController: UITableViewController, UIGestureRecognizerDelegate {
lazy var containerView: UIView = {
let view: UIView = UIView()
view.backgroundColor = UIColor.redColor()
view.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(self.buttonContainerView)
view.addConstraints([
NSLayoutConstraint(item: self.buttonContainerView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.buttonContainerView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.TrailingMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.buttonContainerView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.TopMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.buttonContainerView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.BottomMargin, multiplier: 1.0, constant: 0.0)
])
return view
}()
lazy var buttonContainerView: UIView = {
let view: UIView = UIView()
view.backgroundColor = UIColor.blueColor()
view.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(self.control)
view.addSubview(self.button)
view.addConstraints([
NSLayoutConstraint(item: self.control, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 0.5, constant: 0.0),
NSLayoutConstraint(item: self.control, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1.5, constant: 0.0),
NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0.0)
])
return view
}()
lazy var control: UIControl = {
let view: UIControl = TestControl(frame: CGRectZero)
view.addTarget(self, action: Selector("controlTapped:"), forControlEvents: UIControlEvents.TouchUpInside)
return view
}()
lazy var button: UIButton = {
let view: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
view.setTitle("Tap button", forState: UIControlState.Normal)
view.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addTarget(self, action: Selector("buttonTapped:"), forControlEvents: UIControlEvents.TouchUpInside)
return view
}()
func controlTapped(sender: UIControl) -> Void {
println("Control tapped!")
}
func buttonTapped(sender: UIButton) -> Void {
println("Button tapped!")
}
var recogniser: UITapGestureRecognizer?
var blocker: UITapGestureRecognizer?
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.rowHeight = 200.0
self.containerView.layoutMargins = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
let recogniser: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector("tappedContainer:"))
recogniser.delegate = self
self.recogniser = recogniser
self.containerView.addGestureRecognizer(recogniser)
let blocker: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector("tappedBlocker:"))
blocker.delegate = self
self.blocker = blocker
self.buttonContainerView.addGestureRecognizer(blocker)
}
func tappedContainer(recogniser: UIGestureRecognizer) -> Void {
println("Tapped container!")
}
func tappedBlocker(recogniser: UIGestureRecognizer) -> Void {
println("Tapped blocker!")
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let identifier: String = "identifier"
let cell: UITableViewCell
if let queuedCell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell {
cell = queuedCell
}
else {
cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: identifier)
cell.contentView.layoutMargins = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
cell.contentView.backgroundColor = UIColor.purpleColor()
cell.contentView.addSubview(self.containerView)
cell.contentView.addConstraints([
NSLayoutConstraint(item: self.containerView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: cell.contentView, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.containerView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: cell.contentView, attribute: NSLayoutAttribute.TrailingMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.containerView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: cell.contentView, attribute: NSLayoutAttribute.TopMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: self.containerView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: cell.contentView, attribute: NSLayoutAttribute.BottomMargin, multiplier: 1.0, constant: 0.0)
])
}
return cell
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
tableView.deselectRowAtIndexPath(indexPath, animated: true)
println("selected cell")
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
}
class TestControl: UIControl {
override init(frame: CGRect) {
super.init(frame: frame)
let view: UIControl = self
let label: UILabel = UILabel()
label.text = "Tap control"
label.userInteractionEnabled = false
view.layer.borderColor = UIColor.orangeColor().CGColor
view.layer.borderWidth = 2.0
view.setTranslatesAutoresizingMaskIntoConstraints(false)
label.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(label)
view.addConstraints([
NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.TopMargin, multiplier: 1.0, constant: 5.0),
NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 0.0),
NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.LessThanOrEqual, toItem: view, attribute: NSLayoutAttribute.BottomMargin, multiplier: 1.0, constant: 0.0)
])
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
EDIT
To be clear, I am not looking for an alternative solution which 'just works' — I want to understand what this difference is and what I should be doing to emulate it, or potentially another semantically correct way.

Answer 1

My only explanation is that a UIButton (which inherits from UIControl) somehow adds some extra touch handling.
You are correct that UIButton is special. I did some research while answering a related question a while back and the reason why the button's event fires is mentioned in the Event Handling Guide for iOS: Gesture Recognizers' "Interacting with Other User Interface Controls" section:
In iOS 6.0 and later, default control actions prevent overlapping gesture recognizer behavior. For example, the default action for a button is a single tap. If you have a single tap gesture recognizer attached to a button’s parent view, and the user taps the button, then the button’s action method receives the touch event instead of the gesture recognizer.
It then lists examples and a single finger single tap on a UIButton is one of them.
The way to block gesture recognizers like the default controls do would be to have TestControl override gestureRecognizerShouldBegin: (see UIView Class Reference). If you wanted to mimic UIButton's behavior, you could use something like:
override func gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer) -> Bool {
if let tapGestureRecognizer = gestureRecognizer as? UITapGestureRecognizer {
if tapGestureRecognizer.numberOfTapsRequired == 1 && tapGestureRecognizer.numberOfTouchesRequired == 1 {
return false;
}
}
return true;
}