mirror of
https://github.com/HackPlan/AsyncDisplayKit.git
synced 2026-04-03 17:05:34 +08:00
173 lines
8.2 KiB
HTML
173 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width initial-scale=1" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<meta property="og:title" content="Smooth asynchronous user interfaces for iOS apps — AsyncDisplayKit">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="http://asyncdisplaykit.org/index.html">
|
|
<meta property="og:image" content="http://asyncdisplaykit.org/assets/logo-square.png">
|
|
<meta property="og:description" content="Smooth asynchronous user interfaces for iOS apps">
|
|
|
|
<title>Smooth asynchronous user interfaces for iOS apps — AsyncDisplayKit</title>
|
|
<meta name="description" content="Smooth asynchronous user interfaces for iOS apps.">
|
|
|
|
<link rel="stylesheet" href="/css/main.css">
|
|
<link rel="canonical" href="http://asyncdisplaykit.org/">
|
|
|
|
<script>
|
|
if (location.host == "facebook.github.io") {
|
|
// get outta here
|
|
location = 'http://asyncdisplaykit.org';
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<header class="site-header">
|
|
|
|
<div class="wrapper">
|
|
|
|
<a class="site-title" href="/">AsyncDisplayKit</a>
|
|
|
|
<nav class="site-nav">
|
|
<a href="#" class="menu-icon">
|
|
<svg viewBox="0 0 18 15">
|
|
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
|
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
|
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<div class="trigger">
|
|
<a class="page-link" href="/guide">guide</a>
|
|
<a class="page-link" href="/appledoc">api</a>
|
|
<a class="page-link" href="https://github.com/facebook/AsyncDisplayKit">github</a>
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<div class="page-content">
|
|
<div class="wrapper">
|
|
<div class="post">
|
|
|
|
|
|
|
|
<article class="post-content">
|
|
<p><img src="/assets/logo.png" alt="logo"></p>
|
|
|
|
<p>AsyncDisplayKit is an iOS framework that keeps even the most complex user
|
|
interfaces smooth and responsive. It was originally built to make Facebook's
|
|
<a href="https://facebook.com/paper">Paper</a> possible, and goes hand-in-hand with
|
|
<a href="https://github.com/facebook/pop">pop</a>'s physics-based animations — but
|
|
it's just as powerful with UIKit Dynamics and conventional app designs.</p>
|
|
|
|
<p><br /></p>
|
|
|
|
<h3>Quick start</h3>
|
|
|
|
<p>ASDK is available on <a href="http://cocoapods.org">CocoaPods</a>. Add the following to your Podfile:</p>
|
|
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">pod</span> <span class="s1">'AsyncDisplayKit'</span>
|
|
</code></pre></div>
|
|
<p>(ASDK can also be used as a regular static library: Copy the project to your
|
|
codebase manually, adding <code>AsyncDisplayKit.xcodeproj</code> to your workspace. Add
|
|
<code>libAsyncDisplayKit.a</code>, AssetsLibrary, and Photos to the "Link Binary With
|
|
Libraries" build phase. Include <code>-lc++ -ObjC</code> in your project linker flags.)</p>
|
|
|
|
<p>Import the framework header, or create an <a href="https://developer.apple.com/library/ios/documentation/swift/conceptual/buildingcocoaapps/MixandMatch.html">Objective-C bridging
|
|
header</a>
|
|
if you're using Swift:</p>
|
|
<div class="highlight"><pre><code class="language-objective-c" data-lang="objective-c"><span class="cp">#import <AsyncDisplayKit/AsyncDisplayKit.h></span>
|
|
</code></pre></div>
|
|
<p>AsyncDisplayKit Nodes are a thread-safe abstraction layer over UIViews and
|
|
CALayers:</p>
|
|
|
|
<p><img src="/assets/node-view-layer.png" alt="logo"></p>
|
|
|
|
<p>You can construct entire node hierarchies in parallel, or instantiate and size
|
|
a single node on a background thread — for example, you could do
|
|
something like this in a UIViewController:</p>
|
|
<div class="highlight"><pre><code class="language-objective-c" data-lang="objective-c"><span class="n">dispatch_async</span><span class="p">(</span><span class="n">_backgroundQueue</span><span class="p">,</span> <span class="o">^</span><span class="p">{</span>
|
|
<span class="n">ASTextNode</span> <span class="o">*</span><span class="n">node</span> <span class="o">=</span> <span class="p">[[</span><span class="n">ASTextNode</span> <span class="n">alloc</span><span class="p">]</span> <span class="n">init</span><span class="p">];</span>
|
|
<span class="n">node</span><span class="p">.</span><span class="n">attributedString</span> <span class="o">=</span> <span class="p">[[</span><span class="bp">NSAttributedString</span> <span class="n">alloc</span><span class="p">]</span> <span class="nl">initWithString</span><span class="p">:</span><span class="s">@"hello!"</span>
|
|
<span class="nl">attributes</span><span class="p">:</span><span class="nb">nil</span><span class="p">];</span>
|
|
<span class="p">[</span><span class="n">node</span> <span class="nl">measure</span><span class="p">:</span><span class="n">CGSizeMake</span><span class="p">(</span><span class="n">screenWidth</span><span class="p">,</span> <span class="n">FLT_MAX</span><span class="p">)];</span>
|
|
<span class="n">node</span><span class="p">.</span><span class="n">frame</span> <span class="o">=</span> <span class="p">(</span><span class="bp">CGRect</span><span class="p">){</span> <span class="n">CGPointZero</span><span class="p">,</span> <span class="n">node</span><span class="p">.</span><span class="n">calculatedSize</span> <span class="p">};</span>
|
|
|
|
<span class="c1">// self.view isn't a node, so we can only use it on the main thread</span>
|
|
<span class="n">dispatch_async</span><span class="p">(</span><span class="n">dispatch_get_main_queue</span><span class="p">(),</span> <span class="o">^</span><span class="p">{</span>
|
|
<span class="p">[</span><span class="nb">self</span><span class="p">.</span><span class="n">view</span> <span class="nl">addSubview</span><span class="p">:</span><span class="n">node</span><span class="p">.</span><span class="n">view</span><span class="p">];</span>
|
|
<span class="p">});</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
<p>AsyncDisplayKit at a glance:</p>
|
|
|
|
<ul>
|
|
<li><code>ASImageNode</code> and <code>ASTextNode</code> are drop-in replacements for UIImageView and
|
|
UITextView.</li>
|
|
<li><code>ASMultiplexImageNode</code> can load and display progressively higher-quality
|
|
variants of an image over a slow cell network, letting you quickly show a
|
|
low-resolution photo while the full size downloads.</li>
|
|
<li><code>ASNetworkImageNode</code> is a simpler, single-image counterpart to the Multiplex
|
|
node.</li>
|
|
<li><code>ASTableView</code> and <code>ASCollectionView</code> are a node-aware UITableView and
|
|
UICollectionView, respectively, that can asynchronously preload cell nodes
|
|
— from loading network data to rendering — all without blocking
|
|
the main thread.</li>
|
|
</ul>
|
|
|
|
<p>You can also easily <a href="https://github.com/facebook/AsyncDisplayKit/blob/master/AsyncDisplayKit/ASDisplayNode%2BSubclasses.h">create your own
|
|
nodes</a>
|
|
to implement node hierarchies or custom drawing.</p>
|
|
|
|
<p><br /></p>
|
|
|
|
<h3>Learn more</h3>
|
|
|
|
<ul>
|
|
<li>Read the <a href="/guide">Getting Started guide</a></li>
|
|
<li>Get the <a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples">sample projects</a></li>
|
|
<li>Browse the <a href="/appledoc">API reference</a></li>
|
|
<li>Watch the <a href="http://vimeo.com/103589245">NSLondon talk</a></li>
|
|
</ul>
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
|
|
<div class="wrapper">
|
|
<div class="footer-col-wrapper">
|
|
<div class="footer-col footer-col-left">
|
|
<p class="text">a Facebook & Instagram collaboration ♥</p>
|
|
</div>
|
|
|
|
<div class="footer-col footer-col-right">
|
|
<p class="text">
|
|
© 2014 Facebook Inc (<a href="/license/">CC-BY-4.0</a>)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|