AsyncDisplayKit/_site/docs/display-node.html

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
    <meta charset='utf-8'>
    <title>AsyncDisplayKit | ASDisplayNode</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="ASDisplayNode" />
    <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/display-node.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>

              </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 class="active">
                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>
      ASDisplayNode
      <a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/display-node.md" target="_blank">Edit on GitHub</a>
    </h1>
    <p></p>

    <p>ASDisplayNode is the main view abstraction over UIView and CALayer.  It initializes and owns a UIView in the same way UIViews create and own their own backing CALayers.  </p>

<p>Usually a node’s properties will be set on a background thread, and its backing view/layer will be lazily constructed with the cached properties collected by the node.  </p>

<p>In some cases, it is desirable to initialize a node and provide a view to be used as the backing view.  These views are provided via a block that will return a view so that the actual construction of the view can be saved until later.  These nodes’ display step happens synchronously.  This is because a node can only be asynchronously displayed when it wraps an _ASDisplayView, not when it wraps a plain UIView.</p>

<p>The view being lazily loaded means that all setup can happen on a background thread up until the point that the view property of the node is actually accessed.  At this point, the cached values of the node will be applied to the newly created view.  From this point forward, the node’s properties should be accessed on the main thread.  Usually these concerns are taken care of by the container class managing the node.</p>

<p>The properties of the ASDisplayNode mirror the properties of UIViews and CALayers as closely as possible.  When there is an overlap, nodes will favor the naming of UIViews (except for position instead of center). </p>


    <div class="docs-prevnext">


    </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>