kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-02 22:35:22 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
299b972197acbc7ca030d94dc369a0875dadeeaf
AsyncDisplayKit/_site/docs/multiplex-image-node.html
Luke Parham 893143bac5 changed styling to be more like old site
2016-04-06 02:24:37 -05:00

4553 lines
63 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset='utf-8'>
<title>AsyncDisplayKit | ASMultiplexImageNode</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="ASMultiplexImageNode" />
<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/multiplex-image-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>
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>
ASMultiplexImageNode
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/multiplex-image-node.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<p>Create components using the <code>newWithView:size:</code> class method:</p>
<div class="highlight"><pre><code class="language-objc++" data-lang="objc++"><span class="p">+</span> <span class="p">(</span><span class="kt">instancetype</span><span class="p">)</span><span class="nf">newWithView:</span><span class="p">(</span><span class="k">const</span> <span class="n">CKComponentViewConfiguration</span> <span class="o">&amp;</span><span class="p">)</span><span class="nv">view</span>
<span class="nf">size:</span><span class="p">(</span><span class="k">const</span> <span class="n">CKComponentSize</span> <span class="o">&amp;</span><span class="p">)</span><span class="nv">size</span><span class="p">;</span>
</code></pre></div>
<p>It&#39;s important to note that you don&#39;t pass a <code>UIView</code> directly, but a <code>CKComponentViewConfiguration</code>. What&#39;s that?</p>
<div class="highlight"><pre><code class="language-objc++" data-lang="objc++"><span class="k">struct</span> <span class="n">CKComponentViewConfiguration</span> <span class="p">{</span>
<span class="n">CKComponentViewClass</span> <span class="n">viewClass</span><span class="p">;</span>
<span class="n">std</span><span class="o">::</span><span class="n">unordered_map</span><span class="o">&lt;</span><span class="n">CKComponentViewAttribute</span><span class="p">,</span> <span class="kt">id</span><span class="o">&gt;</span> <span class="n">attributes</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div>
<p>The first field is a view class. Ignore <code>CKComponentViewClass</code> for now — in most cases you just pass a class like <code>[UIImageView class]</code> or <code>[UIButton class]</code>.</p>
<p>The second field holds a map of attributes to values: font, color, background image, and so forth. Again, ignore <code>CKComponentViewAttribute</code> for now; you can usually use a <code>SEL</code> as the attribute.</p>
<p>Let&#39;s put one together:</p>
<div class="highlight"><pre><code class="language-objc++" data-lang="objc++"><span class="p">[</span><span class="n">CKComponent</span>
<span class="nl">newWithView</span><span class="p">:{</span>
<span class="p">[</span><span class="bp">UIImageView</span> <span class="k">class</span><span class="p">],</span>
<span class="p">{</span>
<span class="p">{</span><span class="k">@selector</span><span class="p">(</span><span class="nl">setImage</span><span class="p">:),</span> <span class="n">image</span><span class="p">},</span>
<span class="p">{</span><span class="k">@selector</span><span class="p">(</span><span class="nl">setContentMode</span><span class="p">:),</span> <span class="l">@(</span><span class="n">UIViewContentModeCenter</span><span class="l">)</span><span class="p">}</span> <span class="c1">// Wrapping into an NSNumber</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nl">size</span><span class="p">:{</span><span class="n">image</span><span class="p">.</span><span class="n">size</span><span class="p">.</span><span class="n">width</span><span class="p">,</span> <span class="n">image</span><span class="p">.</span><span class="n">size</span><span class="p">.</span><span class="n">height</span><span class="p">}];</span>
</code></pre></div>
<p>That&#39;s all there is to it. ComponentKit does this for us:</p>
<ul>
<li>Automatically creates or reuses a <code>UIImageView</code> when the component is mounted</li>
<li>Automatically calls <code>setImage:</code> and <code>setContentMode:</code> with the given values</li>
<li>Skips calling <code>setImage:</code> or <code>setContentMode:</code> if the value is unchanged between two updates — the most common case when updating a tree.</li>
</ul>
<h2>Primitive Arguments</h2>
<p>The values in the map are of type <code>id</code>, so if you want to pass in primitive types like <code>BOOL</code>, you have to wrap them into an <code>NSValue</code> object using e.g. <code>@(value)</code> and ComponentKit will unwrap them.</p>
<h2>Viewless Components</h2>
<p>Often there exist logical components that don&#39;t need a corresponding view in the view hierarchy. For example a <code>CKStackLayoutComponent</code> often doesn&#39;t need to have a view; it only needs to position various subviews inside a designated area. In such situations, just pass <code>{}</code> for the view configuration and no view is created. For example:</p>
<div class="highlight"><pre><code class="language-objc++" data-lang="objc++"><span class="p">[</span><span class="n">CKComponent</span> <span class="nl">newWithView</span><span class="p">:{}</span> <span class="nl">size</span><span class="p">:{}]</span>
</code></pre></div>
<p>(You can also just use <code>+new</code> directly, which uses this as the default.)</p>
<h2>Advanced Views</h2>
<p>This is sufficient for most cases, but there is considerably more power when you need it. See <a href="advanced-views.html">Advanced Views</a> if you want to learn more.</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>
Reference in New Issue View Git Blame Copy Permalink