kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-09 08:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
a72b4a3fe3437eb174e1b15fb8a60099fa508e4c
AsyncDisplayKit/_site/docs/automatic-layout-basics.html
Luke Parham 5f16a05397 tweaks and fixing 'next's
2016-04-10 18:08:42 -05:00

5713 lines
76 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset='utf-8'>
<title>AsyncDisplayKit | Layout Basics</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="Layout Basics" />
<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/automatic-layout-basics.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/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/automatic-layout-basics.html class="active">
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>
Layout Basics
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/automatic-layout-basics.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<h2>Box Model Layout</h2>
<p>ASLayout is an automatic, asynchronous, purely Objective-C box model layout feature. It is a simplified version of CSS flex box, loosely inspired by ComponetKit’s Layout. It is designed to make your layouts extensible and reusable.</p>
<p><code>UIView</code> instances store position and size in their <code>center</code> and <code>bounds</code> properties. As constraints change, Core Animation performs a layout pass to call <code>layoutSubviews</code>, asking views to update these properties on their subviews. </p>
<p><code>&lt;ASLayoutable&gt;</code> instances (all ASDisplayNodes and subclasses) do not have any size or position information. Instead, AsyncDisplayKit calls the <code>layoutSpecThatFits:</code> method with a given size constraint and the component must return a structure describing both its size, and the position and sizes of its children.</p>
<h2>Terminology</h2>
<p>The terminology is a bit confusing, so here is a brief description of all of the ASDK automatic layout players:</p>
<p>Items that conform to the <strong>&lt;ASLayoutable&gt; protocol</strong> declares a method for measuring the layout of an object. A layout is defined by an ASLayout return value, and must specify 1) the size (but not position) of the layoutable object, and 2) the size and position of all of its immediate child objects. The tree recursion is driven by parents requesting layouts from their children in order to determine their size, followed by the parents setting the position of the children once the size is known.</p>
<p>This protocol also implements a &quot;family&quot; of layoutable protocols - the <code>AS{*}LayoutSpec</code> protocols. These protocols contain layout options that can be used for specific layout specs. For example, <code>ASStackLayoutSpec</code> has options defining how a layoutable should shrink or grow based upon available space. These layout options are all stored in an <code>ASLayoutOptions</code> class (that is defined in <code>ASLayoutablePrivate</code>). Generally you needn&#39;t worry about the layout options class, as the layoutable protocols allow all direct access to the options via convenience properties. If you are creating custom layout spec, then you can extend the backing layout options class to accommodate any new layout options.</p>
<p>All ASDisplayNodes and subclasses as well as the <code>ASLayoutSpecs</code> conform to this protocol. </p>
<p>An <strong><code>ASLayoutSpec</code></strong> is an immutable object that describes a layout. Creation of a layout spec should only happen by a user in layoutSpecThatFits:. During that method, a layout spec can be created and mutated. Once it is passed back to ASDK, the isMutable flag will be set to NO and any further mutations will cause an assert.</p>
<p>Every ASLayoutSpec must act on at least one child. The ASLayoutSpec has the responsibility of holding on to the spec children. Some layout specs, like ASInsetLayoutSpec, only require a single child. Others, have multiple. </p>
<p>You don’t need to be aware of <strong><code>ASLayout</code></strong> except to know that it represents a computed immutable layout tree and is returned by objects conforming to the <code>&lt;ASLayoutable&gt;</code> protocol.</p>
<h2>Layout for UIKit Components:</h2>
<ul>
<li>for UIViews that are added directly, you will still need to manually lay it out in <code>didLoad:</code></li>
<li>for UIViews that are added ASDisplay initWithViewBlock, you can then include it in <code>layoutSpecThatFits:</code></li>
</ul>
<div class="docs-prevnext">
<a class="right" href="/docs/automatic-layout-containers.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