kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-09 22:38:11 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
38702978c6de17782da1d7a8d9464cb8ad9269b2
AsyncDisplayKit/_site/docs/debug-tool-ASRangeController.html

5724 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 | Range Visualization</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="Range Visualization" />
<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/debug-tool-ASRangeController.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>
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 class="active">
Range Visualization
</a>
</li>
</ul>
</section>
</nav>
<article class='withtoc'>
<h1>
Range Visualization
<a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/debug-tool-ASRangeController.md" target="_blank">Edit on GitHub</a>
</h1>
<p></p>
<h2>Visualize ASRangeController tuning parameters (PR #1390)</h2>
<h3>Description</h3>
<p>This debug feature adds a semi-transparent subview in the bottom right hand corner of the sharedApplication keyWindow that visualizes the ASRangeTuningParameters per each ASLayoutRangeType for each visible (on-screen) instance of ASRangeController. </p>
<ul>
<li>The instances of ASRangeController are represented as bars</li>
<li>As you scroll around within ASTable/CollectionViews you can see the parameters (green = Visible, yellow = Display, and red = FetchData) move relative to each other. </li>
<li>White arrows on the L and R sides of the individual RangeController bar views indicate the scrolling direction so that you can determine the leading / trailing tuning parameters (especially useful for vertically-oriented rangeControllers whose leading edge might be unclear within the horizontally-oriented bar view). </li>
<li>The white debug label above the RangeController bar displays the RangeController dataSource’s class name to differentiate between nested views.</li>
<li>The overlay can be moved with a panning gesture in order to see content under it.</li>
</ul>
<p>This debug feature is useful for highly optimized ASDK apps that require tuning of any ASRangeController. Or for anyone who is curious about how ASRangeControllers work. </p>
<p>The examples/VerticalWithinHorizontal app picture below contains an ASPagerNode with embedded ASTableViews. In the screenshot with this feature enabled, you can see the two range controllers - ASTableView and ASCollectionView (ASPagerNode) - in the overlay.
- The white arrows to the right of the rangeController bars indicate that the user is currently scrolling down through the table and right through the ASCollectionView/PagerNode.
- The ASTableView rangeController bar indicates that the range parameters are tuned to both fetch and decode more data in the downward table direction rather than in the reverse direction (which makes sense as the user is scrolling down).
- Since it’s less obvious whether or not the user will page to the right or left next, the ASCollectionView is tuned to fetch and decode equal amounts of data in each direction.
- In the video, you can see as the user scrolls between pages, that new ASTableView rangeControllers are created and removed in the overlay view.
<img src="https://cloud.githubusercontent.com/assets/3419380/14057072/ef7f63a0-f2b2-11e5-92a5-f65b2d207e63.png" alt="bc0b98f0-ebb8-11e5-8f50-421cb0f320c2"></p>
<h3>Video Demo</h3>
<p>https://drive.google.com/file/d/0B1BArZ05bNhzVy1jSW9FeEVXUjg/view</p>
<h3>Usage</h3>
<p>In your AppDelegate, (1) import <code>AsyncDisplayKit+Debug.h</code> and (2) at the top of <code>didFinishLaunchingWithOptions:</code> enable this feature by adding <code>[ASRangeController setShouldShowRangeDebugOverlay:YES];</code> Make sure to call this method before initializing any component that uses an ASRangeControllers (ASTableView, ASCollectionView).</p>
<h3>Limitations</h3>
<ul>
<li>code performance is iffy</li>
<li>only shows onscreen ASRangeControllers</li>
<li>currently the ratio of red (fetch data), yellow (display) and green (visible) are relative to each other, but not between each bar view. So you cannot compare individual bars to eachother</li>
<li>configure the debug label to display more useful information - perhaps the actual values of the tuning parameters?</li>
<li>rather than displaying the ideal tuning parameters, show the achieved ones</li>
<li>rather than showing the tuning parameters in a bar representation, show the actual nodes in each state</li>
</ul>
<h2>ASLayoutSpecPlayground...coming soon!</h2>
<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