Swiftgram/_site/docs/containers-overview.html
2016-04-17 22:49:14 -07:00

5968 lines
78 KiB
HTML

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset='utf-8'>
<title>AsyncDisplayKit | Containers Overview</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="Containers Overview" />
<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/containers-overview.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>
Getting Started
</a>
</li>
<li>
<a href=/docs/philosophy.html>
Philosophy
</a>
</li>
<li>
<a href=/docs/installation.html>
Installation
</a>
</li>
<li>
<a href=/docs/references.html>
References
</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/containers-overview.html class="active">
Containers Overview
</a>
</li>
<li>
<a href=/docs/containers-asviewcontroller.html>
ASViewController
</a>
</li>
<li>
<a href=/docs/containers-astablenode.html>
ASTableNode
</a>
</li>
<li>
<a href=/docs/containers-ascollectionnode.html>
ASCollectionNode
</a>
</li>
<li>
<a href=/docs/containers-aspagernode.html>
ASPagerNode
</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/automatic-layout-basics.html>
Layout Basics
</a>
</li>
<li>
<a href=/docs/automatic-layout-containers.html>
Layout Containers
</a>
</li>
<li>
<a href=/docs/automatic-layout-examples.html>
Layout Examples
</a>
</li>
<li>
<a href=/docs/automatic-layout-debugging.html>
Layout Debugging
</a>
</li>
<li>
<a href=/docs/layout-options.html>
Layout Options
</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/hit-test-slop.html>
Hit Test Slop
</a>
</li>
<li>
<a href=/docs/image-modification-block.html>
Image Modification Blocks
</a>
</li>
<li>
<a href=/docs/placeholder-fade-duration.html>
Placeholder Fade Duration
</a>
</li>
</ul>
</section>
<section>
<h3>Debug Tools</h3>
<ul>
<li>
<a href=/docs/debug-tool-pixel-scaling.html>
Image Scaling
</a>
</li>
<li>
<a href=/docs/debug-tool-hit-test-slop.html>
Hit Test Visualization
</a>
</li>
<li>
<a href=/docs/debug-tool-ASRangeController.html>
Range Visualization
</a>
</li>
</ul>
</section>
</nav>
<article class='withtoc'>
<h1>
Containers Overview
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/containers-overview.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<h2>Use Nodes in Node Containers</h2>
<p>For optimal performance, use nodes within a node container. ASDK offers the following node containers</p>
<ul>
<li><code>ASViewController</code> in place of UIKit&#39;s <code>UIViewController</code></li>
<li><code>ASCollectioNode</code> in place of UIKit&#39;s <code>UICollectionView</code></li>
<li><code>ASTableNode</code> in place of UIKit&#39;s <code>UITableView</code></li>
<li><code>ASPagerNode</code> in place of UIKit&#39;s <code>UIPagerView</code></li>
</ul>
<h4>Examples</h4>
<p>Examples of these node containers can be found in the <a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples">sample projects</a>. Example code and specific sample apps are highlighted in the documentation for each node container. </p>
<p>For a guide on porting your UIKit app to ASDK see Porting Your App (INCLUDE LINK).</p>
<h4>For the More Curious Developer...</h4>
<p>To optimize performance of an app, ASDK uses intelligent preloading to determine when content will become visible to a user. The node containers above asynchronously trigger data downloading, decoding and rendering of images and text before they reach the device&#39;s onscren display area. The node containers above manage all of this automatically for their subnodes. For reference, UIKit does not render images or text before content comes on screen. </p>
<p>It is possible to use nodes directly, without an ASDK container, but unless you add additional calls, they will only start displaying once they come onscreen, which can lead to performance degredation and flashing of content. </p>
<div class="docs-prevnext">
<a class="right" href="/docs/containers-asviewcontroller.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>