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

5978 lines
78 KiB
HTML

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset='utf-8'>
<title>AsyncDisplayKit | ASPagerNode</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="ASPagerNode" />
<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-aspagernode.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>
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 class="active">
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>
ASPagerNode
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/containers-aspagernode.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<p>ASPagerNode is a specialized subclass of ASCollectionNode. Using it allows you to produce a page style UI similar to what you&#39;d create with a UIPageViewController with UIKit. Luckily, the API is quite a bit simpler than UIPageViewController&#39;s.</p>
<p>The main dataSource methods are:</p>
<p><code>- (NSInteger)numberOfPagesInPagerNode:(ASPagerNode *)pagerNode</code></p>
<p>and </p>
<p><code>- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index</code></p>
<p>or</p>
<p><code>- (ASCellNodeBlock)pagerNode:(ASPagerNode *)pagerNode nodeBlockAtIndex:(NSInteger)index</code></p>
<p>These two methods, just as with ASCollectionNode and ASTableNode need to return either an ASCellNode or an block it can use to return one later. </p>
<p>One especially useful pattern is to return an ASCellNode that is initialized with an existing UIViewController or ASViewController.</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index
{
CGSize pagerNodeSize = pagerNode.bounds.size;
NSArray *animals = self.animals[index];
ASCellNode *node = [[ASCellNode alloc] initWithViewControllerBlock:^{
return [[AnimalTableNodeController alloc] initWithAnimals:animals];;
} didLoadBlock:nil];
node.preferredFrameSize = pagerNodeSize;
return node;
}
</code></pre></div>
<p>In this example, you can see that the node is constructed using the <code>-initWithViewControllerBlock:</code> method. It is usually necessary to provide a cell created this way with a preferredFrameSize so that it can be laid out correctly.</p>
<div class="docs-prevnext">
<a class="right" href="/docs/display-node.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>