forked from SwipeCellKit/SwipeCellKit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
314 lines (269 loc) · 22.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<title>SwipeCellKit 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 title="SwipeCellKit Reference"></a>
<header>
<div class="content-wrapper">
<p><a href="index.html">SwipeCellKit Docs</a> (100% documented)</p>
<p class="header-right"><a href="https://github.com/SwipeCellKit/SwipeCellKit"><img src="img/gh.png"/>View on GitHub</a></p>
</div>
</header>
<div class="content-wrapper">
<p id="breadcrumbs">
<a href="index.html">SwipeCellKit Reference</a>
<img id="carat" src="img/carat.png" />
SwipeCellKit 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="advanced.html">Advanced</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/SwipeAction.html">SwipeAction</a>
</li>
<li class="nav-group-task">
<a href="Classes/SwipeTableViewCell.html">SwipeTableViewCell</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="Enums.html">Enumerations</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Enums/ExpansionFulfillmentStyle.html">ExpansionFulfillmentStyle</a>
</li>
<li class="nav-group-task">
<a href="Enums/SwipeActionStyle.html">SwipeActionStyle</a>
</li>
<li class="nav-group-task">
<a href="Enums/SwipeActionsOrientation.html">SwipeActionsOrientation</a>
</li>
<li class="nav-group-task">
<a href="Enums/SwipeTransitionStyle.html">SwipeTransitionStyle</a>
</li>
<li class="nav-group-task">
<a href="Enums/SwipeVerticalAlignment.html">SwipeVerticalAlignment</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/SwipeActionTransitioning.html">SwipeActionTransitioning</a>
</li>
<li class="nav-group-task">
<a href="Protocols/SwipeExpanding.html">SwipeExpanding</a>
</li>
<li class="nav-group-task">
<a href="Protocols/SwipeTableViewCellDelegate.html">SwipeTableViewCellDelegate</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="Structs.html">Structures</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Structs/ScaleAndAlphaExpansion.html">ScaleAndAlphaExpansion</a>
</li>
<li class="nav-group-task">
<a href="Structs/ScaleTransition.html">ScaleTransition</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeActionTransitioningContext.html">SwipeActionTransitioningContext</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionAnimationTimingParameters.html">SwipeExpansionAnimationTimingParameters</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionStyle.html">SwipeExpansionStyle</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionStyle/Target.html">– Target</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionStyle/Trigger.html">– Trigger</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionStyle/CompletionAnimation.html">– CompletionAnimation</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeExpansionStyle/FillOptions.html">– FillOptions</a>
</li>
<li class="nav-group-task">
<a href="Structs/SwipeTableOptions.html">SwipeTableOptions</a>
</li>
</ul>
</li>
</ul>
</nav>
<article class="main-content">
<section>
<section class="section">
<h1 id='swipecellkit' class='heading'>SwipeCellKit</h1>
<p><a href="https://travis-ci.org/jerkoch/SwipeCellKit"><img src="https://travis-ci.org/jerkoch/SwipeCellKit.svg" alt="Build Status"></a>
<a href="https://cocoapods.org/pods/SwipeCellKit"><img src="https://img.shields.io/cocoapods/v/SwipeCellKit.svg" alt="Version Status"></a>
<a href="https://developer.apple.com/swift/"><img src="https://img.shields.io/badge/Swift-4.0-orange.svg?style=flat" alt="Swift 4.0"></a>
<a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/cocoapods/l/SwipeCellKit.svg" alt="license MIT"></a>
<a href="https://swipecellkit.github.io/SwipeCellKit/"><img src="https://img.shields.io/cocoapods/p/SwipeCellKit.svg" alt="Platform"></a>
<a href="https://github.com/Carthage/Carthage"><img src="https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat" alt="Carthage compatible"></a>
<a href="https://twitter.com/mkurabi"><img src="https://img.shields.io/badge/twitter-@mkurabi-blue.svg?style=flat" alt="Twitter"></a></p>
<p><em>Swipeable UITableViewCell based on the stock Mail.app, implemented in Swift.</em></p>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Hero.gif" /></p>
<h2 id='about' class='heading'>About</h2>
<p>A swipeable UITableViewCell with support for:</p>
<ul>
<li>Left and right swipe actions</li>
<li>Action buttons with: <em>text only, text + image, image only</em></li>
<li>Haptic Feedback</li>
<li>Customizable transitions: <em>Border, Drag, and Reveal</em></li>
<li>Customizable action button behavior during swipe</li>
<li>Animated expansion when dragging past threshold</li>
<li>Customizable expansion animations</li>
<li>Accessibility</li>
</ul>
<h2 id='background' class='heading'>Background</h2>
<p>Check out my <a href="https://jerkoch.com/2017/02/07/swiper-no-swiping.html">blog post</a> on how <em>SwipeCellKit</em> came to be.</p>
<h2 id='demo' class='heading'>Demo</h2>
<h3 id='transition-styles' class='heading'>Transition Styles</h3>
<p>The transition style describes how the action buttons are exposed during the swipe.</p>
<h4 id='border' class='heading'>Border</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Transition-Border.gif" /></p>
<h4 id='drag' class='heading'>Drag</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Transition-Drag.gif" /></p>
<h4 id='reveal' class='heading'>Reveal</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Transition-Reveal.gif" /></p>
<h4 id='customized' class='heading'>Customized</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Transition-Delegate.gif" /></p>
<h3 id='expansion-styles' class='heading'>Expansion Styles</h3>
<p>The expansion style describes the behavior when the cell is swiped past a defined threshold.</p>
<h4 id='none' class='heading'>None</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Expansion-None.gif" /></p>
<h4 id='selection' class='heading'>Selection</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Expansion-Selection.gif" /></p>
<h4 id='destructive' class='heading'>Destructive</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Expansion-Destructive.gif" /></p>
<h4 id='customized' class='heading'>Customized</h4>
<p align="center"><img src="https://raw.githubusercontent.com/jerkoch/SwipeCellKit/develop/Screenshots/Expansion-Delegate.gif" /></p>
<h2 id='requirements' class='heading'>Requirements</h2>
<ul>
<li>Swift 4.0</li>
<li>Xcode 9</li>
<li>iOS 9.0+</li>
</ul>
<h2 id='installation' class='heading'>Installation</h2>
<h4 id='a-href-http-cocoapods-org-cocoapods-a-recommended' class='heading'><a href="http://cocoapods.org">CocoaPods</a> (recommended)</h4>
<pre class="highlight ruby"><code><span class="n">use_frameworks!</span>
<span class="c1"># Latest release in CocoaPods</span>
<span class="n">pod</span> <span class="s1">'SwipeCellKit'</span>
<span class="c1"># Get the latest on develop</span>
<span class="n">pod</span> <span class="s1">'SwipeCellKit'</span><span class="p">,</span> <span class="ss">:git</span> <span class="o">=></span> <span class="s1">'https://github.com/SwipeCellKit/SwipeCellKit.git'</span><span class="p">,</span> <span class="ss">:branch</span> <span class="o">=></span> <span class="s1">'develop'</span>
</code></pre>
<h4 id='a-href-https-github-com-carthage-carthage-carthage-a' class='heading'><a href="https://github.com/Carthage/Carthage">Carthage</a></h4>
<pre class="highlight shell"><code>github <span class="s2">"SwipeCellKit/SwipeCellKit"</span>
</code></pre>
<h2 id='documentation' class='heading'>Documentation</h2>
<p>Read the <a href="https://swipecellkit.github.io/SwipeCellKit/">docs</a>. Generated with <a href="https://github.com/realm/jazzy">jazzy</a>. Hosted by <a href="https://pages.github.com">GitHub Pages</a>.</p>
<h2 id='usage' class='heading'>Usage</h2>
<p>Set the <code>delegate</code> property on <code><a href="Classes/SwipeTableViewCell.html">SwipeTableViewCell</a></code>:</p>
<pre class="highlight swift"><code><span class="k">override</span> <span class="kd">func</span> <span class="nf">tableView</span><span class="p">(</span><span class="n">_</span> <span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="n">cellForRowAt</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">)</span> <span class="o">-></span> <span class="kt">UITableViewCell</span> <span class="p">{</span>
<span class="k">let</span> <span class="nv">cell</span> <span class="o">=</span> <span class="n">tableView</span><span class="o">.</span><span class="nf">dequeueReusableCell</span><span class="p">(</span><span class="nv">withIdentifier</span><span class="p">:</span> <span class="s">"Cell"</span><span class="p">)</span> <span class="k">as!</span> <span class="kt">SwipeTableViewCell</span>
<span class="n">cell</span><span class="o">.</span><span class="n">delegate</span> <span class="o">=</span> <span class="k">self</span>
<span class="k">return</span> <span class="n">cell</span>
<span class="p">}</span>
</code></pre>
<p>Adopt the <code><a href="Protocols/SwipeTableViewCellDelegate.html">SwipeTableViewCellDelegate</a></code> protocol:</p>
<pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">tableView</span><span class="p">(</span><span class="n">_</span> <span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="n">editActionsForRowAt</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">,</span> <span class="k">for</span> <span class="nv">orientation</span><span class="p">:</span> <span class="kt">SwipeActionsOrientation</span><span class="p">)</span> <span class="o">-></span> <span class="p">[</span><span class="kt">SwipeAction</span><span class="p">]?</span> <span class="p">{</span>
<span class="k">guard</span> <span class="n">orientation</span> <span class="o">==</span> <span class="o">.</span><span class="k">right</span> <span class="k">else</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">nil</span> <span class="p">}</span>
<span class="k">let</span> <span class="nv">deleteAction</span> <span class="o">=</span> <span class="kt">SwipeAction</span><span class="p">(</span><span class="nv">style</span><span class="p">:</span> <span class="o">.</span><span class="n">destructive</span><span class="p">,</span> <span class="nv">title</span><span class="p">:</span> <span class="s">"Delete"</span><span class="p">)</span> <span class="p">{</span> <span class="n">action</span><span class="p">,</span> <span class="n">indexPath</span> <span class="k">in</span>
<span class="c1">// handle action by updating model with deletion</span>
<span class="p">}</span>
<span class="c1">// customize the action appearance</span>
<span class="n">deleteAction</span><span class="o">.</span><span class="n">image</span> <span class="o">=</span> <span class="kt">UIImage</span><span class="p">(</span><span class="nv">named</span><span class="p">:</span> <span class="s">"delete"</span><span class="p">)</span>
<span class="k">return</span> <span class="p">[</span><span class="n">deleteAction</span><span class="p">]</span>
<span class="p">}</span>
</code></pre>
<p>Optionally, you can implement the <code>editActionsOptionsForRowAt</code> method to customize the behavior of the swipe actions:</p>
<pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">tableView</span><span class="p">(</span><span class="n">_</span> <span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="n">editActionsOptionsForRowAt</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">,</span> <span class="k">for</span> <span class="nv">orientation</span><span class="p">:</span> <span class="kt">SwipeActionsOrientation</span><span class="p">)</span> <span class="o">-></span> <span class="kt">SwipeTableOptions</span> <span class="p">{</span>
<span class="k">var</span> <span class="nv">options</span> <span class="o">=</span> <span class="kt">SwipeTableOptions</span><span class="p">()</span>
<span class="n">options</span><span class="o">.</span><span class="n">expansionStyle</span> <span class="o">=</span> <span class="o">.</span><span class="n">destructive</span>
<span class="n">options</span><span class="o">.</span><span class="n">transitionStyle</span> <span class="o">=</span> <span class="o">.</span><span class="n">border</span>
<span class="k">return</span> <span class="n">options</span>
<span class="p">}</span>
</code></pre>
<h3 id='transitions' class='heading'>Transitions</h3>
<p>Three built-in transition styles are provided by <code><a href="Enums/SwipeTransitionStyle.html">SwipeTransitionStyle</a></code>: </p>
<ul>
<li>.border: The visible action area is equally divide between all action buttons.</li>
<li>.drag: The visible action area is dragged, pinned to the cell, with each action button fully sized as it is exposed.</li>
<li>.reveal: The visible action area sits behind the cell, pinned to the edge of the table view, and is revealed as the cell is dragged aside.</li>
</ul>
<p>See <a href="https://github.com/SwipeCellKit/SwipeCellKit/blob/develop/Guides/Advanced.md">Customizing Transitions</a> for more details on customizing button appearance as the swipe is performed.</p>
<h4 id='transition-delegate' class='heading'>Transition Delegate</h4>
<p>Transition for a <code><a href="Classes/SwipeAction.html">SwipeAction</a></code> can be observered by setting a <code><a href="Protocols/SwipeActionTransitioning.html">SwipeActionTransitioning</a></code> on the <code>transitionDelegate</code> property. This allows you to observe what percentage is visible and access to the underlying <code>UIButton</code> for that <code><a href="Classes/SwipeAction.html">SwipeAction</a></code>. </p>
<h3 id='expansion' class='heading'>Expansion</h3>
<p>Four built-in expansion styles are provided by <code><a href="Structs/SwipeExpansionStyle.html">SwipeExpansionStyle</a></code>: </p>
<ul>
<li>.selection</li>
<li>.destructive (like Mail.app)</li>
<li>.destructiveAfterFill (like Mailbox/Tweetbot)</li>
<li>.fill</li>
</ul>
<p>Much effort has gone into making <code><a href="Structs/SwipeExpansionStyle.html">SwipeExpansionStyle</a></code> extremely customizable. If these built-in styles do not meet your needs, see <a href="https://github.com/SwipeCellKit/SwipeCellKit/blob/develop/Guides/Advanced.md">Customizing Expansion</a> for more details on creating custom styles.</p>
<p>The built-in <code>.fill</code> expansion style requires manual action fulfillment. This means your action handler must call <code>SwipeAction.fulfill(style:)</code> at some point during or after invocation to resolve the fill expansion. The supplied <code><a href="Enums/ExpansionFulfillmentStyle.html">ExpansionFulfillmentStyle</a></code> allows you to delete or reset the cell at some later point (possibly after further user interaction).</p>
<p>The built-in <code>.destructive</code>, and <code>.destructiveAfterFill</code> expansion styles are configured to automatically perform row deletion when the action handler is invoked (automatic fulfillment). Your deletion behavior may require coordination with other row animations (eg. inside <code>beginUpdates</code> and <code>endUpdates</code>). In this case, you can easily create a custom <code><a href="Structs/SwipeExpansionStyle.html">SwipeExpansionStyle</a></code> which requires manual fulfillment to trigger deletion:</p>
<pre class="highlight swift"><code><span class="k">var</span> <span class="nv">options</span> <span class="o">=</span> <span class="kt">SwipeTableOptions</span><span class="p">()</span>
<span class="n">options</span><span class="o">.</span><span class="n">expansionStyle</span> <span class="o">=</span> <span class="o">.</span><span class="nf">destructive</span><span class="p">(</span><span class="nv">automaticallyDelete</span><span class="p">:</span> <span class="kc">false</span><span class="p">)</span>
</code></pre>
<blockquote>
<p><strong>NOTE</strong>: You must call <code>SwipeAction.fulfill(with style:)</code> at some point while/after your action handler is invoked to trigger deletion. Do not call <code>deleteRows</code> directly.</p>
</blockquote>
<pre class="highlight swift"><code><span class="k">let</span> <span class="nv">delete</span> <span class="o">=</span> <span class="kt">SwipeAction</span><span class="p">(</span><span class="nv">style</span><span class="p">:</span> <span class="o">.</span><span class="n">destructive</span><span class="p">,</span> <span class="nv">title</span><span class="p">:</span> <span class="kc">nil</span><span class="p">)</span> <span class="p">{</span> <span class="n">action</span><span class="p">,</span> <span class="n">indexPath</span> <span class="k">in</span>
<span class="c1">// Update model</span>
<span class="k">self</span><span class="o">.</span><span class="n">emails</span><span class="o">.</span><span class="nf">remove</span><span class="p">(</span><span class="nv">at</span><span class="p">:</span> <span class="n">indexPath</span><span class="o">.</span><span class="n">row</span><span class="p">)</span>
<span class="c1">// Coordinate table view update animations</span>
<span class="k">self</span><span class="o">.</span><span class="n">tableView</span><span class="o">.</span><span class="nf">beginUpdates</span><span class="p">()</span>
<span class="k">self</span><span class="o">.</span><span class="n">tableView</span><span class="o">.</span><span class="nf">insertRows</span><span class="p">(</span><span class="nv">at</span><span class="p">:</span> <span class="p">[</span><span class="kt">IndexPath</span><span class="p">(</span><span class="nv">row</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nv">section</span><span class="p">:</span> <span class="mi">1</span><span class="p">)],</span> <span class="nv">with</span><span class="p">:</span> <span class="o">.</span><span class="n">automatic</span><span class="p">)</span>
<span class="n">action</span><span class="o">.</span><span class="nf">fulfill</span><span class="p">(</span><span class="nv">with</span><span class="p">:</span> <span class="o">.</span><span class="n">delete</span><span class="p">)</span>
<span class="k">self</span><span class="o">.</span><span class="n">tableView</span><span class="o">.</span><span class="nf">endUpdates</span><span class="p">()</span>
<span class="p">}</span>
</code></pre>
<h2 id='advanced' class='heading'>Advanced</h2>
<p>See the <a href="https://github.com/SwipeCellKit/SwipeCellKit/blob/develop/Guides/Advanced.md">Advanced Guide</a> for more details on customization.</p>
<h2 id='credits' class='heading'>Credits</h2>
<p>Maintained by <a href="https://twitter.com/mkurabi"><strong>@mkurabi</strong></a>.</p>
<h2 id='showcase' class='heading'>Showcase</h2>
<p>We’re interested in knowing <a href="https://github.com/SwipeCellKit/SwipeCellKit/blob/develop/SHOWCASE.md">who’s using <em>SwipeCellKit</em></a> in their app. Please submit a pull request to add your app! </p>
<h2 id='license' class='heading'>License</h2>
<p><code>SwipeCellKit</code> is released under an <a href="http://opensource.org/licenses/MIT">MIT License</a>. See <code>LICENSE</code> for details.</p>
<p><em>Please provide attribution, it is greatly appreciated.</em></p>
</section>
</section>
<section id="footer">
<p>© 2017 <a class="link" href="https://twitter.com/mkurabi" target="_blank" rel="external">Mohammad Kurabi</a>. All rights reserved. (Last updated: 2017-10-06)</p>
<p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.8.4</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
</section>
</article>
</div>
</body>
</div>
</html>