IGListKit/docs/Classes/IGListCollectionViewLayout.html

423 lines
21 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<title>IGListCollectionViewLayout Class Reference</title>
<link rel="stylesheet" type="text/css" href="../css/jazzy.css" />
<link rel="stylesheet" type="text/css" href="../css/highlight.css" />
<meta charset='utf-8'>
<script src="../js/jquery.min.js" defer></script>
<script src="../js/jazzy.js" defer></script>
</head>
<body>
<a name="//apple_ref/objc/Class/IGListCollectionViewLayout" class="dashAnchor"></a>
<a title="IGListCollectionViewLayout Class Reference"></a>
<header>
<div class="content-wrapper">
<p><a href="../index.html">IGListKit Docs</a> (99% documented)</p>
<p class="header-right"><a href="https://github.com/Instagram/IGListKit"><img src="../img/gh.png"/>View on GitHub</a></p>
</div>
</header>
<div class="content-wrapper">
<p id="breadcrumbs">
<a href="../index.html">IGListKit Reference</a>
<img id="carat" src="../img/carat.png" />
IGListCollectionViewLayout Class Reference
</p>
</div>
<div class="content-wrapper">
<nav class="sidebar">
<ul class="nav-groups">
<li class="nav-group-name">
<a href="../Guides.html">Guides</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../best-practices-and-faq.html">Best Practices and FAQ</a>
</li>
<li class="nav-group-task">
<a href="../getting-started.html">Getting Started</a>
</li>
<li class="nav-group-task">
<a href="../iglistdiffable-and-equality.html">IGListDiffable and Equality</a>
</li>
<li class="nav-group-task">
<a href="../installation.html">Installation</a>
</li>
<li class="nav-group-task">
<a href="../migration.html">Migration</a>
</li>
<li class="nav-group-task">
<a href="../vision.html">VISION</a>
</li>
<li class="nav-group-task">
<a href="../working-with-core-data.html">Working with Core Data</a>
</li>
<li class="nav-group-task">
<a href="../working-with-uicollectionview.html">Working with UICollectionView</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Categories.html">Categories</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Categories.html#/c:objc(cy)NSNumber@IGListDiffable">NSNumber(IGListDiffable)</a>
</li>
<li class="nav-group-task">
<a href="../Categories.html#/c:objc(cy)NSString@IGListDiffable">NSString(IGListDiffable)</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Classes.html">Classes</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Classes/IGListAdapter.html">IGListAdapter</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListAdapterUpdater.html">IGListAdapterUpdater</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListBatchUpdateData.html">IGListBatchUpdateData</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListBindingSectionController.html">IGListBindingSectionController</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListCollectionViewLayout.html">IGListCollectionViewLayout</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListGenericSectionController.html">IGListGenericSectionController</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListIndexPathResult.html">IGListIndexPathResult</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListIndexSetResult.html">IGListIndexSetResult</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListMoveIndex.html">IGListMoveIndex</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListMoveIndexPath.html">IGListMoveIndexPath</a>
</li>
<li class="nav-group-task">
<a href="../Classes.html#/c:objc(cs)IGListReloadDataUpdater">IGListReloadDataUpdater</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListSectionController.html">IGListSectionController</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListSingleSectionController.html">IGListSingleSectionController</a>
</li>
<li class="nav-group-task">
<a href="../Classes/IGListStackedSectionController.html">IGListStackedSectionController</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Constants.html">Constants</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Constants.html#/c:@IGListKitVersionNumber">IGListKitVersionNumber</a>
</li>
<li class="nav-group-task">
<a href="../Constants.html#/c:@IGListKitVersionString">IGListKitVersionString</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Enums.html">Enums</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Enums/IGListDiffOption.html">IGListDiffOption</a>
</li>
<li class="nav-group-task">
<a href="../Enums/IGListExperiment.html">IGListExperiment</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Protocols.html">Protocols</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Protocols/IGListAdapterDataSource.html">IGListAdapterDataSource</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListAdapterDelegate.html">IGListAdapterDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListAdapterUpdaterDelegate.html">IGListAdapterUpdaterDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListBatchContext.html">IGListBatchContext</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListBindable.html">IGListBindable</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListBindingSectionControllerDataSource.html">IGListBindingSectionControllerDataSource</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListBindingSectionControllerSelectionDelegate.html">IGListBindingSectionControllerSelectionDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListCollectionContext.html">IGListCollectionContext</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListDiffable.html">IGListDiffable</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListDisplayDelegate.html">IGListDisplayDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListScrollDelegate.html">IGListScrollDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListSingleSectionControllerDelegate.html">IGListSingleSectionControllerDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListSupplementaryViewSource.html">IGListSupplementaryViewSource</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListUpdatingDelegate.html">IGListUpdatingDelegate</a>
</li>
<li class="nav-group-task">
<a href="../Protocols/IGListWorkingRangeDelegate.html">IGListWorkingRangeDelegate</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Type Definitions.html">Type Definitions</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListUpdatingDelegate.h@T@IGListItemUpdateBlock">IGListItemUpdateBlock</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListUpdatingDelegate.h@T@IGListObjectTransitionBlock">IGListObjectTransitionBlock</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListUpdatingDelegate.h@T@IGListReloadUpdateBlock">IGListReloadUpdateBlock</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListSingleSectionController.h@T@IGListSingleSectionCellConfigureBlock">IGListSingleSectionCellConfigureBlock</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListSingleSectionController.h@T@IGListSingleSectionCellSizeBlock">IGListSingleSectionCellSizeBlock</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListAdapter.h@T@IGListUpdaterCompletion">IGListUpdaterCompletion</a>
</li>
<li class="nav-group-task">
<a href="../Type Definitions.html#/c:IGListUpdatingDelegate.h@T@IGListUpdatingCompletion">IGListUpdatingCompletion</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="../Functions.html">Functions</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="../Functions.html#/c:@F@IGListDiff">IGListDiff</a>
</li>
<li class="nav-group-task">
<a href="../Functions.html#/c:@F@IGListDiffExperiment">IGListDiffExperiment</a>
</li>
<li class="nav-group-task">
<a href="../Functions.html#/c:@F@IGListDiffPaths">IGListDiffPaths</a>
</li>
<li class="nav-group-task">
<a href="../Functions.html#/c:@F@IGListDiffPathsExperiment">IGListDiffPathsExperiment</a>
</li>
<li class="nav-group-task">
<a href="../Functions.html#/c:IGListExperiments.h@F@IGListExperimentEnabled">IGListExperimentEnabled</a>
</li>
</ul>
</li>
</ul>
</nav>
<article class="main-content">
<section>
<section class="section">
<h1>IGListCollectionViewLayout</h1>
<div class="declaration">
<div class="language">
<pre class="highlight"><code>
<span class="k">@interface</span> <span class="nc">IGListCollectionViewLayout</span> <span class="p">:</span> <span class="nc">UICollectionViewLayout</span></code></pre>
</div>
</div>
<p>This UICollectionViewLayout subclass is for vertically-scrolling lists of data with variable widths and heights. It
supports an infinite number of sections and items. All work is done on the main thread, and while extremely efficient,
care must be taken not to stall the main thread in sizing delegate methods.</p>
<p>This layout piggybacks on the mechanics of UICollectionViewFlowLayout in that:</p>
<ul>
<li>Your UICollectionView data source must also conform to UICollectionViewDelegateFlowLayout</li>
<li>Header support given via UICollectionElementKindSectionHeader</li>
</ul>
<p>All UICollectionViewDelegateFlowLayout methods are required and used by this layout:</p>
<pre class="highlight plaintext"><code>- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
</code></pre>
<p>Sections and items are put into the same horizontal row until the max-x position of an item extends beyond the width
of the collection view. When that happens, the item is <q>newlined</q> to the next row. The y position of that row is
determined by the maximum height (including section insets) of the section/item of the previous row.</p>
<p>Ex. of a section (2,0) with a large width causing a newline.</p>
<pre class="highlight plaintext"><code>|[ 0,0 ][ 1,0 ] |
|[ 2,0 ]|
</code></pre>
<p>A section with a non-zero height header will always cause that section to newline. Headers are always stretched to the
width of the collection view, pinched with the section insets.</p>
<p>Ex. of a section (2,0) with a header inset on the left/right.</p>
<pre class="highlight plaintext"><code>|[ 0,0 ][ 1,0 ] |
| &gt;======header=======&lt; |
| [ 2,0 ] |
</code></pre>
<p>Section insets apply to items in the section no matter if they begin on a new row or are on the same row as a previous
section.</p>
<p>Ex. of a section (2) with multiple items and a left inset.</p>
<pre class="highlight plaintext"><code>|[ 0,0 ][ 1,0 ] &gt;[ 2,0 ]|
| &gt;[ 2,1 ][ 2,2 ][ 2,3 ]|
</code></pre>
<p>Interitem spacing applies to items and sections within the same row. Line spacing only applies to items within the same
section.</p>
<p>Please see the unit tests for more configuration examples and expected output.</p>
</section>
<section class="section task-group-section">
<div class="task-group">
<ul>
<li class="item">
<div>
<code>
<a name="/c:objc(cs)IGListCollectionViewLayout(py)stickyHeaderOriginYAdjustment"></a>
<a name="//apple_ref/objc/Property/stickyHeaderOriginYAdjustment" class="dashAnchor"></a>
<a class="token" href="#/c:objc(cs)IGListCollectionViewLayout(py)stickyHeaderOriginYAdjustment">stickyHeaderOriginYAdjustment</a>
</code>
</div>
<div class="height-container">
<div class="pointer-container"></div>
<section class="section">
<div class="pointer"></div>
<div class="abstract">
<p>Set this to adjust the offset of the sticky headers. Can be used to change the sticky header position as UI like the
navigation bar is scrolled offscreen. Changing this to the height of the navigation bar will give the effect of the
headers sticking to the nav as it is collapsed.</p>
<p>@discussion Changing the value on this method will invalidate the layout every time.</p>
</div>
<div class="declaration">
<h4>Declaration</h4>
<div class="language">
<p class="aside-title">Objective-C</p>
<pre class="highlight"><code><span class="k">@property</span> <span class="p">(</span><span class="n">assign</span><span class="p">,</span> <span class="n">readwrite</span><span class="p">,</span> <span class="n">nonatomic</span><span class="p">)</span> <span class="n">CGFloat</span> <span class="n">stickyHeaderOriginYAdjustment</span><span class="p">;</span></code></pre>
</div>
</div>
</section>
</div>
</li>
<li class="item">
<div>
<code>
<a name="/c:objc(cs)IGListCollectionViewLayout(im)initWithStickyHeaders:topContentInset:stretchToEdge:"></a>
<a name="//apple_ref/objc/Method/-initWithStickyHeaders:topContentInset:stretchToEdge:" class="dashAnchor"></a>
<a class="token" href="#/c:objc(cs)IGListCollectionViewLayout(im)initWithStickyHeaders:topContentInset:stretchToEdge:">-initWithStickyHeaders:topContentInset:stretchToEdge:</a>
</code>
</div>
<div class="height-container">
<div class="pointer-container"></div>
<section class="section">
<div class="pointer"></div>
<div class="abstract">
<p>Create and return a new collection view layout.</p>
</div>
<div class="declaration">
<h4>Declaration</h4>
<div class="language">
<p class="aside-title">Objective-C</p>
<pre class="highlight"><code><span class="k">-</span> <span class="p">(</span><span class="n">nonnull</span> <span class="n">instancetype</span><span class="p">)</span><span class="nf">initWithStickyHeaders</span><span class="p">:(</span><span class="n">BOOL</span><span class="p">)</span><span class="nv">stickyHeaders</span>
<span class="nf">topContentInset</span><span class="p">:(</span><span class="n">CGFloat</span><span class="p">)</span><span class="nv">topContentInset</span>
<span class="nf">stretchToEdge</span><span class="p">:(</span><span class="n">BOOL</span><span class="p">)</span><span class="nv">stretchToEdge</span><span class="p">;</span></code></pre>
</div>
</div>
<div>
<h4>Parameters</h4>
<table class="graybox">
<tbody>
<tr>
<td>
<code>
<em>stickyHeaders</em>
</code>
</td>
<td>
<div>
<p>Set to <code>YES</code> to stick section headers to the top of the bounds while scrolling.</p>
</div>
</td>
</tr>
<tr>
<td>
<code>
<em>topContentInset</em>
</code>
</td>
<td>
<div>
<p>The top content inset used to offset the sticky headers. Ignored if stickyHeaders is <code>NO</code>.</p>
</div>
</td>
</tr>
<tr>
<td>
<code>
<em>stretchToEdge</em>
</code>
</td>
<td>
<div>
<p>Specifies whether to stretch width of last item to right edge when distance from last item to right edge &lt; epsilon(1)</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Return Value</h4>
<p>A new collection view layout.</p>
</div>
</section>
</div>
</li>
</ul>
</div>
</section>
</section>
<section id="footer">
<p>&copy; 2017 <a class="link" href="https://twitter.com/fbOpenSource" target="_blank" rel="external">Instagram</a>. All rights reserved. (Last updated: 2017-05-26)</p>
<p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.8.2</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
</section>
</article>
</div>
</body>
</div>
</html>