mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-06-16 05:55:20 +00:00
9bc996374f
git-subtree-dir: submodules/AsyncDisplayKit git-subtree-mainline: d06f423e0ed3df1fed9bd10d79ee312a9179b632 git-subtree-split: 02bedc12816e251ad71777f9d2578329b6d2bef6
99 lines
4.1 KiB
Markdown
Executable File
99 lines
4.1 KiB
Markdown
Executable File
---
|
|
title: ASButtonNode
|
|
layout: docs
|
|
permalink: /docs/button-node.html
|
|
prevPage: cell-node.html
|
|
nextPage: text-node.html
|
|
---
|
|
|
|
### 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.
|
|
|
|
<div class = "highlight-group">
|
|
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
|
|
|
|
<div class = "code">
|
|
<pre lang="objc" class="objcCode">
|
|
[buttonNode setTitle:@"Button Title Normal" withFont:nil withColor:[UIColor blueColor] forState:ASControlStateNormal];
|
|
</pre>
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
buttonNode.setTitle("Button Title Normal", with: nil, with: .blue, for: .normal)
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
If you need even more control, you can also opt to use the attributed string version directly:
|
|
|
|
<div class = "highlight-group">
|
|
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
|
|
|
|
<div class = "code">
|
|
<pre lang="objc" class="objcCode">
|
|
[self.buttonNode setAttributedTitle:attributedTitle forState:ASControlStateNormal];
|
|
</pre>
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
buttonNode.setAttributedTitle(attributedTitle, for: .normal)
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
### Target-Action Pairs
|
|
|
|
Again, analagous to UIKit, you can add sets of target-action pairs to respond to various events.
|
|
|
|
<div class = "highlight-group">
|
|
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
|
|
|
|
<div class = "code">
|
|
<pre lang="objc" class="objcCode">
|
|
[buttonNode addTarget:self action:@selector(buttonPressed:) forControlEvents:ASControlNodeEventTouchUpInside];
|
|
</pre>
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
buttonNode.addTarget(self, action: #selector(buttonPressed), forControlEvents: .touchUpInside)
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
### 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.
|
|
|
|
<div class = "highlight-group">
|
|
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
|
|
|
|
<div class = "code">
|
|
<pre lang="objc" class="objcCode">
|
|
self.buttonNode.contentVerticalAlignment = ASVerticalAlignmentTop;
|
|
self.buttonNode.contentHorizontalAlignment = ASHorizontalAlignmentMiddle;
|
|
</pre>
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
buttonNode.contentVerticalAlignment = .top
|
|
buttonNode.contentHorizontalAlignment = .middle
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "note"><strong>Note:</strong> At the moment, this property will not work if you aren't using <em><code>-layoutSpecThatFits:</code></em>.
|
|
</div>
|
|
|
|
### 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.
|
|
|