AsyncDisplayKit

ASButtonNode

Basic Usage

ASButtonNode subclasses ASControlNode in the same way UIButton subclasses UIControl. In contrast, being able to layer back the subnodes of every button can significantly lighten main thread impact relative to UIButton.

Control State

If you’ve used -setTitle:forControlState: then you already know how to set up an ASButtonNode. The ASButtonNode version adds in a few parameters for conveniently setting attributes.

SwiftObjective-C
[buttonNode setTitle:@"Button Title Normal" withFont:nil withColor:[UIColor blueColor] forState:ASControlStateNormal];

If you need even more control, you can also opt to use the attributed string version directly:

SwiftObjective-C
[self.buttonNode setAttributedTitle:attributedTitle forState:ASControlStateNormal];

Target-Action Pairs

Again, analagous to UIKit, you can add sets of target-action pairs to respond to various events.

SwiftObjective-C
[buttonNode addTarget:self action:@selector(buttonPressed:) forControlEvents:ASControlNodeEventTouchUpInside];

Content Alignment

ASButtonNode offers both contentVerticalAlignment and contentHorizontalAlignment properties. This allows you to easily set the alignment of the titleLabel or image you’re using for your button.

SwiftObjective-C
self.buttonNode.contentVerticalAlignment = ASVerticalAlignmentTop;
self.buttonNode.contentHorizontalAlignment = ASHorizontalAlignmentMiddle;
Note: At the moment, this property will not work if you aren't using -layoutSpecThatFits:.

Gotchas

There are a few things that might trip up someone new to the framework.

View Hierarchies

Let’s say you want to add an ASButtonNode to the view of one of your existing view controllers. The first thing you’ll notice is that setting a title for a control state doesn’t seem to make your title appear. You can fix this by calling -measure: on the button which will cause its title label to be measured and laid out.

The next thing you’ll notice is that, if you set titles of various lengths for different control states, the button will dynamically grow and shrink as the title changes. This is because changing the title causes -setNeedsLayout to be called on the button. Within a node hierarchy, this makes sense, and will work as expected.

Long story short, use an ASViewController.

Selected State

If you want your button to change to a “selected” state after being tapped, you’ll need to do that manually.

Edit on GitHub