kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-02 17:07:58 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
3cc79190e696fc4b540e1905abed1024d5c2137a
AsyncDisplayKit/_site/docs/getting-started.html
Luke Parham 893143bac5 changed styling to be more like old site
2016-04-06 02:24:37 -05:00

4572 lines
63 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset='utf-8'>
<title>AsyncDisplayKit | </title>
<link rel='stylesheet' href='/static/main.css' type='text/css'/>
<link rel="stylesheet" href='/static/pygments.css' type='text/css'/>
<link rel='shortcut icon' href='/static/favicon.png'>
<meta name='viewport' content='width=480'>
<meta property="og:title" content="" />
<meta property="og:site_name" content="AsyncDisplayKit">
<meta property='og:description' content='AsyncDisplayKit: A Library for Functional UI on iOS.'>
<meta property='og:image' content='http://asyncdisplaykit.org/static/asyncdisplaykit-og-image.png'>
<meta property='og:url' content="http://asyncdisplaykit.org/docs/getting-started.html">
<meta property='og:type' content='website'>
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">{'try{Typekit.load();}catch(e){}'}</script>
</head>
<body>
<header class='topbar site-header'><nav class='width'>
<a class="site-title" href="/">AsyncDisplayKit</a>
<ul>
<li><a href="/docs/getting-started.html" class="active" >
docs
</a></li>
<li><a href="/appledocs.html" >api</a></li>
<li><a href="/resources.html" >resources</a></li>
<li><a href="http://github.com/facebook/AsyncDisplayKit">github</a>
</ul>
</nav></header>
<section class='content'><div class='width'>
<nav class='toc'>
<section>
<h3>Quick Start</h3>
<ul>
<li>
<a href=/docs/getting-started.html class="active">
</a>
</li>
</ul>
</section>
<section>
<h3>Core Concepts</h3>
<ul>
<li>
<a href=/docs/intelligent-preloading.html>
Intelligent Preloading
</a>
</li>
<li>
<a href=/docs/subclassing.html>
Subclassing
</a>
</li>
<li>
<a href=/docs/layout-engine.html>
Layout Engine
</a>
</li>
</ul>
</section>
<section>
<h3>Node Containers</h3>
<ul>
<li>
<a href=/docs/asviewcontroller.html>
ASViewController
</a>
</li>
<li>
<a href=/docs/aspagernode.html>
ASPagerNode
</a>
</li>
<li>
<a href=/docs/ascollectionnode.html>
ASCollectionNode
</a>
</li>
<li>
<a href=/docs/astablenode.html>
ASTableNode
</a>
</li>
</ul>
</section>
<section>
<h3>Nodes</h3>
<ul>
<li>
<a href=/docs/display-node.html>
ASDisplayNode
</a>
</li>
<li>
<a href=/docs/cell-node.html>
ASCellNode
</a>
</li>
<li>
<a href=/docs/text-cell-node.html>
ASTextCellNode
</a>
</li>
<li>
<a href=/docs/control-node.html>
ASControlNode
</a>
</li>
<li>
<a href=/docs/button-node.html>
ASButtonNode
</a>
</li>
<li>
<a href=/docs/text-node.html>
ASTextNode
</a>
</li>
<li>
<a href=/docs/editable-text-node.html>
ASEditableTextNode
</a>
</li>
<li>
<a href=/docs/image-node.html>
ASImageNode
</a>
</li>
<li>
<a href=/docs/network-image-node.html>
ASNetworkImageNode
</a>
</li>
<li>
<a href=/docs/map-node.html>
ASMapNode
</a>
</li>
<li>
<a href=/docs/video-node.html>
ASVideoNode
</a>
</li>
<li>
<a href=/docs/scroll-node.html>
ASScrollNode
</a>
</li>
</ul>
</section>
<section>
<h3>Layout Engine</h3>
<ul>
<li>
<a href=/docs/stack-layout-spec.html>
ASStackLayoutSpec
</a>
</li>
<li>
<a href=/docs/inset-layout-spec.html>
ASInsetLayoutSpec
</a>
</li>
<li>
<a href=/docs/background-layout-spec.html>
ASBackgroundLayoutSpec
</a>
</li>
<li>
<a href=/docs/center-layout-spec.html>
ASCenterLayoutSpec
</a>
</li>
<li>
<a href=/docs/overlay-layout-spec.html>
ASOverlayLayoutSpec
</a>
</li>
<li>
<a href=/docs/relative-layout-spec.html>
ASRelativeLayoutSpec
</a>
</li>
<li>
<a href=/docs/static-layout-spec.html>
ASStaticLayoutSpec
</a>
</li>
</ul>
</section>
<section>
<h3>Optimizations</h3>
<ul>
<li>
<a href=/docs/layer-backing.html>
Layer Backing
</a>
</li>
<li>
<a href=/docs/synchronous-concurrency.html>
Synchronous Concurrency
</a>
</li>
<li>
<a href=/docs/subtree-rasterization.html>
Subtree Rasterization
</a>
</li>
<li>
<a href=/docs/drawing-priority.html>
Drawing Priority
</a>
</li>
</ul>
</section>
<section>
<h3>Conveniences</h3>
<ul>
<li>
<a href=/docs/debugging.html>
Debug Tools
</a>
</li>
<li>
<a href=/docs/hit-test-slop.html>
Hit Test Slop
</a>
</li>
<li>
<a href=/docs/placeholder-fade-duration.html>
Placeholder Fade Duration
</a>
</li>
</ul>
</section>
</nav>
<article class='withtoc'>
<h1>
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/getting-started.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<h1 class = "post-title">Getting Started</h1>
<p>AsyncDisplayKit&#39;s basic unit is the <code>node</code>. ASDisplayNode is an abstraction
over UIView, which in turn is an abstraction over CALayer. Unlike views, which
can only be used on the main thread, nodes are thread-safe: you can
instantiate and configure entire hierarchies of them in parallel on background
threads.</p>
<p>To keep its user interface smooth and responsive, your app should render at 60
frames per second &mdash; the gold standard on iOS. This means the main thread
has one-sixtieth of a second to push each frame. That&#39;s 16 milliseconds to
execute all layout and drawing code! And because of system overhead, your code
usually has less than ten milliseconds to run before it causes a frame drop.</p>
<p>AsyncDisplayKit lets you move image decoding, text sizing and rendering, and
other expensive UI operations off the main thread. It has other tricks up its
sleeve too... but we&#39;ll get to that later. :]</p>
<h2><a href = "/docs/display-node.html">Nodes</a></h2>
<p>If you&#39;re used to working with views, you already know how to use nodes. Most methods have a node equivalent and most UIView and CALayer properties are available as well. In any case where there is a naming discrepancy (such as .clipsToBounds vs .masksToBounds), nodes will default to the UIView name. The only exception is that nodes use position instead of center.</p>
<p>Of course, you can always access the underlying view or layer directly via <code>node.view</code> or <code>node.layer</code>.</p>
<p>Some of AsyncDisplayKit&#39;s core nodes include:</p>
<ul>
<li> <strong>ASDisplayNode</strong>. Counterpart to UIView &mdash; subclass to make custom nodes.</li>
<li> <strong>ASCellNode</strong>. Counterpart to UICollectionViewCell or UITableViewCell &mdash; subclass to make custom cells or initialize with a view controller.</li>
<li> <strong>ASControlNode</strong>. Analogous to UIControl &mdash; subclass to make buttons.</li>
<li> <strong>ASImageNode</strong>. Like UIImageView &mdash; decodes images asynchronously.</li>
<li> <strong>ASTextNode</strong>. Like UITextView &mdash; built on TextKit with full-featured
rich text support.</li>
</ul>
<h2><a href = "/docs/asviewcontroller.html">Node Containers</a></h2>
<p>When converting an app to use AsyncDisplayKit, a common mistake is to add nodes directly to an existing view hierarchy. Doing this will virtually guarantee that your nodes will flash as they are rendered. </p>
<p>Instead, you should add nodes as subnodes of one of the container classes. These classes are in charge of telling contained nodes what state they&#39;re currently in so that data can be loaded and nodes can be rendered as efficiently as possible. You should think of these classes as the integration point between UIKit and ASDK.</p>
<p>The four node containers are:</p>
<ul>
<li> <strong>ASViewController</strong>. A UIViewController subclass that allows you to provide the managed node.</li>
<li> <strong>ASCollectionNode</strong>. Analogous to UICollectionView &mdash; manages a collection of ASCellNodes.</li>
<li> <strong>ASTableNode</strong>. Analagous to UITableView &mdash; also uses ASCellNode but has with a fixed width.</li>
<li> <strong>ASPagerNode</strong>. A specialized ASCollectionNode which can be used in the same way as a UIPageViewController.</li>
</ul>
<h2><a href = "/docs/layout-enginec.html">Layout Engine</a></h2>
<p>AsyncDisplayKit&#39;s layout engine is both one of its most powerful and one of its most unique features. Based on the CSS FlexBox model, it provides a declarative way of specifying a custom node&#39;s size and layout of its subnodes. While all nodes are concurrently rendered by default, asynchronous measurement and layout are performed by providing an ASLayoutSpec for each node.</p>
<p>The layout engine is based on the idea of ASLayouts which contain a position and size and ASLayoutSpecs which define various layouts conceptually and are used to output a calculated ASLayout. Layout specs can be composed of both child nodes as well as other layout specs which </p>
<p>A few layout specs:</p>
<ul>
<li> <strong>ASLayoutSpec</strong>. Produces sizes and positions for its related node.</li>
<li> <strong>ASStackLayoutSpec</strong>. Allows you to lay out nodes in a very similar way to UIStackView.</li>
<li> <strong>ASBackgroundLayoutSpec</strong>. Set a background for a node.</li>
<li> <strong>ASStaticLayoutSpec</strong>. Useful when you want to manually define a static size in which to contain a set of nodes.</li>
</ul>
<div class="docs-prevnext">
<a class="right" href="/docs/intelligent-preloading.html">Next &rarr;</a>
</div>
<a id="_"></a>
</article>
</div></section>
<footer class="copyright"-><div class='width'>
a Facebook &amp; Instagram collaboration &#x2665;
</div></footer>
<script src="/static/linkify.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44373548-4', 'auto');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink